三、jQuery常用的API：jQuery 样式操作、jQuery 效果

本文链接：https://blog.youkuaiyun.com/qq_45645902/article/details/105961812

jQuery 样式操作

jQuery中常用的样式操作有两种：css() 和设置类样式方法

1、操作 css 方法

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

常用以下三种形式：

参数只写属性名，则是返回属性值
$(this).css('属性名')

  var strColor = $(this).css('color');

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

  $(this).css(''color'', ''red'');
  
  $("div").css("width", 300);

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

  $(this).css({ "color":"white","font-size":"20px"});
  
  $("div").css({
      width: 400,
      height: 400,
      // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
      backgroundColor: "red"
   })

css() 多用于样式少时操作，多了则不太方便。

案例：图片突出显示

2、设置类样式方法

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

常用的三种设置类样式方法：

添加类

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

删除类

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

切换类

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

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.5s;
        }

        .current {
            background-color: red;
            transform: rotate(360deg);
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

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

</html>

注释

设置类样式方法比较适合样式多时操作，可以弥补 css() 的不足。
原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all .3s;
        }

        .two {
            transform: rotate(720deg);
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="one two"></div>
    <script>
        var one = document.querySelector(".one");
        one.className = "two";  // 覆盖元素原先里面的类名 class="two"
        $(".one").addClass("two"); // addClass相当于追加类名,不影响以前的类名 class="one two"
        $(".one").removeClass("two"); // class="one"
    </script>
</body>

</html>

案例：tab 栏切换

jQuery 效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

显示隐藏：show() / hide() / toggle()
滑入滑出：slideDown() / slideUp() / slideToggle()
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo()
自定义动画：animate()

注释

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
jQuery为我们提供另一个方法，可以停止动画排队：stop()

1、显示隐藏：show() / hide() / toggle()

显示隐藏动画，常见有三个方法：show() / hide() / toggle()

语法

  show([speed, [easing], [fn]])  // 显示
  hide([speed, [easing], [fn]])  // 隐藏
  toggle([speed, [easing], [fn]])  // 切换

注释

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

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: red;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

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

</html>

在这里插入图片描述

2、滑入滑出

滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle()

语法

  slideDown([speed, [easing], [fn]])  // 下滑
  slideUp([speed, [easing], [fn]])  // 上滑
  slideToggle([speed, [easing], [fn]])  // 切换滑动

注释

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

示例

    <script>
        $(function () {
            $("button").eq(0).click(function () {
                // 下滑动 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function () {
                // 上滑动 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function () {
                // 滑动切换 slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>

在这里插入图片描述

案例：仿新浪下拉菜单

其他代码参考：https://blog.youkuaiyun.com/qq_45645902/article/details/105984458

    // 此代码有问题，下面会介绍解决方法
    <script>
        $(function () {
            // 鼠标经过
            $(".nav>li").mouseover(function () {
                // show() 显示元素  hide() 隐藏元素
                $(this).children("ul").slideDown(200);
            });
            // 鼠标离开
            $(".nav>li").mouseout(function () {
                $(this).children("ul").slideUp(200);
            })
        })
    </script>

3、事件切换

jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover

  hover([over,] out)

注释

over：鼠标移到元素上要触发函数(相当于 mouseenter)
out：鼠标移出元素要触发函数(相当于 mouseleave)
只写一个函数，鼠标经过和离开都会触发

案例：仿新浪下拉菜单

其他代码参考：https://blog.youkuaiyun.com/qq_45645902/article/details/105984458

    // 此代码有问题，下面会介绍解决方法
    <script>
        $(function () {
            // 事件切换 hover 鼠标经过和离开的复合写法
            $('.nav>li').hover(function () {
                $(this).children("ul").slideDown(200);
            }, function () {
                $(this).children("ul").slideUp(200);
            })
            // 事件切换 hover 只写一个函数，鼠标经过和离开都会触发
            $('.nav>li').hover(function () {
                $(this).children("ul").slideToggle(200);
            })
            // 以上两种方法等价，使用一个要注释另一个
        })
    </script>

在这里插入图片描述

4、动画队列及其停止动画排队方法

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

停止动画排队

  stop()

注释

stop() 方法用于停止动画或效果。
stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。
每次使用动画之前，先调用 stop()，再调用动画。

案例：仿新浪下拉菜单

其他代码参考：https://blog.youkuaiyun.com/qq_45645902/article/details/105984458

    // 问题已解决
    <script>
        $(function () {
            // 鼠标经过
            $(".nav>li").mouseover(function () {
                // show() 显示元素  hide() 隐藏元素
                $(this).children("ul").stop().slideDown(200);
            });
            // 鼠标离开
            $(".nav>li").mouseout(function () {
                $(this).children("ul").stop().slideUp(200);
            })

            // 事件切换 hover 鼠标经过和离开的复合写法
            $('.nav>li').hover(function () {
                $(this).children("ul").stop().slideDown(200);
            }, function () {
                $(this).children("ul").stop().slideUp(200);
            })
            // 事件切换 hover 只写一个函数，鼠标经过和离开都会触发
            $('.nav>li').hover(function () {
                $(this).children("ul").stop().slideToggle(200);
            })
        })
    </script>

5、淡入淡出

淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo()

语法

  fadeIn([speed, [easing], [fn]])  // 淡入
  fadeOut([speed, [easing], [fn]])  // 淡出
  fadeToggle([speed, [easing], [fn]])  // 淡入淡出切换
  fadeTo([[speed], opacity, [easing], [fn]])  // 渐进方式调整到指定的不透明度

注释

除了fadeTo()的参数opacity不可以省略，其余的参数都可以省略，无动画直接显示
speed：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(例如：1000)。
easing：(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"。
fn：回调函数，在动画完成时执行的函数，每个函数执行一次。
opacity：透明度，必须，取值0~1

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: red;
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function () {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function () {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);
            });
            $("button").eq(3).click(function () {
                // 修改透明度 fadeTo() 速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>
</body>

</html>

案例：图片突出显示

6、自定义动画

自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate()

语法

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

注释

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

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function () {
            $("button").click(function () {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

</html>