2-jQuery的选择器

最新推荐文章于 2021-11-30 19:28:12 发布

qq_45868411

最新推荐文章于 2021-11-30 19:28:12 发布

阅读量340

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/qq_45868411/article/details/118702492

版权

文章目录

- - jQuery的选择器

jQuery的选择器

1.基本选择器：

（1）：ID选择器：$(#id)，获取指定ID的元素

（2）：全选选择器：$(’*’)，匹配所有的元素

（3）：类选择器：$(’.class’)，获取指定类的元素

（4）：标签选择器：$(‘div’)，获取指定标签的所有元素

（5）：并集选择器：$(‘div,p,li’)，获取多个元素

（6）：交集选择器：$(‘li.current’)，获取交集元素

2.层级选择器：

（1）子代选择器：$(‘ul>li’)，使用>号，获取亲儿子层级的元素，并不会获取孙子层级的元素

（2）后代选择器：$(‘ul li’)，使用空格，代表获取ul下面的所有li元素，包括孙子等。

3.隐式迭代（重要内容）

遍历内部DOM元素（伪数组形式存储）的过程叫做隐式迭代。

简单理解：给匹配到的元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化了我们的操作。

4.jQuery筛选选择器：

（1） :first $(‘li:first’) 获取第一个元素

（2） :last $(‘li:last’) 获取最后一个元素

（3） :eq(index) $(‘li:eq(2)’) 获取到的li元素中，选择索引号为2的元素（索引从0开始）

（4） :odd $(‘li:odd’) 获取到的li元素中，选择索引号为奇数的元素

（5） :even $(‘li:even’) 获取到的li元素中，选择索引号为偶数的元素

代码展示：

<script src="../js/jquery-3.4.1.min.js"></script>
<ul>
    <li>筛选几个</li>
    <li>筛选几个</li>
    <li>筛选几个</li>
    <li>筛选几个</li>
    <li>筛选几个</li>
    <li>筛选几个</li>
</ul>
<ol>
    <li>多个</li>
    <li>多个</li>
    <li>多个</li>
    <li>多个</li>
    <li>多个</li>
    <li>多个</li>
</ol>
<script>
    $(function() {
        $("ul li:first").css("color", "red");
        $("ul li:eq(2)").css("color", "blue");
        $("ol li:odd").css("color", "skyblue");
        $("ol li:even").css("color", "pink");
    });
</script>

展示效果如下：

效果图

5.jQuery筛选方法（重点）

常用的方法：

（1）parent() $(‘li’).parent(); 查找父级元素

（2）childern(‘元素名’) $(‘ul’).children(‘li’) 查找最近一级的子集

（3）find(‘元素名’) $(‘ul’).find(‘li’) 后代选择器

（4）siblings(‘元素名’) $(’.item’).siblings(‘li’) 查找兄弟节点，不包括本身

（5）hasClass(类名) $(‘div’).hasClass(‘nav’) 检查当前元素是否有特定的类，如果有，返回true

（6）eq(index) $(‘li’).eq(3) 查找索引为3的li元素

6.jQuery实现排他算法

<script src="../js/jquery-3.4.1.min.js"></script>
<body>
    <button>变化</button>
    <button>变化</button>
    <button>变化</button>
    <button>变化</button>
    <button>变化</button>
    <button>变化</button>
    <button>变化</button>
    <script>
        $(function() {
            // 1. 隐式迭代会给所有的按钮绑定了点击事件
            $("button").click(function() {
                // 2. 当前点击的元素变化背景颜色
                $(this).css("background", "red");
                // 3. 其余的兄弟元素去掉背景颜色 隐式迭代
                $(this).siblings("button").css("background", "");
            });
        })
    </script>
</body>