1). 基本選擇器
l 基本選擇器是jquery中最簡單，也是最常用的選擇器
l 它通過標籤名,id屬性,class屬性來查找匹配的DOM元素
1.1) id選擇器
l 用法: $(‘#id’)
l 返回值：根據id屬性匹配一個標籤, 封裝成jQuery對象
1.2) 標籤選擇器
l 用法: $(‘tagName’)
l 返回值：根據標籤名匹配的一個或多個標籤, 封裝成jQuery對象
1.3) class選擇器
l 用法: $(‘.class’)
l 返回值：根據class屬性值匹配一個或多個標籤, 封裝成jQuery對象
1.4) *選擇器
l 用法: $(*)
l 返回值: 匹配所有標籤, 封裝成jQuery對象
1.5) selector1,selector2,…
l 用法: $(”divspan .myClass”)
l 返回值: 所有匹配選擇器的標籤, 封裝成jQuery對象
2). 層次選擇器
l 如果想通過DOM元素之間的層次關係來獲取特定元素。例如子元素、兄弟元素等。則需要通過層次選擇器。
2.1). ancestor descendant
l 用法: $(”form input.class/input#id”)
l 說明: 在給定的祖先元素下匹配所有後代元素
2.2) parent > child
l 用法: $(”form > input”)
l 說明: 在指定父元素下匹配所有子元素.注意:要區分好後代元素與子元素
2.3) prev + next
l 用法: $(”label + input”)
l 說明: 匹配所有緊接在prev元素後的next元素
2.4) prev ~ siblings
l 用法: $(”form ~ input”)
l 說明: 匹配prev元素之後的所有siblings元素, 不包含該元素在內,並且siblings匹配的是和prev同輩的元素,其後輩元素不被匹配.
3). 基本過濾選擇器
l 過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素, 該選擇器都以“:”開頭
l 按照不同的過濾規則, 過濾選擇器可以分爲基本過濾, 內容過濾, 可見性過濾, 屬性過濾, 子元素過濾, 表單過濾和表單屬性過濾選擇器.
3.1). :first
l 用法: $(”tr:first”) ;
l 說明: 匹配找到的第一個元素
3.2). :last
l 用法: $(”tr:last”)
l 說明: 匹配找到的最後一個元素.與 :first 相對應
3.3). :not(selector)
l 用法: $(”input:not(:checked)”)
l 說明: 去除所有與給定選擇器匹配的元素.有點類似於”非”,意思是沒有被選中的input(當input的type=”checkbox”).
3.4). :even
l 用法: $(”tr:even”)
l 說明: 匹配所有索引值爲偶數的元素，從0開始計數.js的數組都是從0開始計數的.
3.5). : odd
l 用法: $(”tr:odd”)
l 說明: 匹配所有索引值爲奇數的元素,和:even對應,從0 開始計數.
3.6). :eq(index)
l 用法: $(”tr:eq(0)”)
l 說明: 匹配一個給定索引值的元素.eq(0)就是獲取第一個tr元素.括號裏面的是索引值,不是元素排列數.
3.7). :gt(index)
l 用法: $(”tr:gt(0)”)
l 說明: 匹配所有大於給定索引值的元素.
3.8). :lt(index)
l 用法: $(”tr:lt(2)”)
l 說明: 匹配所有小於給定索引值的元素.
4). 內容過濾選擇器
l 內容過濾選擇器的過濾規則主要體現在它所包含的子元素和文本內容上
4.1). :contains(text)
l 用法: $(”div:contains(’John’)”)
l 說明: 匹配包含給定文本的元素.這個選擇器比較有用，當我們要選擇的不是dom標籤元素時,它就派上了用場了,它的作用是查找被標籤”圍”起來的文本內容是否符合指定的內容的.
4.2). :empty
l 用法: $(”td:empty”)
l 說明: 匹配所有不包含子元素或者文本的空元素
4.3). :has(selector)
l 用法: $(”div:has(p)”).addClass(”test”)
l 說明: 匹配含有選擇器所匹配的元素的元素.這個解釋需要好好琢磨,但是一旦看了使用的例子就完全清楚了:給所有包含p元素的div標籤加上class=”test”.
4.4). :parent
l 用法: $(”td:parent”)
l 說明: 匹配含有子元素或者文本的元素.注意:這裏是”:parent”,可不是”.parent”哦!感覺與上面講的”:empty”形成反義詞.
5). 可見過濾選擇器
l 根據元素的可見和不可見狀態來選擇相應的元素
5.1). :hidden
l 用法: $(”tr:hidden”)
l 說明: 匹配所有的不可見元素，input 元素的 type 屬性爲 “hidden” 的話也會被匹配到.意思是css中display:none和input type=”hidden”的都會被匹配到.同樣,要在腦海中徹底分清楚冒號”:”, 點號”.”和逗號”,”的區別.
5.2). :visible
l 用法: $(”tr:visible”)
l 說明: 匹配所有的可見元素.
6). 屬性過濾選擇器
l 屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素
6.1). [attribute]
l 用法: $(”div[id]“)
l 說明: 匹配包含給定屬性的元素. 例子中是選取了所有帶id屬性的div標籤.
6.2). [attribute=value]
l 用法:$(”input[name='newsletter']“).attr(”checked”, true)
l 說明: 匹配給定的屬性是某個特定值的元素.例子中選取了所有name屬性是newsletter的 input 元素.
6.3). [attribute!=value]
l 用法:$(”input[name!='newsletter']“).attr(”checked”, true)。
l 說明：匹配所有不含有指定的屬性，或者屬性不等於特定值的元素.此選擇器等價於:not([attr=value]),要匹配含有特定屬性但不等於特定值的元素,請使用[attr]:not([attr=value]).之前看到的 :not 派上了用場.
6.4). [attribute^=value]
l 用法: $(”input[name^=‘news’]“)
l 說明: 匹配給定的屬性是以某些值開始的元素.,我們又見到了這幾個類似於正則匹配的符號.現在想忘都忘不掉了吧?!
6.5). [attribute$=value]
l 用法: $(”input[name$=‘letter’]“)
l 說明: 匹配給定的屬性是以某些值結尾的元素.
6.6). [attribute*=value]
l 用法: $(”input[name*=‘man’]“)
l 說明: 匹配給定的屬性是以包含某些值的元素.
7). 子元素過濾選擇器
7.1). :nth-child(index/even/odd/equation)
l 用法: $(”ul li:nth-child(2)”)
l 說明: 匹配其父元素下的第N個子或奇偶元素.這個選擇器和之前說的基礎過濾(Basic Filters)中的eq() 有些類似,不同的地方就是前者是從0開始,後者是從1開始.
7.2). :first-child
l 用法: $(”ul li:first-child”)
l 說明: 匹配第一個子元素.’:first’ 只匹配一個元素,而此選擇符將爲每個父元素匹配一個子元素.這裏需要特別點的記憶下區別.
7.3). :last-child
l 用法: $(”ul li:last-child”)
l 說明: 匹配最後一個子元素.’:last’只匹配一個元素,而此選擇符將爲每個父元素匹配一個子元素.
7.4). : only-child
l 用法: $(”ul li:only-child”)
l 說明: 如果某個元素是父元素中唯一的子元素,那將會被匹配.如果父元素中含有其他元素,那將不會被匹配.意思就是:只有一個子元素的纔會被匹配!
8). 表單選擇器
9.1). :input
l 用法: $(”:input”)
l 說明:匹配所有 text, textarea, select 和button 元素
9.2). :text
l 用法: $(”:text”)
l 說明: 匹配所有的單行文本框.
9.3). :password
l 用法: $(”:password”)
l 說明: 匹配所有密碼框.
9.4). :radio
l 用法: $(”:radio”)
l 說明: 匹配所有單選按鈕.
9.5). :checkbox
l 用法: $(”:checkbox”)
l 說明: 匹配所有複選框
9.6). :submit
l 用法: $(”:submit”)
l 說明: 匹配所有提交按鈕
9.7). :image
l 用法: $(”:image”)
l 說明: 匹配所有圖像域.
9.8). :reset
l 用法: $(”:reset”)
l 說明: 匹配所有重置按鈕.
9.9). :button
l 用法: $(”:button”)
l 說明: 匹配所有按鈕.這個包括直接寫的元素button.
9.10). :file
l 用法: $(”:file”)
l 說明: 匹配所有文件域.
9.11). :hidden
l 用法: $(”input:hidden”)
l 說明: 匹配所有不可見元素，或者type爲hidden的元素.這個選擇器就不僅限於表單了,除了匹配input中的hidden外,那些style爲hidden的也會被匹配.
9). 表單對象屬性過濾選擇器
l 此選擇器主要對所選擇的表單元素進行過濾
8.1). :enabled
l 用法: $(”input:enabled”)
l 說明: 匹配所有可用元素.意思是查找所有input中不帶有disabled=”disabled”的input.不爲disabled,當然就爲enabled啦.
8.1). :disabled
l 用法: $(”input:disabled”)
l 說明: 匹配所有不可用元素.與上面的那個是相對應的.
8.1). :checked
l 用法: $(”input:checked”)
l 說明: 匹配所有選中的被選中元素(複選框、單選框等，不包括select中的option).這話說起來有些繞口.
8.1). :selected
l 用法: $(”select option:selected”)
l 說明: 匹配所有選中的option元素.
3.4. 文檔處理(CRUD)
1). 內部插入節點
1.1). append(content)
l 向每個匹配的元素的內部的結尾處追加內容
1.2). appendTo(content)
l 把所有匹配的元素追加到另一個指定的元素元素集合中
1.3). prepend(content)
l 向每個匹配的元素的內部的開始處插入內容
1.4). prependTo(content)
l 將每個匹配的元素插入到指定的元素內部的開始處
2). 外部插入節點
2.1). after(content) :
l 在每個匹配的元素之後插入內容
2.2). before(content)
l 在每個匹配的元素之前插入內容
2.3). insertAfter(content)
l 把所有匹配的元素插入到另一個、指定的元素元素集合的後面
2.4). insertBefore(content)
l 把所有匹配的元素插入到另一個、指定的元素元素集合的前面
3).查找節點
3.1). 使用jQuery選擇器查詢
l $(selector)
l 得到一個包含所有匹配的dom節點對象的jQuery對象
3.2). 查詢jQuery對象內部數據
l $object.find(selector)
l 在Jquery對象中根據selector查找其中匹配的後代節點
3.3). 遍歷jQuery對象包含的數據
l $(selector1).each(function(index, itemDom){})
l 遍歷jQuery對象所包含的所有節點, 每取一個dom節點對象都去調用設置的回調函數, 並將取出的節點在數組中的下標和節點對象傳入函數
4).創建節點
l $(htmlString).
l 動態創建的新元素節點不會被自動添加到文檔中, 需要使用其他方法將其插入到文檔中;
l 當創建單個元素時, 需注意閉合標籤和使用標準的 XHTML 格式. 例如創建一個<p>元素, 可以使用 $(“<p/>”) 或$(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”)
l 創建文本節點就是在創建元素節點時直接把文本內容寫出來; 創建屬性節點也是在創建元素節點時一起創建
5). 刪除節點
5.1). empty():
l 刪除匹配的元素集合中所有的子節點(不包括本身)。
5.2). remove():
l 刪除匹配的元素及其子元素(包括本身)
6). 屬性操作
6.1). attr(name[,value])
l 根據屬性名獲取屬性值或者設置一個屬性
6.2). removeAttr(name)
l 根據屬性名刪除對應的屬性
7). HTML代碼/值
7.1). html([val])
l 得到元素的內容或者設置元素的內容
7.2). val([value])
l 獲得匹配元素的當前值或者設置其值
8) CSS
8.1). addClass(className)
l 添加class屬性
8.2). removeClass([className])
l 移除class屬性
8.3). css(name, [value])
l 查看某個樣式屬性, 或設置某個樣式屬性
3.5. 事件
1) 常用的事件
1.1). ready(fn)
l 當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數
l 它與window.onload是有區別的
1.2). click([fn])
l 觸發每一個匹配元素的click事件
1.3). blur([fn])
l 觸發每一個匹配元素的blur事件，與focus相反
1.4). change([fn])
l 觸發每一個匹配元素的change事件
2) 綁定與解綁事件
2.1). bind(type,fn)
l 爲每個匹配元素的特定事件綁定事件處理函數。
2.2). unbind(type)
l bind()的反向操作，從每一個匹配的元素中刪除綁定的事件
3) 事件切換
3.1). hover(over,out)
l 當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。
4) 事件冒泡
l 描述: 事件會按照 DOM 層次結構像水泡一樣不斷向上只止頂端
l 解決: 在事件處理函數中返回 false, 會對事件停止冒泡
3.6. 效果
1) 基本
1.1) show()
l 顯示當前標籤
1.2) hide()
l 隱藏當前標籤
1.3) toggle()
l 切換當前標籤的可見性
2) 滑動
2.1). slideDown()
l 這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來
2.2). slideUp()
l 這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏起來
2.3). slideToggle()
l 通過高度變化來切換所有匹配元素的可見性
3) 淡入淡出
3.1). fadeIn()
l 通過不透明度的變化來實現所有匹配元素的淡入效果
3.2). fadeOut()
l 通過不透明度的變化來實現所有匹配元素的淡出效果