一.根據標簽屬性或屬性值獲取

1.根據屬性獲取元素

比如要獲取頁面p標簽中屬性有id的元素

代碼如下:

$("p[id]").css("color","red");

2.根據屬性值獲取元素

特殊符號 $ ， ！ ， * ， @ ， ^ 的靈活使用。

---

2.1 $

[attribute$=value]，匹配給定的屬性是以某些值結尾的元素。下面舉個例子來說明一下：

<input name="newsletter" /> <input name="milkman" /> <input name="jobletter" />

jq代碼：

$("input[name$='letter']")

獲取結果：

[ <input name="newsletter" />, <input name="jobletter" /> ]

---

2.2 !

[attribute!=value]，匹配所有不含有指定的屬性，或者屬性不等于特定值的元素，此選擇器等價于:not([attr=value]).例子說明一下：

<input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" />

jq代碼：

$("input[name!='newsletter']").attr("checked", true);

結果:

[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

---

2.3 *

[attribute*=value]，匹配給定的屬性是以包含某些值的元素。舉個例子說明一下：

<input name="man-news" /> <input name="milkman" /> <input name="letterman2" /> <input name="newmilk" />

jq代碼：

$("input[name*='man']")

結果:

[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

---

2.4 @

匹配包含給定屬性的元素。注意，在jQuery 1.3中，前導的@符號已經被廢除！如果想要兼容最新版本，只需要簡單去掉@符號即可。

2.5 ^

[attribute^=value]，匹配給定的屬性是以某些值開始的元素，下面舉個例子來說明一下

<input name="newsletter" /> <input name="milkman" /> <input name="newsboy" />

jq代碼：

$("input[name^='news']")

結果:

[ <input name="newsletter" />, <input name="newsboy" /> ]

---

2.6 獲取指定屬性且設定值中有指定字符串的元素

<input type="checkbox" name="newsletter" value="Hot Fuzz"/> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" />

jq代碼：

$("input[name$='letter'][value$='zz']").attr("checked","true");支持多條件操作

---

在jquery中，當使用

$(”input[name='metaId']“).val()

不能直接獲得被選擇的radio的值，只是獲得 radio標簽的第一個值，這可能jquery使用xpath語言了進行查找有關，而我們通常是想獲得被選中的radio的值，有以下幾種方法：

1，使用$(”input[name='metaId']:checked”).val()獲得 //name代表radio中name屬性名 2，使用$(”:radio:checked”).val()獲得 //限制頁面只有一組radio標簽

---

二.根據標簽選擇器以及父子節點獲取指定元素

1. 根據下標獲取元素

<div> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </div>

jq代碼

<script type="text/javascript"> $(function(){ $("p").eq(2).css("color","red"); $("p").eq(3).css("color","red"); }) </script>

---

2. 獲取指定條件一致和指定范圍的元素

<div> <p>0</p> <p>1</p> <p class="center">2</p> <p class="center">3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </div>

jq代碼

<script type="text/javascript"> $(function(){ $("p").filter('.center').css("color","red"); }) $(function(){ $("p").slice(5,7).css("color","yellow"); }) </script>

---

3.獲取與條件表達式一致的元素

<div> <p>0</p> <p>1</p> <p class="center">2</p> <p class="center">3</p> <p>4</p> <p class="aa">5</p> <p>6</p> <p>7</p> </div>

jq代碼

<script type="text/javascript"> jQuery(function(){ $("p").each(function(){ switch(true){ case $(this).is(".center"): $(this).css("color","red"); break; case $(this).is(".aa"): $(this).css("color","yellow"); break; } }) }) </script>

---

4.獲取元素的上一個元素和下一個元素

<div id="aa"> <p>1號</p> <p class="yes">2號</p> <p>3號</p> <p>4號</p> <p>5號</p> <p class="yes">6號</p> <p class="yes">7號</p> </div>

jq代碼

//獲取元素的下一個元素 jQuery(function(){ $("p").next(".yes").css("color","red"); }) //獲取元素的上一個元素 jQuery(function(){ $("p").prev(".yes").css("color","red"); })

---

5.獲取元素的父元素和子元素

<div id="aa"> <p>1號</p> <p class="yes">2號</p> <p>3號</p> <p>4號</p> <p>5號</p> <p class="yes">6號</p> <p class="yes">7號</p> </div>

jq代碼

//獲取元素的父元素 jQuery(function(){ $("p").parent().css("color","red"); }) //獲取元素的子元素 jQuery(function(){ $("#aa").children(".yes").css("color","red"); }) 《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的JQuery获取元素的N种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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