一.根據標簽屬性或屬性值獲取
1.根據屬性獲取元素
比如要獲取頁面p標簽中屬性有id的元素
代碼如下:
$("p[id]").css("color","red");
1
2.根據屬性值獲取元素
特殊符號 $ ， ！ ， * ， @ ， ^ 的靈活使用。
2.1 $
[attribute$=value]，匹配給定的屬性是以某些值結尾的元素。下面舉個例子來說明一下：
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
1
2
3
jq代碼：
$("input[name$='letter']")
1
獲取結果：
[ <input name="newsletter" />, <input name="jobletter" /> ]
1
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" />
1
2
3
jq代碼：
$("input[name!='newsletter']").attr("checked", true);
1
結果:
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
1
2.3 *
[attribute*=value]，匹配給定的屬性是以包含某些值的元素。舉個例子說明一下：
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
1
2
3
4
jq代碼：
$("input[name*='man']")
1
結果:
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
1
2.4 @
匹配包含給定屬性的元素。注意，在jQuery 1.3中，前導的@符號已經被廢除！如果想要兼容最新版本，只需要簡單去掉@符號即可。
2.5 ^
[attribute^=value]，匹配給定的屬性是以某些值開始的元素，下面舉個例子來說明一下
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
1
2
3
jq代碼：
$("input[name^='news']")
1
結果:
[ <input name="newsletter" />, <input name="newsboy" /> ]
1
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" />
1
2
3
jq代碼：
$("input[name$='letter'][value$='zz']").attr("checked","true");支持多條件操作
1
在jquery中，當使用
$(”input[name='metaId']“).val()
1
不能直接獲得被選擇的radio的值，只是獲得 radio標簽的第一個值，這可能jquery使用xpath語言了進行查找有關，而我們通常是想獲得被選中的radio的值，有以下幾種方法：
1，使用$(”input[name='metaId']:checked”).val()獲得 //name代表radio中name屬性名
2，使用$(”:radio:checked”).val()獲得 //限制頁面只有一組radio標簽
1
2
3
二.根據標簽選擇器以及父子節點獲取指定元素
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>
1
2
3
4
5
6
7
8
9
10
jq代碼
<script type="text/javascript">
$(function(){
$("p").eq(2).css("color","red");
$("p").eq(3).css("color","red");
})
</script>
1
2
3
4
5
6
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>
1
2
3
4
5
6
7
8
9
10
jq代碼
<script type="text/javascript">
$(function(){
$("p").filter('.center').css("color","red");
})
$(function(){
$("p").slice(5,7).css("color","yellow");
})
</script>
1
2
3
4
5
6
7
8
9
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>
1
2
3
4
5
6
7
8
9
10
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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>
1
2
3
4
5
6
7
8
9
jq代碼
//獲取元素的下一個元素
jQuery(function(){
$("p").next(".yes").css("color","red");
})
//獲取元素的上一個元素
jQuery(function(){
$("p").prev(".yes").css("color","red");
})
1
2
3
4
5
6
7
8
9
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>
1
2
3
4
5
6
7
8
9
jq代碼
//獲取元素的父元素
jQuery(function(){
$("p").parent().css("color","red");
})
//獲取元素的子元素
jQuery(function(){
$("#aa").children(".yes").css("color","red");
})
1
2
3
4
5
6
7
8
————————————————
版權聲明：本文為CSDN博主「Java仗劍走天涯」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/baidu_37107022/article/details/73135960