分享欲是我赤裸裸的告白

前言

  看到这里了，说明博主的前两篇文章给你带来了帮助，不知看完上篇文章有没有自己练习一遍，只有多动手才能更快的提升自己喔。猜猜今天给大家分享什么知识。😎

一、jQuery 基本操作

先简单认识一下

  • jQuery 设置样式

    $('div').css('属性', '值')

  • jQuery 里面的排他思想

    分析：

    1. 若想要多选一的效果，排他思想
    2. 先当前元素设置样式，其余的兄弟元素清除样式 
    // 当前元素设置样式
$(this).css('color', 'red')
// 其他的兄弟清除样式
$(this).siblings().css('color', '')

  • 隐式迭代

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

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

    // 页面中所有的 div 元素全部隐藏，不用循环操作
$('div').hide()

  • 链式编程

    // 当前元素设置样式，其他的兄弟清除样式
$(this).css('color', 'red').siblings().css('color', '')

深入的认识一下

1.1 jQuery 样式操作

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

1.1.1 操作 css 方法

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

  • 常见以下三种样式

    • 参数若只写属性名，则返回属性值

      $(this).css('color')

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

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

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

      $(this).css({
       color: 'blue', fontSize: '20px'})

注意：css() 方法多用于样式少的时候操作，多了反而不太方便。

1.1.2 设置类样式方法

  可以操作类样式，注意操作类里面的参数不要加点。

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

    • 添加类

      $('div').addClass('active')

    • 删除类

      $('div').removeClass('active')

    • 切换类

      $('div').toggleClass('active')

  • 注意

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

1.2 jQuery 效果

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

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

注意：

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

1.2.1 显示隐藏

  • 显示语法规范

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

  • 显示参数

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

  • 隐藏语法规范

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

  • 隐藏参数与显示参数的说明一致。

  • 切换语法规范

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

  • 切换参数与显示参数的说明一致。

代码示例

<body>
    <button class="hide">隐藏</button>
    <button class="show">显示</button>
    <button class="toggle">切换</button>
    <div class="box"></div>

    <script src="./jQuery.js"></script>

    <script>
        // 点击按钮
        $('.hide').click(function () {
   
            // 盒子隐藏
            $('.box').hide()
        })

        // 点击按钮
        $('.show').click(function () {
   
            // 盒子显示
            $('.box').show()
        })

        // 点击按钮
        $('.toggle').click(function () {
   
            // 切换显示隐藏
            $('.box').toggle()
        })
    </script>
</body>

效果如下

1.2.2 滑入滑出

  • 下滑效果语法规范

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

  • 上滑效果语法规范

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

  • 滑动切换效果语法规范

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

  • 参数与显示隐藏的参数说明一致。

代码示例

<body>
    <button class="slideDown">下拉滑动</button>
    <button class="slideUp">上拉滑动</button>
    <button class="slideToggle">切换滑动</button>
    <div class="box"></div>

    <script src="./jQuery.js"></script>

    <script>
        // 点击按钮
        $('.slideDown').click(function () {
   
            // 下滑动
            $('.box').slideDown()
        })

        // 点击按钮
        $('.slideUp').click(function () {
   
            // 上滑动
            $('.box').slideUp()
        })

        // 点击按钮
        $('.slideToggle').click(function () {
   
            // 滑动切换
            $('.box').slideToggle()
        })
    </script>
</body>

效果如下

1.2.3 淡入淡出

  • 淡入效果语法规范

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

  • 淡出效果语法规范

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

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

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

  • 参数与显示隐藏的参数说明一致。

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

    • 语法规范

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

    • 效果参数

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

代码示例

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div class="box"></div>

    <script src="./jQuery.js"></script>

    <script>
        // 点击按钮
        $('button').click(function () {
   
            // 淡入
            $('.box').fadeIn(1000)
        })

        // 点击按钮
        $('button').click(function () {
   
            // 淡出
            $('.box').fadeOut(1000)
        })

        // 点击按钮
        $('button').click(function () {
   
            // 淡入淡出切换
            $('.box').fadeToggle()
        })

        // 点击按钮
        $('button').click(function () {
   
            // 修改透明度
            $('.box').fadeTo(1000, 0.5)
        })
    </script>
</body>

效果如下

1.2.4 自定义效果

  自定义动画非常强大，通过参数的传递可以模拟以上所有动画。

  • 语法规范

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

  • 参数

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

代码示例

<body>
    <button>自定义动画</button>
    <div class="box"></div>

    <script src="./jQuery.js"></script>

    <script>
        // 点击按钮
        $('button').click(function () {
   
            // 自定义动画
            $('.box').animate({
   
                width: '300px'
            }, 1000)
        })
    </script>
</body>

效果如下

1.2.5 停止动画排队

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

  停止动画排队的方法为：stop()

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

代码示例

<body>
    <button id="start">自定义动画</button>
    <button id="stop">停止动画</button>
    <div class="box"></div>

    <script src="./jQuery.js"></script>

    <script>
        $(document).ready(function () {
   
            // 点击按钮
            $('#start').click(function () {
   
                // 自定义动画
                $('.box').animate({
   
                    width: '300px'
                }, 1000)
                // 自定义动画
                $('.box').animate({
   
                    width: '200px'
                }, 1000)
            })

            // 停止动画
            $('#stop').click(function () {
   
                $('.box').stop()
            })
            
        })
    </script>
</body>

效果如下

1.2.6 事件切换

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

  • 语法规范

    // over 和 ount 为两个函数
hover([over,]out)

  • over：鼠标移到元素上要触发的函数。

  • out：鼠标移出元素要触发的函数。

  • 若只写了一个函数，则鼠标经过和离开都会触发它。

代码示例

<body>
    <div class="box"></div>

    <script src="./jQuery.js"></script>

    <script>
        // 鼠标经过
        $('.box').hover(function () {
   
            $(this).css('background-color', 'red')
            // 鼠标离开
        }, function () {
   
            $(this).css('background-color', 'blue')
        })
    </script>
</body>

效果如下

ps：毅力是永久的享受