jQuery 最核心的組成部分就是：選擇器引擎。它繼承了 CSS 的語法，可以對 DOM 元 素的標簽名、屬性名、狀態等進行快速準確的選擇，并且不必擔心瀏覽器的兼容性

常規選擇器

根據id選擇元素就是使用#，還有兩種其他選擇元素的方式，分別是根據元素名和class：

注意：根據ID返回的是一個DOM對象，而根據元素名和class的方式返回的都是多個（如果有的話）。可以使用.length 或 .size()方法來查看返回的元素個數，但是.size()方法在jQuery1.8被廢棄，就只能使用.length了

如果使用不存在的ID選擇會返回jQuery對象：

alert($('#pox')); //(Object)pox是不存在的id

我們可以使用.length來判斷該id的元素是否存在，大于0則表示存在 :

if ($('#pox').length > 0) { //判斷元素包含數量即可 $('#pox').css('color', 'red'); }

?

還有一些較高級的選擇器方便選擇元素 :

$('span, em, .box').css('color', 'red'); //群組選擇器 $('ul li a').css('color', 'red'); //后代選擇器 $('*').css('color', 'red'); //通配選擇器,這種使用方法效率很低，影響性能，建議竟可能少用

當選擇器篩選越復雜，jQuery 內部的選擇器引擎處理字符串的時間就越長

?

一般來說通過以上六種選擇器基本上可以解決所有 DOM 節點對象選擇的問題。但在很多特殊的元素上，比如父子關系的元素，兄弟關系的元素，特殊屬性的元素等等，并且隨著 jQuery 兼容，這些選擇器的使用頻率也越來越高：

?

后代選擇器

$('#box p').css('color', 'red'); //全兼容

?jQuery 為后代選擇器提供了一個等價 find()方法：

$('#box').find('p').css('color', 'red'); //和后代選擇器等價

?

子選擇器，孫子節點不可見

$('#box > p').css('color', 'red'); //兼容 IE6

?jQuery 為子選擇器提供了一個等價 children()方法：

$('#box').children('p').css('color', 'red'); //和子選擇器等價

?

next 選擇器(下一個同級節點)

$('#box+p').css('color', 'red'); //兼容 IE6

?jQuery 為 next 選擇器提供了一個等價的方法 next()：

$('#box').next('p').css('color', 'red'); //和 next 選擇器等價

?

nextAll 選擇器(后面所有同級節點)

$('#box ~ p').css('color', 'red'); //兼容 IE6

jQuery 為 nextAll 選擇器提供了一個等價的方法 nextAll()：

$('#box').nextAll('p').css('color', 'red'); //和 nextAll 選擇器等價

在 find()、next()、nextAll()和 children()這四個方法中，如果不傳遞參數，就相當于傳遞 了“*”，即任何節點，不建議不傳參，不但影響性能，還會出現各種問題。

理論上來講，jQuery 提供的方法 find()、next()、nextAll()和 children()運行速度要快，推薦使用這些方法

?

jQuery 還提供了更加豐富的方法來選擇元素：

$('#box').prev('p').css('color', 'red'); //同級上一個元素 $('#box').prevAll('p').css('color', 'red'); //同級所有上面的元素

?

nextUntil()和 prevUnitl()方法是選定同級的下面或上面的所有節點，選定非指定的所有元素，一旦遇到指定的元素就停止選定：

$('#box').prevUntil('p').css('color', 'red'); //同級上非指定元素選定，遇到則停止 $('#box').nextUntil('p').css('color', 'red'); //同級下非指定元素選定，遇到則停止

?

siblings()方法正好集成了 prevAll()和 nextAll()兩個功能的效果，及上下相鄰的所有元素 進行選定：

$('#box').siblings('p').css('color', 'red'); //同級上下所有元素選定 //等價于下面： $('#box').prevAll('p').css('color', 'red'); //同級上所有元素選定 $('#box').nextAll('p').css('color', 'red'); //同級下所有元素選定

?

還可以使用屬性選擇器：

選定含有title這個屬性的元素

$('a[title]').css('color', 'red');

?

選定具有title=name這個屬性=這個屬性值的

$('a[title=num1]').css('color', 'red');

?

選定具有title這個屬性且開頭屬性值匹配的

$('a[title=^num]').css('color', 'red'); /

?

選定具有title這個屬性且結尾屬性值匹配的

$('a[title$=num]').css('color','red');

?

選定具有title這個屬性且屬性值不想等num1的

$('a[title~=num1]').css('color','red');

?

選定具有多個屬性且屬性值匹配成功的

$('a[bbb][title=num1]').css('color','red');

還有一些屬性選擇器使用就不在列出來

?

過濾選擇器

它其實也是一種選擇器，而這種選擇器類似與 CSS3里的偽類。和 CSS 中的偽類的語法類似：使用冒號(:)開頭

?

?

$('li:first').css('background', '#ccc'); //第一個元素 $('li:last).css('background', '#ccc'); //最后一個元素 $('li:not(.red)).css('background', '#ccc'); //非 class 為 red 的元素 $('li:even').css('background', '#ccc'); //索引為偶數的元素，從0開始 $('li:odd).css('background', '#ccc'); //索引為奇數的元素，從0開始 $('li:eq(2)').css('background','#ccc'); //選擇2的位置 從0開始 $('li:eq(-2)').css('background','#ccc'); //負數表示從末尾開始 $('li:gt(2)').css('background', '#ccc'); //大于索引值的元素，也存在負數 $('li:lt(2)').css('background', '#ccc'); //小于索引值的元素，也存在負數 $(':header').css('background', '#ccc'); //頁面所有 h1 ~ h6 元素 $('h3:header').css('background','#ccc'); //指定為h3

:focus 過濾器，必須是網頁初始狀態的已經被激活焦點的元素才能實現元素獲取。 而不是鼠標點擊或者 Tab 鍵盤敲擊激活的

$('input').get(0).focus(); //先初始化激活一個元素焦點 $(':focus').css('background', 'red'); //被焦點的元素

?

jQuery 為最常用的過濾器提供了專用的方法，已達到提到性能和效率的作用：

$('li').eq(2).css('background', '#ccc'); //元素 li 的第三個元素，負數從后開始 $('li').first().css('background', '#ccc'); //元素 li 的第一個元素 $('li').last().css('background', '#ccc'); //元素 li 的最后一個元素 $('li').not('.red').css('background', '#ccc'); //元素 li 不含 class 為 red 的元素

?

注意：:first、:last 和 first()、last()這兩組過濾器或方法在使用的時候，first 會實現第一個父元素的第一個子元素，last 會實現最后一個父元素的最后一個子元素。所以，需要明確是哪個父元素

?

子元素過濾器的過濾規則是通過父元素和子元素的關系來獲取相應的元素：

?

$('li:first-child').css('background', '#ccc'); //每個父元素第一個 li 元素 $('li:last-child').css('background', '#ccc'); //每個父元素最后一個 li 元素 $('li:only-child').css('background', '#ccc'); //每個父元素只有一個 li 元素 $('li:nth-child(odd)').css('background', '#ccc'); //每個父元素奇數 li 元素 $('li:nth-child(even)').css('background', '#ccc'); //每個父元素偶數 li 元素 $('li:nth-child(2)').css('background', '#ccc'); //每個父元素第三個 li 元素

?

轉載于:https://www.cnblogs.com/lz2017/p/6858506.html

總結

以上是生活随笔為你收集整理的jQuery笔记——选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。