jQuery—常用API（jQuery 选择器、jQuery 样式操作、 jQuery 效果）_console.log($('div').parent().is('body'));-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_59030524/article/details/123477965

目标：

能够写出常用的jQuery选择器
能够操作jQuery样式
能够写出常用的jQuery动画
能够操作jQuery属性
能够操作jQuery元素
能够操作jQuery元素尺寸、位置

1. jQuery 选择器

1.1 jQuery 基础选择器

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

$('选择器'）//里面选择器直接写CSS选择器即可，但是要加引号

名称	用法	描述
ID 选择器	`$('#id')`	获取指定 ID 的元素
全选选择器	*`$('')`**	匹配所有元素
类选择器	`$('.class')`	获取同一类 class 的元素
标签选择器	`$('div')`	获取同一类标签的所有元素
并集选择器	`$('div,p,li')`	选取多个元素
交集选择器	`$('li.current')`	交集元素

1.2 jQuery 层级选择器

名称	用法	描述
子代选择器	`$('ul>li')`	使用 `>` 号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器	`$('ul li')`	使用空格，代表后代选择器，获取 `ul` 下的所有 `li` 元素，包括孙子等

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

1.3 隐式迭代（重要）

Tip：jQuery 设置样式：$('div’).css('属性','值')

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做 隐式迭代。简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

<body>
    <div>惊不惊喜意不意外</div>
    <div>惊不惊喜意不意外</div>
    <div>惊不惊喜意不意外</div>
    <div>惊不惊喜意不意外</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        // 1. 获取4个div元素
        console.log($('div'));;
        // 2. 给4个div设置背景为粉色
        $('div').css('background', 'pink');
        // 3. 隐式迭代 就是把匹配的所有元素内部进行遍历循环，给每个元素添加css这个方法
        $('ul li').css('color', 'red');
    </script>
</body>

1.4 jQuery 筛选选择器

语法	用法	描述
`:first`	`$('li:first')`	获取第一个 `li` 元素
`:last`	`$('li:last')`	获取最后一个 `li` 元素
`:eq(index)`	`$('li:eq(2)')`	获取到的 `li` 元素中，选择索引号为 2 的元素，索引号 `index` 从 0 开始。
`:odd`	`$('li:odd')`	获取到的 `li` 元素中，选择索引号为奇数的元素
`:even`	`$('li:even')`	获取到的 `li` 元素中，选择索引号为偶数的元素

<script>
        $('ul li:first').css('color', 'red')
        $('ol li:last').css('color', 'pink')
        $('ul li:odd').css('color', 'green')
        $('ol li:even').css('color', 'yellow')
        $('ul li:eq(2)').css('color', 'blue')
        $('ul li:eq(4)').css('color', 'orange')
    </script>

1.5 jQuery 父子兄筛选方法（重点）

语法	用法	说明
`parent()`	`$('li').parent();`	查找父级
`children(selector)`	`$('ul').children('li')`	相当于 `$('ul>li')`，最近一级(亲儿子)
`find(selector)`	`$('ul').find('li');`	相当于 `$('ul li')`，后代选择器
`siblings(selector)`	`$('.first').siblings('li');`	查找兄弟节点，不包括自己本身
`nextAll([expr])`	`$('.first').nextAll()`	查找当前元素之后所有的同辈元素
`prevtAll([expr])`	`$('.last').prevAll()`	查找当前元素之前所有的同辈元素
`hasClass(class)`	`$('div').hasClass('protected')`	检查当前的元素是否含有某个特定的类，如果有，则返回 `true`
`eq(index)`	`$('li').eq(2);`	相当于 `$('li:eq(2)' )`，index从 `0` 开始
`parents()`	`$('div').parents('.one');`	获取元素所有父级，然后指定其中一个父级

重点记住：parent()、children()、find()、siblings()、eq()

新浪下拉菜单案例 JS 部分用JQ改繁为简（其他的html和css部分在案例里）

<script>
        $(function () {
            // 鼠标经过
            $('.nav>li').mouseover(function () {
                // $(this)  jQuery当前元素 this不要加引号
                // show() 显示元素   hide()隐藏元素
                $(this).children('ul').show();
            })
            // 鼠标离开
            $('.nav>li').mouseout(function () {
                $(this).children('ul').hide();
            })
        })
    </script>

<body>
    <ol>
        <li>我是ol的li</li>
        <li>我是ol的li</li>
        <li class="item">我是ol的li</li>
        <li>我是ol的li</li>
        <li>我是ol的li</li>
        <li>我是ol的li</li>
    </ol>
    <ul>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
    </ul>
    <div class="current">有current</div>
    <div>木有啊</div>
    <script>
        $(function () {
            // 1. 兄弟元素 siblings 除了自身之外的所有亲兄弟
            $('.item').siblings('li').css('color', 'pink');
            // 2. 第n个元素 
            // （1）我们可以利用选择器的方式选择
            $('ul li:eq(2)').css('color', 'green');
            // (2) 我们可以利用选择方法的方式选择 推荐使用
            $('ul li').eq(3).css('color', 'blue');
            // 3. 判断是否有某个类名
            console.log($('div:first').hasClass('current')); //true
            console.log($('div:last').hasClass('current')); //false
        })
    </script>
</body>

1.6 jQuery 里面的排他思想

想要多选一的效果，排他思想：当前元素（$(this)）设置样式，其余的兄弟元素（$(this).siblings()）清除样式。

<script>
        $(function () {
            // 1. 隐式迭代  给所有按钮都绑定了点击事件
            $('button').click(function () {
                // 当前元素变化背景颜色
                $(this).css('background', 'pink')
                // 其他兄弟去掉背景颜色 隐式迭代
                $(this).siblings('button').css('background', '')
            })
        })
    </script>

1.7 jQuery 链式编程

链式编程是为了节省代码量，看起来更优雅。

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function () {
            // 1. 隐式迭代  给所有按钮都绑定了点击事件
            $('button').click(function () {
                // 2. 当前元素变化背景颜色
                // $(this).css('background', 'pink')
                // 3. 其他兄弟去掉背景颜色 隐式迭代
                // $(this).siblings('button').css('background', '');
                // 链式编程  上面第2、3步可以简化为一行代码
                // $(this).css('background', 'pink').siblings().css('background', '');
                // 兄弟变为粉色，本身不变色
                // $(this).siblings().css('background', 'pink')
                // 兄弟的父亲 也就是 body 变色
                $(this).siblings().parent().css('background', 'red');
            })
        })
    </script>
</body>

2. jQuery 样式操作

2.1 操作 CSS 方法

jQuery 可以使用 CSS 方法来修改简单元素样式；也可以操作类，修改多个样式。

参数只写属性名，则是返回属性值。

$(this).css('color');

参数是 属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号。

$(this).css('color', 'red');

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。

$(this).css({ 'color':'white','font-size':'20px'});

<body>
    <div></div>
    <script>
        $(function () {
            console.log($('div').css('width'));   //200px
            $('div').css('width', '300px');  //属性名要加一定引号 ，200px可加可不加
            // 多个属性  
            // 写法1
            // $('div').css({ 'background': 'red', 'height': '400px' });
            // 写法2   属性名不用加引号，   属性值如果是数字引号和单位可加可不加，不是数字必须加引号
            $('div').css({
                height: '400px',
                width: '400',
                backgroundColor: 'red'
                // 如果是复合属性则必须采取驼峰命名法
            })
        })
    </script>
</body>

2.2 设置类样式方法

作用等同于以前的 classList，可以操作类样式，注意 操作类里面的参数不要加点。

添加类

$('div').addClass('current');

移除类

$('div').removeClass('current');

切换类

$('div').toggleClass('current');

<script src="jQuery.main.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.5s;
        }

        .current {
            background-color: red;
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <div class="current"></div>
    <script>
        $(function () {
            // 1. 添加类  addClass
            // $('div').click(function () {
            // $(this).addClass('current');
            // })
            // 2. 删除类  removeClass
            // $('div').click(function () {
            //     $(this).removeClass('current')
            // })
            // 3. 切换类
            $('div').click(function () {
                $(this).toggleClass('current');
            })
        })
    </script>
</body>

以前的 tab栏切换案例可以用jQuery方法简化：

 <script>
        $(function () {
            $('.tab_list li').click(function () {
                // 获取当前li的索引号
                var index = $(this).index();
                // 点击上面的li，当前li添加current类，其余兄弟移除类
                $(this).addClass('current').siblings().removeClass('current')
                // 让下部相应索引号的item显示，其余隐藏
                // $('.tab_con .item').eq(index).css('display', 'block').siblings().css('display', 'none');;
                // 上面这句可以更简洁
                $('.tab_con .item').eq(index).show().siblings().hide();
            })
        })

    </script>

2.3 类操作与 className 区别

原生 JS 中 className 会覆盖元素原先里面的类名。
jQuery 里面类操作 只是对指定类进行操作，不影响原先的类名。

3. jQuery 效果

3.1 显示/隐藏效果

3.1.1 显示语法

显示语法规范

show([speed, [easing], [fn]])

显示参数

参数都可以省略，无动画直接显示。
speed：三种预定速度之一的字符串（'slow', 'normal', or 'fast'）或表示动画时长的毫秒数值(如：1000)。
easing：(Optional) 用来指定切换效果，默认是 'swing'，可用参数 'linear'。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.1.2 隐藏语法

隐藏语法规范

hide([speed, [easing], [fn]])

隐藏参数

参数都可以省略，无动画直接显示。
speed：三种预定速度之一的字符串（'slow', 'normal', or 'fast'）或表示动画时长的毫秒数值(如：1000)。
easing：(Optional) 用来指定切换效果，默认是 'swing'，可用参数 'linear'。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.1.3 切换语法

切换语法规范

toggle([speed, [easing], [fn]])

切换参数

参数都可以省略，无动画直接显示。
speed：三种预定速度之一的字符串（'slow', 'normal', or 'fast'）或表示动画时长的毫秒数值(如：1000)。
easing：(Optional) 用来指定切换效果，默认是 'swing'，可用参数 'linear'。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

Tip：toggle 是切换， toggleClass 是切换类

<script src="jQuery.main.js"></script>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }

        /* .current {
            background-color: red;
        } */
    </style>
</head>

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function () {
            $('button').eq(0).click(function () {
                $('div').show(1000, function () {
                    alert(0)
                })
            })
            $('button').eq(1).click(function () {
                $('div').hide(1000, function () {
                    alert(1)
                })
            })
            $('button').eq(2).click(function () {
                // $('div').toggleClass('current')
                $('div').toggle(1000)
            })
            // 一般情况下，我们都不加参数直接显示隐藏就可以了
        })
    </script>
</body>

3.2 滑动效果

3.2.1 下滑效果语法

下滑效果语法规范

slideDown([speed,[easing],[fn]])

下滑效果参数

参数都可以省略，无动画直接显示。
speed：三种预定速度之一的字符串（'slow', 'normal', or 'fast'）或表示动画时长的毫秒数值(如：1000)。
easing：(Optional) 用来指定切换效果，默认是 'swing'，可用参数 'linear'。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.2.2 上滑效果语法

上滑效果语法规范

slideUp([speed,[easing],[fn]])

上滑效果参数

参数都可以省略，无动画直接显示。
speed：三种预定速度之一的字符串（'slow', 'normal', or 'fast'）或表示动画时长的毫秒数值(如：1000)。
easing：(Optional) 用来指定切换效果，默认是 'swing'，可用参数 'linear'。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.2.3 滑动切换效果语法

下滑效果语法规范

slideToggle([speed,[easing],[fn]])

下滑效果参数

参数都可以省略，无动画直接显示。
speed：三种预定速度之一的字符串（'slow', 'normal', or 'fast'）或表示动画时长的毫秒数值(如：1000)。
easing：(Optional) 用来指定切换效果，默认是 'swing'，可用参数 'linear'。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.3 事件切换

hover([over,] out)

参数说明：

over：鼠标移到元素上要触发的函数（相当于 mouseenter）
out：鼠标移出元素要触发的函数（相当于 mouseleave）
如果只写一个函数，则鼠标经过和离开都会触发它

举例： tab栏切换案例 js部分

<script>
        $(function () {
            // 1.上面的效果可以利用 事件切换 来实现
            // $('.nav>li').hover(function () {
            //     $(this).children('ul').slideDown(200)
            // }, function () {
            //     $(this).children('ul').slideUp(200)
            // })
            // 2. 事件切换 hovor  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $('.nav>li').hover(function () {
               // stop必须写到动画的前面
                $(this).children('ul').stop().slideToggle(200)
            })
        })
    </script>

3.4 动画队列及其停止排队方法

3.4.1 动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

3.4.2 停止排队

stop()

stop() 方法用于停止动画或效果。
注意：stop() 写到动画或者效果的 前面，相当于停止结束上一次的动画。

3.5 淡入淡出效果

3.5.1 淡入效果

淡入效果语法规范

fadeIn([speed,[easing],[fn]])

淡入效果参数

参数都可以省略。
speed：三种预定速度之一的字符串('slow','normal', or 'fast')或表示动画时长的毫秒数值(如：1000)。
easing：（Optional）用来指定切换效果，默认是 'swing'，可用参数 'linear'。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.5.2 淡出效果

淡出效果语法规范

fadeOut([speed,[easing],[fn]])

淡出效果参数

参数都可以省略。
speed：三种预定速度之一的字符串('slow','normal', or 'fast')或表示动画时长的毫秒数值(如：1000)。
easing：（Optional）用来指定切换效果，默认是 'swing'，可用参数 'linear'。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.5.3 淡入淡出切换效果

淡入淡出切换效果语法规范

fadeToggle([speed,[easing],[fn]])

淡入淡出切换效果参数

参数都可以省略。
speed：三种预定速度之一的字符串('slow','normal', or 'fast')或表示动画时长的毫秒数值(如：1000)。
easing：（Optional）用来指定切换效果，默认是 'swing'，可用参数 'linear'。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.5.4 渐进方式调整到指定的不透明度

语法

fadeTo([[speed],opacity,[easing],[fn]])

参数

opacity：透明度必须写，取值 0~1 之间。
speed：三种预定速度之一的字符串（'slow','normal', or 'fast'）或表示动画时长的毫秒数值(如：1000)，必须。
easing：（Optional）用来指定切换效果，默认是 'swing'，可用参数 'linear'。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

案例：图片高亮突出显示

<script>
        $(function () {
            // 法1
            // $('.wrap li').mouseenter(function () {
            //     $(this).stop().fadeTo(400, 1)
            //     $(this).siblings().stop().fadeTo(400, 0.5)
            // })
            // $('.wrap').mouseleave(function () {
            //     $('.wrap li').stop().fadeTo(400, 1)
            // })

            // 法2
            //鼠标进入的时候,其他的li标签透明度：0.5
            $('.wrap li').hover(function () {
                $(this).siblings().stop().fadeTo(400, 0.5)
            }, function () {
                // 鼠标离开，其他li 透明度改为 1
                $(this).siblings().stop().fadeTo(400, 1)
            })

        })
    </script>

3.6 自定义动画 animate

3.6.1 语法

animate(params,[speed],[easing],[fn])

3.6.2 参数

params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
speed：三种预定速度之一的字符串（'slow','normal', or 'fast'）或表示动画时长的毫秒数值（如：1000）
easing：（Optional）用来指定切换效果，默认是 'swing'，可用参数 'linear'。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

<script src="jquery.min.js"></script>
    <style>
        div {
            /* 必须有定位下面的jq才能执行 */
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function () {
            $('button').click(function () {
                // animate 必须以对象写法
                $('div').animate({
                    left: 300,
                    top: 500,
                    width: 500,
                    opacity: 0.3
                }, 500)
            })
        })
    </script>
</body>