jQuery選擇器（2）

繼續學習jquery選擇器，感受它對于操作DOM節點的方便。

【屬性篩選選擇器】
屬性選擇器可以讓你基于屬性來定位一個元素?？梢灾恢付ㄔ撛氐哪硨傩?#xff0c;這樣所有使用該屬性而不管它的值，這個元素都將被定位，也可以更加明確并定位在這些屬性上使用特定值的元素。

使用率大的兩個：
[attr="value"]能幫我們定位不同類型的元素，特別是表單form元素的操作，比如說input[type="text"],input[type="checkbox"]等。[attr*="value"]能在網站中幫助我們匹配不同類型的文件。
例子：

<div class="left" testattr="true" ><div class="div" testattr="true" name='p1'><a>[att=val]</a></div><div class="div" testattr="true" p2><a>[att]</a></div><div class="div" testattr="true" name="-"><a>[att|=val]</a></div><div class="div" testattr="true" name="a b"><a>[att~=val]</a></div></div><script type="text/javascript">//查找所有div中，屬性name=p1的div元素 $('div[name = p1]').css("border", "3px groove red");</script><script type="text/javascript">//查找所有div中，有屬性p2的div元素 $('div[p2]').css("border", "3px groove blue");</script><script type="text/javascript">//查找所有div中，有屬性name中的值只包含一個連字符“-”的div元素 $('div[name|="-"]').css("border", "3px groove #00FF00");</script><script type="text/javascript">//查找所有div中，有屬性name中的值包含一個連字符“空”的div元素 $('div[name~="a"]').css("border", "3px groove #668B8B");</script>

【子元素篩選選擇器】
不常使用，和元素選擇器不太一樣，:first只匹配一個單獨的元素，但是:first-child選擇器可以匹配多個：即為每個父級元素匹配第一個子元素。這相當于:nth-child(1)nth-child(n) 與 :nth-last-child(n) 的區別前者是從前往后計算，后者從后往前計算。

jQuery實現:nth-child(n)是嚴格來自CSS規范，所以n值是“索引”，也就是說，從1開始計數，:nth-child(index)從1開始的，而eq(index)是從0開始的。

【表單元素選擇器】
jquery專門加入表單選擇器是為了更加方便的獲取到某個類型的表單元素。

大部分表單類別篩選器可以使用屬性篩選器替換。比如 $(':password') == $('[type=password]')。

【表單對象屬性篩選選擇器】
該選擇器是專門針對表單元素的選擇器，可以附加在其他選擇器后面，主要功能是對所選擇的表單進行篩選。

【特殊選擇器this】
this是javascript中的關鍵字，指的是當前上下文對象，簡單的說就是方法/屬性的所有者。在DOM中this就指向了這個html元素的
對象，因為this就是DOM元素本身的一個引用。

<h2>特殊選擇器this</h2><p id="test1">點擊測試：通過原生DOM處理</p><p id="test2">點擊測試：通過原生jQuery處理</p><script type="text/javascript">var p1 = document.getElementById('test1')p1.addEventListener('click',function(){//直接通過dom的方法改變顏色this.style.color = "red";},false);</script><script type="text/javascript">$('#test2').click(function(){//通過包裝成jQuery對象改變顏色 $(this).css('color','blue');})</script>

總體上：this，表示當前的上下文對象是一個html對象，可以調用html對象所擁有的屬性和方法；$(this)，代表的上下文對象是一
個jquery的上下文對象，可以調用jquery的方法和屬性值。

總結：jquery強大的選擇器，對于我們對DOM節點的操作帶來了極大的方便，但是對于選擇器的多而雜，我們應該在適當的時候選擇適當選擇器，除此之外，還應該在日常中不斷的練習來加深理解及掌握。

轉載于:https://www.cnblogs.com/yehui-mmd/p/5882603.html

總結

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

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