jQuery选择器之属性选择器

冷不防 2022-03-22 14:01 375阅读 0赞

转载：[https://blog.csdn.net/linshichen/article/details/51576461][https_blog.csdn.net_linshichen_article_details_51576461]

##     ##

**第一种根据属性选择E\[attr\]**  
$("\[title\]").click()..........

即选择所有元素内 属性带有title的元素  
即  
<li class="aaaa" title="[ttt][]">li-1</li>  
<li title="fffff">li-2</li>  
<[div][] class="aaaa" title="ttt">li-1</div>  
<div title="fffff">li-2</div>  
  
$("div\[title\]").click()..........

选择所有div标签下的所有带title的元素  
即  
<div class="aaaa" title="ttt">li-1</div>  
<div title="fffff">li-2</div>  
  
**第二种根据属性值选择E\[@attr=val\]**  
  
$("div\[title='ttt'\]").click()................

选择div下所有title属性等于ttt的元素  
即  
<div class="aaaa" title="ttt">li-1</div>  
  
如果是 $("\[title='ttt'\]").click()................  
  
所有元素下属性title等于ttt的元素  
<li class="aaaa" title="ttt">li-1</li>  
<div class="aaaa" title="ttt">li-1</div>  
  
**第三种根据属性值开始字母选择E\[attr^=val\]**  
  
$("div\[title^='t'\]").click()................  
  
所有div元素下所有属性title值是以t为开头的元素  
  
  
**第三种根据属性值开始字母选择E\[@attr$=val\]**  
  
$("div\[title$='t'\]").click()................  
  
所有div元素下所有属性title值是以t为结尾的元素  
  
**第三种根据属性值包含字母选择E\[@attr\*=val\]**  
  
$("div\[title\*='t'\]").click()................  
  
所有div元素下所有属性title值是包含t的所有元素  
  
**第三种根据多个属性选择E\[attr=val\]\[attr=val\]**  
  
$("div\[title='ttt'\]\[class='aaaa'\]").click()................  
  
所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素

下面还有一些：

1 :first :last

$('div:first');  
$('div:last');  
获取所有div元素的第一个元素和最后一个元素

2 :even :odd：

$('div:even');  
匹配所有div对象中的偶数元素  
$('div:odd'):  
匹配所有div对象中的奇数元素  
这个首先想到在设置列表的样式时会用上,还会有很多地方会用到的.

3 eq(index)

$('div:eq(2)')  
匹配第二个div对象  
这个参数是数字，所以在获取某些对象时也比较灵活.

4 :gt(index) :lt(index)

$('div:gt(1)')  
匹配小于下标的所有元素  
$('div:lt(2)')  
匹配大于下标的所有元素

5 :contains(text)

$('div:contains("txt")');  
匹配内部包含有文本txt元素的对象

6 :empty

$('div:empty')  
匹配所有没有子元素的对象

7 has(selector)

$('div:has("\#abc")')  
返回含有\#abc子元素的div对象

8 :hidden :visible

$('div:hidden')  
匹配所有隐藏对象  
$('div:visible')  
匹配所有可见的对象

$("div\[id\]")                查找所有含有 id 属性的div元素。  
$("div\[id='ajaxa'\]")        查找 id 为 ajaxa 的 div 元素。  
$("div\[id!='ajaxa'\]")       查找 id 不为 ajaxa 的 div 元素。  
$("div\[id^='ajaxa'\]")       查找 id 以 ajaxa 开头的 div 元素。  
$("div\[id$='ajaxa'\]")       查找 id 以 ajaxa 结尾的 div 元素。  
$("div\[id\*='ajaxa'\]")       查找 id 含 ajaxa 的 div 元素。  
$("div\[id^='ajaxa'\]")       查找 id 以 ajaxa 开头的 div 元素。  
$("div\[id\]\[class='ajaxa'\]") 查找存在id属性并且类为ajaxa的 div 元素。

div去掉的话就是查找符合要求的所有元素

jquery 获得tagName 的方法：$('\#id').attr("tagName");jquery把tagName 当成属性了。

[https_blog.csdn.net_linshichen_article_details_51576461]: https://blog.csdn.net/linshichen/article/details/51576461
[ttt]: https://www.baidu.com/s?wd=ttt&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[div]: https://www.baidu.com/s?wd=div&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd