JQuery中的选择器的总结

Posted 2020-07-22 乔安生

JQuery的选择器十分的强大，但是我平常经常用到的却十分的有限，趁现在有时间我感觉有必要总结一下。

 

基本选择器

$("#ID") 选择ID所对应的标签元素 返回一个标签元素
$("div") 选择所有的div标签元素 返回所有div标签元素的集合
$(".class") 选择所有元素中引用了class 的标签元素 返回所有满足条件的标签元素集合
$("*") 选择文档中的所有的元素。 

 

<div class="ddiv">
    <a>我是第一层的a标签</a>
    <ul>
        <li class="li1"><a>我是 ul > li 里面的a标签1</a></li>
        <li><a>我是 ul > li 里面的a标签2</a></li>
        <li><a>我是 ul > li 里面的a标签3</a></li>
        <li><a>我是 ul > li 里面的a标签4</a></li>
        <li><a>我是 ul > li 里面的a标签5</a></li>
    </ul>
    <a>我是第一层的a标签2</a>
    <a>我是第一层的a标签3</a>
</div>

层次选择器

$("ul li") 返回ul中所有的li 包含li中的元素
$("ul > li") 返回ul下元素命是li的子元素
$(".li1+li") 返回class为li1 下一个同辈元素，会返回第二个li元素
$(".li1~li") 返回class为li1 下面的说有同辈元素，会返回第二个到最后的li元素

注意 $("ul li")和$("ul > li") 是有区别的$("ul li")是ul后面所有的li元素$("ul > li")是ul下的li元素
使用上面的html $("div a") $("div > a")就可以发现他们的区别
$("div > a")只会把div 下一级的a标签给返回
$("div a")对比上面的他还会把 li中的a标签也给返回回来

等价关系
$(".li1+li") = $(".li1").next("li");
$(".li1~li") = $(".li1").nextAll("li")

 

基本过滤选择器
$("li:first") :first 返回li第一个元素 返回单个元素
$("li:last") :last 返回li最后一个元素 返回单个元素
$("li:not(.li1)") 返回没有引用.li1样式的li元素 返回一个元素的集合
$(".ddiv li:even") 返回索引是偶数的元素 索引从0开始 返回一个元素的集合
$(".ddiv li:odd") 返回索引是偶数的元素 索引从0开始 返回一个元素的集合
$(".ddiv li:eq(0)") 返回索引等于 0 的元素。 返回单个元素
$(".ddiv li:gt(2)") 返回索引大于 2 的元素。 返回单个元素
$(".ddiv li:lt(2)") 返回索引小于 2 的元素。 返回单个元素
$(".ddiv li:focus") 选取当前获取焦点的元素。 返回一个元素的集合

　

<div class="ddiv">
    <a>我是第一层的a标签</a>
    <ul>
        <li class="li1"><a>乔安生 我是 ul > li 里面的a标签1</a></li>
        <li><a>我是 乔安生ul > li 里面的a标签2</a></li>
        <li><a>我是 ul > 乔安生li 里面的a标签3</a></li>
        <li><a>我是 ul > li 乔安生里面的a标签4</a></li>
        <li><a>我是 ul > li 里面的a标签5乔安生</a></li>
　　　 　<li></li>
    </ul>
    <a>我是第一层的a标签2</a>
    <a>我是第一层的a标签3</a>
</div>

内容过滤器
$(".ddiv li:contains(‘乔安生‘)") 选取含有文本内容包含乔安生的元素 返回一个元素的集合
$(".ddiv li:empty") 选取不包含子元素或者文本内容的空元素 返回一个元素的集合
$(".ddiv li:has(a)") 选取含有选择器所匹配的元素的元素 返回一个元素的集合
$(".ddiv li:parent") 选取包含子元素或者文本的元素

li:contains(‘乔安生‘) 文本中包含了‘乔安生‘一个词的，不管这个词在li的前面还是中间还是后面
li:empty li元素中没有任何的东西就返回
li:has(a) li中有a标签元素就返回
li:parent li中有别的元素或者文本的就返回

可见性过滤选择器
$(":hidden") 选取所有不可见的元素 返回一个元素的集合
$(":visble") 选取所有可见的元素 返回一个元素的集合

 

<div class="ddiv">
    <a>我是第一层的a标签</a>
    <ul>
        <li class="li1" title="你妹啊"><a>乔安生 我是 ul > li 里面的a标签1</a></li>
        <li><a>我是 乔安生ul > li 里面的a标签2</a></li>
        <li><a>我是 ul > 乔安生li 里面的a标签3</a></li>
        <li><a>我是 ul > li 乔安生里面的a标签4</a></li>
        <li><a>我是 ul > li 里面的a标签5乔安生</a></li>
        <li title="你妹啊"></li>
    </ul>
    <a>我是第一层的a标签2</a>
    <a>我是第一层的a标签3</a>
</div>

属性过滤器
$("div[id]") 获取所有拥有id的div 返回一个元素的集合
$("li[title=‘你妹啊‘]") 获取属性title=‘你妹啊‘的元素 返回一个元素的集合
$("li[title!=‘你妹啊‘]") 获取属性title!=‘你妹啊‘的元素 返回一个元素的集合
$("li[title^=‘你‘]") 获取属性title的值以‘你‘开头的元素 返回一个元素的集合
$("li[title$=‘啊‘]") 获取属性title的值以‘啊‘结束的元素 返回一个元素的集合
$("li[title*=‘妹‘]") 获取属性title的值含有‘啊‘的元素 返回一个元素的集合

 

<div class="ddiv">
    <a>我是第一层的a标签</a>
    <ul>
        <li class="li1" title="你妹啊"><a>乔安生 我是 ul > li 里面的a标签1</a></li>
        <li><a>我是 乔安生ul > li 里面的a标签2</a></li>
        <li><a>我是 ul > 乔安生li 里面的a标签3</a></li>
        <li><a>我是 ul > li 乔安生里面的a标签4</a></li>
        <li><a>我是 ul > li 里面的a标签5乔安生</a></li>
        <li title="你妹啊"></li>
    </ul>
    <a>我是第一层的a标签2</a>
    <a>我是第一层的a标签3</a>
    <ul>
        <li class="li1" title="你妹啊"><a>111</a></li>
        <li><a>222</a></li>
        <li><a>333</a></li>
        <li><a>444</a></li>
        <li><a>555</a></li>
        <li title="你妹啊"></li>
    </ul>
</div>

子元素过滤选择器
$(".ddiv ul li:first-child") 获取每个父元素的第一个子元素(父元素是 ul li是子元素 返回第一个ul中的李li)　　　　 返回一个元素的集合
$(".ddiv ul li:last-child") 获取每个父元素最后一个子元素(父元素是 ul li是子元素 返回第一个ul中的李li) 　　　　返回一个元素的集合
$(".ddiv ul li a:only-child") 如果a是li的中的唯一元素，就会匹配。如果父元素中含有其他元素则不会匹配　　　　返回一个元素的集合

 

表单选择器
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden