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

- - jQuery 樣式操作
  - - 1、操作 css 方法
    - - 案例：圖檔突出顯示
    - 2、設定類樣式方法
    - - 案例：tab 欄切換
  - jQuery 效果
  - - 1、顯示隐藏：show() / hide() / toggle()
    - 2、滑入滑出
    - - 案例：仿新浪下拉菜單
    - 3、事件切換
    - - 案例：仿新浪下拉菜單
    - 4、動畫隊列及其停止動畫排隊方法
    - - 案例：仿新浪下拉菜單
    - 5、淡入淡出
    - - 案例：圖檔突出顯示
    - 6、自定義動畫
    - - 案例：仿王者榮耀手風琴效果

學習來源： https://www.bilibili.com/video/BV1HJ41147DG

jQuery 樣式操作

jQuery中常用的樣式操作有兩種：css() 和設定類樣式方法

1、操作 css 方法

jQuery 可以使用 css 方法來修改簡單元素樣式；也可以操作類，修改多個樣式。

常用以下三種形式：

參數隻寫屬性名，則是傳回屬性值 $(this).css('屬性名')

參數是屬性名，屬性值，逗号分隔，是設定一組樣式。屬性必須加引号，值如果是數字可以不用跟機關和引号 $(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() 多用于樣式少時操作，多了則不太友善。

案例：圖檔突出顯示

相關連結：https://blog.csdn.net/qq_45645902/article/details/106002262

2、設定類樣式方法

作用等同于以前的 classList，可以操作類樣式，注意操作類裡面的參數不要加點。

常用的三種設定類樣式方法：

添加類

删除類

切換類

示例

<!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 欄切換

相關案例：https://blog.csdn.net/qq_45645902/article/details/105979714

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>

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

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>

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

案例：仿新浪下拉菜單

其他代碼參考：https://blog.csdn.net/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

注釋

over：滑鼠移到元素上要觸發函數(相當于 mouseenter)
out：滑鼠移出元素要觸發函數(相當于 mouseleave)
隻寫一個函數，滑鼠經過和離開都會觸發

案例：仿新浪下拉菜單

其他代碼參考：https://blog.csdn.net/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>

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

4、動畫隊列及其停止動畫排隊方法

動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。

停止動畫排隊

注釋

stop() 方法用于停止動畫或效果。
stop() 寫到動畫或者效果的前面，相當于停止結束上一次的動畫。
每次使用動畫之前，先調用 stop()，再調用動畫。

案例：仿新浪下拉菜單

其他代碼參考：https://blog.csdn.net/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>

案例：圖檔突出顯示

相關連結：https://blog.csdn.net/qq_45645902/article/details/105998539

6、自定義動畫

自定義動畫非常強大，通過參數的傳遞可以模拟以上所有動畫，方法為：

animate()

文法

注釋

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>

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

案例：仿王者榮耀手風琴效果

相關連結：https://blog.csdn.net/qq_45645902/article/details/105984752

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

目錄

jQuery 樣式操作

1、操作 css 方法

案例：圖檔突出顯示

2、設定類樣式方法

案例：tab 欄切換

jQuery 效果

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

2、滑入滑出

案例：仿新浪下拉菜單

3、事件切換

案例：仿新浪下拉菜單

4、動畫隊列及其停止動畫排隊方法

案例：仿新浪下拉菜單

5、淡入淡出

案例：圖檔突出顯示

6、自定義動畫

案例：仿王者榮耀手風琴效果

繼續閱讀

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

jquery_126_demo

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條