jQuery 選擇器

經常使用JS框架

jQuery 

DOJO

Ext JS

Prototype 

jQuery 框架理念 ： WRITE LESS,DO MORE 

jQuery 1.4 企業主流版本，從jQuery1.6 開始引入大量新特性 ，最新版本 1.8.3 

jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js 

jquery-1.8.3.js jQuery框架源碼，沒有被精簡，體積較大 （主要用來研究 jQuery源碼），企業開發時，須要導入 jquery-1.8.3.min.js （精簡過）

window.onload = function() {...}  使用jquery  $(document).ready(function(){...});

1、jQuery 入門

核心函數 jQuery() 用法有四個 

1、jQuery(callback)  // 頁面onload 函數

2、jQuery(expression, [context])  // 查找指定對象 ------ 九種選擇器 

3、jQuery(elements) // 將dom對象轉換爲jQuery對象  

* document 是DOM對象 jQuery(document) 成爲了jQuery對象 

4、jQuery(html, [ownerDocument])  // 將html轉換jQuery對象 

* jQuery("<p>hello</p>") ----- 獲得 jQuery對象 

在這裏 請記住第一種用法 

jQuery 別名就是 $ 因此 jQuery(callback)  等價於 $(callback) 

* 使用jQuery能夠一次綁定多個onload函數，而傳統模式只能綁定一個onload函數 

2、什麼是jQuery對象

一種jQuery框架內部特有的對象結果，可使用jQuery提供方法，將DOM對象 經過jQuery()函數包裝，成爲jQuery對象 

jQuery對象沒法使用DOM對象屬性方法

DOM對象也沒法使用jQuery對象屬性方法

jQuery對象相似一個DOM對象數組，數組第一個元素就是 DOM對象 

DOM --- jQuery對象     $jQuery對象 =  $(DOM對象)

jQuery對象 --- DOM對象  DOM對象 = $jQuery對象[0]   也能夠寫爲   DOM對象 = $jQuery對象.get(0);

3、jQuery選擇器

常規選擇語言基於CSS3 規範 

jQuery(expression, [context])  在覈心函數jQuery中傳入 表達式，對頁面中元素進行選擇 

1、基本選擇器

根據元素id屬性、class屬性、元素名稱 對元素進行選擇 

ID選擇器  $("#元素id屬性")

CLASS選擇器 $(".元素class屬性")

元素名稱選擇器  $("元素名稱")

多個選擇器同時使用 selector1,select2  例如 ： $("#xxid ,.xxxclass") 同時選擇 id 和 class匹配兩類元素

2、層級選擇器

根據祖先、後代、父子關係、兄弟關係 進行選擇 

ancestor descendant  獲取ancestor元素下邊的全部元素  $("form input") 

parent > child  獲取parent元素下邊的全部直接child 子元素   $("form > input") 

prev + next  獲取緊隨pre元素的後一個兄弟元素 $("label + input") 

prev ~ siblings 獲取pre元素後邊的全部兄弟元素 $("form ~ input") 

3、基本過濾選擇器

:first  選取第一個元素 $("tr:first") 

:last   選取最後一個元素 $("tr:last") 

:not(selector)  去除全部與給定選擇器匹配的元素 $("input:not(:checked)") 

:even  選取全部元素中偶數索引的元素，從 0 開始計數 $("tr:even")  ----- 選取奇數元素

:odd  選取全部元素中奇數索引的元素 ，從 0 開始計數 $("tr:odd")  ------ 選取偶數元素

:eq(index) 選取指定索引的元素  $("tr:eq(1)") 

:gt(index)  選取索引大於指定index的元素  $("tr:gt(0)") 

:lt(index)   選取索引小於指定index的元素  $("tr:lt(2)") 

:header  選取全部的標題元素  如：h1, h2, h3   $(":header")

:animated  匹配全部正在執行動畫效果的元素

4、內容過濾選擇器

內容選擇器是對子元素和文本內容的操做

:contains(text) 選取包含text文本內容的元素  $("div:contains('John')")  文本內容含有john 的全部div

:empty 選取不包含子元素或者文本節點的空元素 $("td:empty")  td元素必須爲空

:has(selector) 選取含有選擇器所匹配的元素的元素  $("div:has(p)").addClass("test");  含有p子元素的div 

:parent  選取含有子元素或文本節點的元素  $("td:parent")  全部不爲空td元素選中 

5、可見性過濾選擇器

根據元素的可見與不可見狀態來選取元素 

:hidden  選取全部不可見元素 $("tr:hidden") 

:visible  選取全部可見的元素 $("tr:visible") 

6、屬性過濾選擇器

經過元素的屬性來選取相應的元素 

[attribute] 選取擁有此屬性的元素  $("div[id]") 

[attribute=value] 選取指定屬性值爲value的全部元素 

[attribute !=value] 選取屬性值不爲value的全部元素 

[attribute ^= value] 選取屬性值以value開始的全部元素 

[attribute $= value] 選取屬性值以value結束的全部元素 

[attribute *= value]  選取屬性值包含value的全部元素 

7、子元素過濾選擇器

對某元素中的子元素進行選取

:nth-child(index/even/odd) 選取索引爲index的元素、索引爲偶數的元素、索引爲奇數的元素  ----- index 從1開始 區別 eq

:first-child  選取第一個子元素 

:last-child  選取最後一個子元素 

:only-child 選取惟一子元素，它的父元素只有它這一個子元素

8、表單過濾選擇器

選取表單元素的過濾選擇器 

:input  選取全部<input>、<textarea>、<select >和<button>元素 

:text     選取全部的文本框元素 

:password 選取全部的密碼框元素 

:radio          選取全部的單選框元素 

:checkbox  選取全部的多選框元素 

:submit       選取全部的提交按鈕元素 

:image        選取全部的圖像按鈕元素 

:reset          選取全部重置按鈕元素 

:button       選取全部按鈕元素 

:file             選取全部文件上傳域元素 

:hidden       選取全部不可見元素 

9、表單對象屬性過濾選擇器

選取表單元素屬性的過濾選擇器 

:enabled  選取全部可用元素 

:disabled  選取全部不可用元素 

:checked  選取全部被選中的元素，如單選框、複選框 

:selected  選取全部被選中項元素，以下拉列表框、列表框 

對象訪問核心方法 ： each(function(){}) 遍歷集合 、size()/length屬性 返回集合長度 、index() 查找目標元素是集合中第幾個元素 

CSS樣式操做 ： css(name,value)  css({name:value,name:value}); 同時修改多個CSS樣式 

基本過濾選擇器與 篩選過濾 API功能是相同 

$("tr:first")  等價於 $("tr").first() 

哪些元素屬於 不可見元素， 能夠被 :hidden 選中 ？ 

css樣式 display:none 

<input type="hidden" />

****** visibility:hidden 元素不能被:hidden選中 

九種選擇器重點 ： 

1、基本選擇器和層級選擇器 鎖定元素

2、使用屬性過濾選擇器和內容過濾選擇器 具體選中元素 

3、表單操做 :checked :selected 選中 表單選中元素

配置基本過濾選擇器，縮小選中的範圍 

-----------------------------------------------------------------------------------------------------------------------------

4、jQuery DOM操做 

1、 查詢 

children([expr])  獲取指定的子元素

find(expr)  獲取指定的後代元素

parents([expr]) 得到祖輩元素

parent()  獲取父元素

next([expr])  獲取下一個兄弟元素

prev([expr])  獲取前一個兄弟元素

siblings([expr])  獲取全部兄弟元素

在XML 解析中 find 方法使用最多 

** 對查找結果進行遍歷操做 each(function(){… }) ，在each函數中能夠經過this 得到DOM對象，$(this) 得到jQuery對象 

2、屬性操做

設置屬性 attr(name,value)

讀取屬性 attr(name)

同時設置多個屬性 attr({name:value,name:value... });

attr("checked","true") 等價於 prop("checked") 

3、CSS操做

attr('style','color:red'); // 添加style屬性 

css(name, value)  設置一個CSS樣式屬性

css(properties)  傳遞key-value對象，設置多個CSS樣式屬性

addClass(class)  添加一個class屬性

removeClass([class])  移除一個class屬性

toggleClass(class)若是存在（不存在）就刪除（添加）一個類

4、HTML代碼、文本、值操做

html() 讀取innerHTML 

html(content) 設置innerHTML

text() 讀取文本內容

text(content) 設置文本內容

val() 讀取元素value屬性

val(content) 設置元素value屬性 

設置 val控制radio select checkbox 選中 

$("#city").val("廣州");

$("input[name='gender']").val(['女']);

5、jQuery添加元素

建立元素  拼接好HTML代碼片斷  $(html片斷) ---- 產生jQuery對象 

添加元素 

$node.append($newNode) 內部結尾追加

$node.prepend($newNode) 內部開始位置追加

$node.after($newNode)  在存在元素後面追加 -- 兄弟

$newNode.insertBefore($node)   在存在元素前面追加 

6、jQuery刪除元素

選中要刪除元素.remove() ---- 完成元素刪除

選中要刪除元素.remove(expr) ----- 刪除特定規則元素 

remove刪除節點後，事件也會刪除

detach刪除節點後，事件會保留 從1.4新API 

7、jQuery元素複製和替換 

$(「p」).clone();  返回節點克隆後的副本，但不會克隆原節點的事件

$(「p」).clone(true);  克隆節點，保留原有事件

$("p").replaceWith("<b>hello</b>");  將全部p元素，替換爲"<b>hello</b>「

$(「<b>hello</b>」).replaceAll(「p」);  與replaceWith相反 

----------------------------------------------------------------------------------------------------------------------------------------

5、jQuery事件 

1、事件綁定 

傳統js 通常一個對象只能綁定 某種事件 一個函數 

jQuery 支持對同一個對象，同一個事件 能夠綁定多個函數 

綁定事件函數到對象有兩種寫法

寫法一

$("div").click(function(){

  ...

);

寫法二

$("div").bind("click",function(){

 ...

}); 

取消綁定 $("div").unbind("click"); 

*** live 爲知足條件對象，實時追加綁定 、取消live事件 die方法 

2、事件一次性綁定和 自動觸發

一次性事件 one(type, [data], fn)  爲對象綁定一次性事件，只有一次有效

觸發事件 trigger(type, [data])  觸發目標對象指定的事件執行 

3、事件切換

hover(mouseover,mouseout) 模擬鼠標懸停事件 

  

toggle(fn1,fn2,fn3...) ; 鼠標點擊一次 觸發一個函數 

4、事件 阻止默認動做和傳播

$("a").click(function(event){ 

     event.preventDefault(); 

     // do something 

}); 

$("p").click(function(event){

     event.stopPropagation(); 

     // do something 

});