目录

一、jQuery选择器

1.1 jQuery的基础选择器

1.2 jQuery的层级选择器

二、jQuery隐式迭代

2.1需求： 通过jQuery给div一次性添加颜色

2.2 jQuery的隐式迭代

三、jQuery筛选选择器

四、jQuery筛选方法（重点）

五、jQuery的其他筛选方法

 5.1 eq(index) 方法推荐

5.2 siblings(selector) 推荐

六、jQuery排他思想

七、jQuery的链式编程

7.1  链式编程

一、jQuery选择器

原生JS获取元素的方式有很多，很杂，而且兼容性情况不一，因此jQuery给我们做了封装，使获取元素统一标准。

1.1 jQuery的基础选择器

语法格式

s$("选择器") //里面直接写上CSS选择器即可，但是要加引号

分类jQuery中的选择器

• 举例类选择器

    <div class="nav">我是类名nav div</div>
	    <script>
        //写个入口函数
        $(function () {
            //举例获取类选择器
            console.log($(".nav"));
        })
    </script>

1.2 jQuery的层级选择器

• 举例后代选择器

    <ul>
        <li>我是ul的</li>
        <li>我是ul的</li>
        <li>我是ul的</li>
        <li>我是ul的</li>
    </ul>
    <script>
        $(function () {
            console.log($("ul li")) //获取到ul中全部的li
        })
    </script>

二、jQuery隐式迭代

2.1需求： 通过jQuery给div一次性添加颜色

需求：给每个div都添加上背景颜色

在原生中，获取到全部的DOM，然后去做数组的循环，再依次添加 背景颜色

但是在jq中，有一个 隐式迭代

    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <script>
        //1.获取四个div元素
        $("div")
        //2.给四个div设置背景颜色为粉色
        $("div").css('background', 'pink')
    </script>

在这行代码中，通过$("div")获取到了全部的div，然后通过.css（）去修改属性，效果是让四个div的背景色都是粉色

那么，为什么在jQuery中只需要一行代码就可以做到，在原生中就需要使用到for循环

那么，这个就是 隐式迭代（重点）

2.2 jQuery的隐式迭代

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

简单理解：给匹配到的所有元素进行循环遍历，同时执行相应的方法，而不用我们再去做循环，简化我们的操作，方便我们的调用

换个例子：比如 ul 中有多个 li，我们用 后代选择器 $(ul li) 然后添加样式

    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>

    </ul>
    <script>
        //隐式迭代就是把匹配到的所有元素内部进行循环遍历，给每一个元素添加css这个方法
        //当然，只有在把全部的元素改同一个样式的时候才会如此操作
        //把ul中的li全改为红色
        $("ul li").css('color', 'red')
    </script>

效果是：没有循环，就把ul中所有后代li都设为了红色字体

因为隐式迭代会偷偷的做一个内部的循环，去帮做我们遍历添加样式

三、jQuery筛选选择器

举例使用：

    <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 () {
            //1.把ul的第一个li改为红色，使用 :firsts
            $("ul li:first").css('color', 'red')

            //2.把ul的最后一个li改为粉色，使用 :last
            $("ul li:last").css('color', 'pink')

            //3.选中ul中的第三个小li(index从0开始)
            $("ul li:eq(2)").css('color', 'blue')

            //4.把ol中所有的奇数li改为粉色
            $("ol li:odd").css('color', 'pink')

            //5.把ol中所有的偶数li改为红色
            $("ol li:even").css('color', 'red')

        })
    </script>

四、jQuery筛选方法（重点）

举例：从子级去查询到父级、爷爷级

    <div class="yeye">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>
    $(function () {
    // 1.父级 parent()
    console.log($(".son").parent()) //这是获取到son的父级father
    //如果连续套用parent()方法，能不能找到爷爷元素
    console.log($(".son").parent().parent()) //可以得到爷爷元素
 )}

三个div嵌套嘛，最里面那个是孙子，第二个是孙子son它爹father，第三个是son的爷爷

获取到父级，直接： .parent(),如果再上一级，就再来一个parent()

举例：从父级去查询子级

    <div class="nav">
        <p>我是大屁</p>
        <div>
            <p>我是小屁</p>
        </div>
    </div>
    <script>
        $(function () {
            // 1、通过父级去查找到子级
            //把我是大屁给选出来（nav p)
            //(1) 亲儿子 children()
            $(".nav").children("p").css('color', 'red')

            //(2) 可以选中父级中的所有孩子 包括儿子和孙子
            //找出nav盒子中所有的p标签
            $(".nav").find("p").css('color', 'pink')
            // 3.兄弟
        })
    </script>

五、jQuery的其他筛选方法

 5.1 eq(index) 方法推荐

eq是一个方法，不是一个选择器

$("ul li").eq(2) //选中ul中的第三个li（index从0开始）

就是说，用上 eq(index)，可以在使用后代选择器的时候，去指定获取到哪个子级元素

这里获取到的就是ul中的第三个li，index从0开始

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        $(function () {
            //获取到第三个li
            $('ul li').eq(2)
            //添加样式
            $('ul li').eq(2).css('color', 'pink')
        })
    </script>

因为我们独立的获取到了指定的li，所以给当前li添加样式，并不会出现隐式迭代的效果，只有当前选中的第三个li被添加了css样式

5.2 siblings(selector) 推荐

作用：获取到兄弟节点，不包括自己本身

用处：可以配合排他思想使用

举例：给当前li以外的全部li修改字体颜色

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        $(function () {
            //获取到第三个li,使用siblings，修改第三个li其他兄弟的样式
            $('ul li').eq(2).siblings().css('color', 'red')
        })
    </script>

六、jQuery排他思想

想要做出 多选一 的效果，可以使用 排他思想

排他思想：当前元素设置样式，其余的兄弟元素清除样式

如果使用排他思想，可以用到 siblings(查找的元素) 选中除了 自己以外的全部兄弟

举个栗子：有多个按钮，点击哪个按钮，哪个按钮就高亮，其他按钮就不亮

这个用到排他思想，也就是：点击到了这个按钮，其他按钮（当前按钮的兄弟siblings() ）就清空样式），这个按钮就添加样式，

    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function () {
            //1.获取到所有的button按钮，然后绑定一个click的点击事件
            $("button").click(function () {
                //jQuery中有一个隐式迭代，这句代码已经给所有按钮绑定了点击事件
                //2.给当前的元素变换背景颜色（添加样式）
                $(this).css("background", "pink")
                //3.其余的兄弟去掉背景颜色
                // 让当前元素的兄弟元素的背景色设置为空
                $(this).siblings("button").css("background", "")
            })
        })
    </script>

七、jQuery的链式编程

基于前面排他思想的举例，$(this)这句话就出现了两次

            $("button").click(function () {
                //让当前元素变色
                $(this).css("color", "red")
                //让其余的同级元素不变色(把其余同级元素的字体色清空)
                $(this).siblings().css("color", "")
            })

在这里，this出现了两次，代码出现了重复，所以，我们优化引出了 链式编程

7.1  链式编程

链式编程是jQuery中一个强大的功能，是为了可以节省代码量，看起来更优雅

比如上述的JS中，当前元素的js变色和兄弟元素清空，就出现了两次，我们可以进行优化为一句

//链式编程，节省了代码量
$(this).css("color", "red").siblings().css("color", "")

这句代码和上面的代码效果是相同的

最后

以上就是喜悦路灯为你收集整理的jQuery(基础一)：常用API（选择器&隐式迭代&筛选选择器&排他&链式编程）一、jQuery选择器二、jQuery隐式迭代三、jQuery筛选选择器四、jQuery筛选方法（重点）五、jQuery的其他筛选方法六、jQuery排他思想七、jQuery的链式编程的全部内容，希望文章能够帮你解决jQuery(基础一)：常用API（选择器&隐式迭代&筛选选择器&排他&链式编程）一、jQuery选择器二、jQuery隐式迭代三、jQuery筛选选择器四、jQuery筛选方法（重点）五、jQuery的其他筛选方法六、jQuery排他思想七、jQuery的链式编程所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。