常见的jQuery选择器

  • 前言
  • 四大选择器
  • 一.jQuery基础选择器
  • 1.ID选择器
  • 2.全选选择器
  • 3.类选择器
  • 4.标签选择器
  • 5.并集选择器
  • 6.交集选择器
  • 层级选择器
  • 1.子代选择器
  • 2.后代选择器
  • 筛选选择器
  • 筛选方式
  • :checked选择器


前言

jQuery唯一个javascrip库,里面封装了JavaScript常用的的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。但因为jQuery对象有自己的封装，dom对象不能使用，所以需要选择器将对象选取出来使用

四大选择器

一.jQuery基础选择器

1.ID选择器

ID选择器可以选择指定id的元素

语法：$("#id")

案例:

<body>
    <div id="test">123</div>
</body>
<script>
    console.log($("#test"));
</script>

array jquery选择器 jquery选择器大全_选择器

2.全选选择器

匹配所有元素

语法:$("*")
案例：

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ol>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
    </ol>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            //全部字体变粉色
            $("*").css("color", "pink")
            console.log($('.nav'));
            console.log($('ul li'));
        });
    </script>

array jquery选择器 jquery选择器大全_jquery_02

3.类选择器

获取同一类class的元素

语法:$(".class")
案例:

<body>
    <div id="test" class="test">123</div>
    <p class="test"></p>
    <span class="no"></span>
</body>
<script>
    console.log($(".test"));
</script>

array jquery选择器 jquery选择器大全_jquery_03

此时同一类的元素被选取出来放在一个伪数组中

4.标签选择器

获取同一类标签的所有元素

语法:$(“div”)
案例：

<body>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            console.log($('ul li'));
        });
    </script>
</body>

array jquery选择器 jquery选择器大全_前端_04

5.并集选择器

同时选取多个元素

语法:$(“div,p,li”)
案例:

<body>
    <div id="test" class="test">123</div>
    <p class="test"></p>
    <span class="no"></span>
</body>
<script>
    console.log($("p,span"));
 </script>

array jquery选择器 jquery选择器大全_选择器_05

6.交集选择器

交集元素

语法：$(“li.current”)
案例:

<body>
    <div id="test" class="test">123</div>
    <p class=""></p>
    <p class="test"></p>
    <span class="no"></span>
</body>
<script>
    console.log($("p.test"));
</script>

array jquery选择器 jquery选择器大全_array jquery选择器_06

层级选择器

1.子代选择器

使用>号，获取亲儿子的层级的元素
但是并不能获取子孙层级的元素

语法:$(“ul>li”)
案例:

<body>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            console.log($('ul>li'));
        });
    </script>

array jquery选择器 jquery选择器大全_选择器_07

2.后代选择器

使用空格表示后代选择器，可以获取包括孙子的元素

语法：$(“div li”)
案例:

<body>
    <div>
        <ul>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
        </ul>
    </div>
    <script>
        $(function() {
            console.log($('div li'));
        });
    </script>

array jquery选择器 jquery选择器大全_jquery_08

筛选选择器

array jquery选择器 jquery选择器大全_javascript_09

筛选方式

array jquery选择器 jquery选择器大全_javascript_10


parents()：筛选所有上级元素，有参数就是返回指定的上级元素

:checked选择器

:checked查找被选中的表单元素