pytest單元測試框架--skip和skipif的學習（八）

阿新 • • 發佈：2020-12-16

jQuery

一、jQuery概述

1.1、JavaScript庫

倉庫：可以把很多東西放到這個倉庫裡面，找東西只需要到倉庫裡面查詢到就可以了

JavaScript庫：即library,是一個封裝好的特定的集合（方法和函式）。從封裝一大堆函式的角色理解庫，就是在這個庫中，封裝了很多預先定義好的函式在裡面，比如動畫animate、hide、show，比如獲取元素等。

簡單理解：就是一個JS檔案，裡面對我們原生js程式碼進行了封裝，存放到裡面，這樣我們可以快速高速的使用這些封裝好的功能了。

比如jQuery，就是為了快速方便的操作DOM，裡面基本都是函式（方法）。

常見的JavaScript庫

(1)jQuery

(2)Prototype

(3)YUI

(4)Dojo

(5)Ext JS

(6)移動端的zepto

這些庫都是對原生JavaScript的封裝，內部都是用JavaScript實現的，我們主要學習的是jQuery。

1.2、jQuery的概念

jQuery是一個快速、簡潔的JavaScript庫，其設計的宗旨是“write Less,Do More”，即倡導寫更少的程式碼，做更多的事情。

j就是JavaScript;Query查詢；意思就是查詢js,把js中的DOM操作做了封裝，我們可以快速的查詢使用裡面的功能。

jQuery封裝了JavaScript常用的功能程式碼

，優化了DOM操作、事件處理、動畫設計和Ajax互動。

學習jQuery本質：就是學習呼叫這些函式（方法）。

jQuery出現的目的是加快前端人員的開發速度，我們可以非常方便的呼叫和使用它，從而提高開發效率。

1.3、jQuery的優點

（1）輕量級。核心檔案才幾十kb，不會影響頁面載入速度

（2）跨瀏覽器相容，基本相容了現在主流的瀏覽器

（3）鏈式程式設計、隱式迭代

（4）對事件、樣式、動畫支援，大大簡化了DOM操作

（5）支援外掛擴充套件開發。有著豐富的第三方的外掛，例如：樹形選單、日期控制元件、輪播圖等

（6）免費、開源

二、jQuery的基本使用

2.1、jQuery的下載

官網地址：https://jquery.com/

版本：

（1）1x：相容IE 678等低版本瀏覽器，官網不在更新

（1）2x：不相容IE 678等低版本瀏覽器，官網不在更新

（1）3x：相容IE 678等低版本瀏覽器，是官方主要更新維護的版本

各個版本的下載：https://code.jquery.com/

2.3、jQuery的入口函式

$(function () {
  ... // 此處是頁面DOM載入完成的入口
  });

$(document).ready(function () {
    ... // 此處是頁面DOM載入完成的入口
})

1.等著DOM結構渲染完畢即可執行內部程式碼，不必等到所有外部資源載入完成，jQuery幫我們完成了封裝。

2.相當於原生js中的DOMContentLoaded.

3.不同於原生js中的load事件是頁面文件、外部的js檔案、css檔案、圖片載入完畢才執行內部程式碼。

4.更推薦使用第一種方式。

<!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>jQuery的基本使用</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <script>
        // $('div').hide();
        // 1.等著頁面DOM載入完畢再去執行js程式碼
        // 複雜寫法
        // $(document).ready(function () {
        //     $('div').hide();
        // })
        // 簡單寫法
        $(function () {
            $('div').hide();
        })
    </script>
    <div></div>
</body>
</html>

2.4、jQuery的頂級物件$

1.$是jQuery的別稱，在程式碼中可以使用jQuery代替$,但一般為了方便，通常都直接使用$。

2.$是jQuery的頂級物件，相當於原生JavaScript中的window，把元素利用$包裝成jQuery物件，就可以呼叫jQuery的方法。

<!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>jQuery頂級物件</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <script>
        // 1.$是jQuery的別稱(另外的名字)
        // $(function () {
        //     alert(11);
        // });
        jQuery(function () {
            alert(11);
            // $('div').hide();
            // jQuery('div').hide();
        });
        // 2.$同時也是jQuery的頂級物件
    </script>
    <div></div>
</body>
</html>

2.5、jQuery物件和DOM物件

DOM物件與jQuery物件之間是可以相互轉換的。

因為原生js比jQuery更大，原生的一些屬性和方法jQuery沒有給我們封裝，要想使用這些屬性和方法需要把jQuery物件轉換為DOM物件才能使用。

1.DOM物件轉換為jQuery物件：$(DOM物件)

$('div')

2.jQuery物件轉換為DOM物件（兩種方式）

$('div')[index] 	index是索引號

$('div').get(index)		index是索引號

三、jQuery常用API

3.1、jQuery基礎選擇器

原生JS獲取元素方式很多，很雜，而且相容性情況不一致，因此jQuery給我們做了封裝，使獲取元素統一標準。

$("選擇器")	// 裡面選擇器直接寫css選擇器即可，但是要加引號

3.2、jQuery層級選擇器

<!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>jQuery基本和層級選擇器</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div>我是div</div>
    <div class="nav">我是nav</div>
    <p>我是p</p>
    <ol>
        <li>我是ol的</li>
        <li>我是ol的</li>
        <li>我是ol的</li>
        <li>我是ol的</li>
    </ol>
    <ul>
        <li>我是ul的</li>
        <li>我是ul的</li>
        <li>我是ul的</li>
        <li>我是ul的</li>
    </ul>
    <script>
        $(function () {
            console.log($(".nav"));
            console.log($("ul li"));
        })
    </script>
</body>
</html>

四、jQuery選擇器

4.1、jQuery設定樣式

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

4.2、隱式迭代（重要）

遍歷內部DOM元素（偽陣列形式儲存）的過程就叫做隱式迭代。

簡單理解：給匹配到的所有元素進行迴圈遍歷，執行相應的方法，而不用我們在進行迴圈，簡化我們的操作，方便我們呼叫。

<!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>jQuery隱式迭代</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div>驚喜不，意外不</div>
    <div>驚喜不，意外不</div>
    <div>驚喜不，意外不</div>
    <div>驚喜不，意外不</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        // 1.獲取四個div元素
        console.log("div");
        // 2.給四個div設定背景顏色為粉色，jquery物件不能使用style
        $('div').css("background","pink");
        // 3.隱式迭代就是把匹配的所有元素內部進行遍歷迴圈，給每個元素新增css這個方法
        $("ul li").css("color","red");
    </script>
</body>
</html>

4.3、jQuery篩選選擇器

<!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>jQuery篩選選擇器</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <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 () {
            $("ul li:first").css("color","red");
            $("ul li:eq(2)").css("color","blue");
            $("ol li:odd").css("color","skyblue");
            $("ol li:even").css("color","pink");
        })
    </script>
</body>
</html>

4.4、jQuery篩選方法(重點)

重點記住：parent()、children()、find()、siblings()、eq()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=q">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery篩選方法(上)</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="grandpa">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
    <div class="nav">
        <p>我是第一個p</p>
        <div>
            <p>我是第二個p</p>
        </div>
    </div>
    <script>
        // 注意一下，都是方法，帶括號
        $(function () {
            // 查詢父級，返回的是最近一級的父級元素
            console.log($(".son").parent());
            // 查詢子級，返回的是最近一級的子級元素，利用children(),類似於子代選擇器ul>li
            $('.nav').children('p').css("color","blue");
            // 可以選擇裡面的所有孩子，包括兒子和孫子，find（）類似於後代選擇器
            $('.nav').find('p').css("color","red");
        })
    </script>
</body>
</html>

<!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>jQuery篩選方法（下）</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <ol>
        <li>你好</li>
        <li>你好</li>
        <li class="item">你好</li>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
    </ol>
    <ul>
        <li>哆啦A夢</li>
        <li>哆啦A夢</li>
        <li>哆啦A夢</li>
        <li>哆啦A夢</li>
        <li>哆啦A夢</li>
        <li>哆啦A夢</li>
    </ul>
    <div class="current">有current</div>
    <div>沒有current</div>
    <script>
        // 注意一下都是方法，帶括號
        $(function () {
            // 1.兄弟元素siblings 選擇除了自身以外的所有親兄弟
            $("ol .item").siblings("li").css("color","red");
            // 2.第n個元素
            var index = 2;
            // (1)利用選擇器的方式選擇
            // $("ul li:eq(2)").css("color","blue");
            // $("ul li:eq(" + index + ")").css("color","blue");
            // (2)利用選擇方法的方式選擇，更推薦這種寫法
            $("ul li").eq(index).css("color","red");
            // 3.判斷是否有某個類名
            console.log($("div:first").hasClass("current"));
            console.log($("div:last").hasClass("current"));
        })
    </script>
</body>
</html>

五、jQuery樣式操作

5.1、操作css方法

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

1、引數只寫屬性名，則是返回屬性值

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

2、引數是屬性名、屬性值、逗號分隔，是設定一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號。

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

3、引數可以是物件形式，方便設定多組樣式。屬性名和屬性值用冒號隔開，屬性可以不用加引號

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

<!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>jQuery操作樣式之css方法</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        $(function () {
            // 1.引數只寫屬性名，返回的是屬性名
            console.log($("div").css("width")); //200px
            // 2.將width的屬性值改為300px
            // $("div").css("width","300px");
            // $("div").css("width",300);
            // 屬性名一定要加引號
            // $("div").css(height,"300px");
            $("div").css({
                width: 400,
                height: 400,
                backgroundColor: "red"
                // 如果是複合屬性則必須採取駝峰命名法，如果值不是數字，則需要加引號
            })
        })
    </script>
</body>
</html>

5.2、設定類樣式方法

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

1.新增類

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

2.移除類

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

3.切換類

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

<!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>jQuery操作樣式之類操作</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.5s;
        }
        .current{
            background-color: red;
            transform: rotate(360deg);
        }
    </style>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div ></div>
    <script>
        $(function () {
            // 1.新增類 addClass()
            // $("div").click(function () {
            //     $(this).addClass("current");
            // })
            // 2.刪除類 removeClass()
            // $("div").click(function () {
            //     $(this).removeClass("current");
            // })
            // 3.切換類 toggleClass()
            $("div").click(function () {
                $(this).toggleClass("current");
            })
        })
    </script>
</body>
</html>

5.3、類操作與className區別

原生JS中className會覆蓋元素原先裡面的類名。

jQuery裡面類操作只是對指定類進行操作，不影響原先的類名。

<!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>jQuery類操作不形象原先類</title>
    <style>
        .one{
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all 0.5s;
        }
        .two{
            transform: rotate(720deg);
        }
    </style>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="one"></div>
    <script>
        // 原生js中className會覆蓋元素原先裡面的類名
        // var one = document.querySelector('.one');
        // one.className('two');
        // 這個addClass相當於追加類名，不影響以前的類名
        $(".one").addClass("two");
        // $(".one").removeClass("two");
    </script>
</body>
</html>

六、jQuery效果

jQuery給我們封裝了很多了很多動畫效果，最為常見的如下：

6.1、顯示效果

1、顯示語法規範

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

2、顯示引數

（1）引數都可以省略，無動畫直接顯示

（2）speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值（如：1000）。

（3）easing:(Optional)用來指定切換效果，預設是"swing",可用引數"linear"。

（4）fn:回撥函式，在動畫完成時執行的函式，每個元素執行一次。

6.2、隱藏效果

1、隱藏語法規範

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

2、隱藏引數

（1）引數都可以省略，無動畫直接顯示

（2）speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值（如：1000）。

（3）easing:(Optional)用來指定切換效果，預設是"swing",可用引數"linear"。

（4）fn:回撥函式，在動畫完成時執行的函式，每個元素執行一次。

6.3、切換效果

1、切換語法規範

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

2、切換引數

（1）引數都可以省略，無動畫直接顯示

（2）speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值（如：1000）。

（3）easing:(Optional)用來指定切換效果，預設是"swing",可用引數"linear"。

（4）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>jQuery效果之顯示與隱藏</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</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,function () {
                    alert(1);
                });
            })
        })
    </script>
</body>
</html>

6.4、下滑效果

1、下滑效果語法規範

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

2、下滑效果引數

（1）引數都可以省略，無動畫直接顯示

（2）speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值（如：1000）。

（3）easing:(Optional)用來指定切換效果，預設是"swing",可用引數"linear"。

（4）fn:回撥函式，在動畫完成時執行的函式，每個元素執行一次。

6.5、上滑效果

1、上滑效果語法規範

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

2、上滑效果引數

（1）引數都可以省略，無動畫直接顯示

（2）speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值（如：1000）。

（3）easing:(Optional)用來指定切換效果，預設是"swing",可用引數"linear"。

（4）fn:回撥函式，在動畫完成時執行的函式，每個元素執行一次。

6.6、切換效果

1、切換效果語法規範

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

2、切換效果引數

（1）引數都可以省略，無動畫直接顯示

（2）speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值（如：1000）。

（3）easing:(Optional)用來指定切換效果，預設是"swing",可用引數"linear"。

（4）fn:回撥函式，在動畫完成時執行的函式，每個元素執行一次。

6.7、事件切換

hover([over,]out)

（1）over:滑鼠移到元素上要觸發的函式（相當於mouseenter）

（2）out:滑鼠移出元素要觸發的函式（相當於mouseleave）

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

1、動畫或效果佇列

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

2、停止排隊

stop()

（1）stop()方法用於停止動畫或效果。

（2）注意：stop()寫到動畫或者效果的前面，相當於停止結束上一次的動畫。

<!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>新浪下拉選單</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .nav{
            margin: 100px; 
        }
        .nav>li{
            float: left;
            height: 30px;
            width: 120px;
            /* margin: 0 auto; */
            margin-right: 10px;
            text-align: center;
            line-height: 30px;
            background-color: pink;
        }
        .nav ul{
            display: none;
            border-left:1px solid orange;
            border-right:1px solid orange;
        }
        .nav ul > li{
            border-bottom:1px solid orange;
        }
    </style>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <ul class="nav">
        <li >
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">部落格</a>
            <ul>
                <li>
                    <a href="">部落格評論</a>
                </li>
                <li>
                    <a href="">未讀提醒</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">郵箱</a>
            <ul>
                <li>
                    <a href="">免費郵箱</a>
                </li>
                <li>
                    <a href="">VIP郵箱</a>
                </li>
                <li>
                    <a href="">企業郵箱</a>
                </li>
                <li>
                    <a href="">新浪郵箱客戶端</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function () {
            // $(".nav>li").mouseover(function () {
                    // 滑鼠經過
            //     $(this).children("ul").slideDown(200);
            // });
            // $(".nav>li").mouseout(function () {
                    // 滑鼠離開
            //     $(this).children("ul").slideUp(200);
            // });
            // 1.事件切換  hover就是滑鼠經過和離開的複合寫法
            // $(".nav>li").hover(function () {
            //     $(this).children("ul").slideDown(200);
            // },function () {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2.事件切換  hover如果只寫一個函式，那麼滑鼠經過和滑鼠離開都會觸發這個函式
            $(".nav>li").hover(function () {
                $(this).children("ul").stop().slideToggle();
            })
        })
    </script>
</body>
</html>

6.9、淡入效果

1、淡入效果語法規範

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

2、淡入效果引數

（1）引數都可以省略，無動畫直接顯示

（2）speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值（如：1000）。

（3）easing:(Optional)用來指定切換效果，預設是"swing",可用引數"linear"。

（4）fn:回撥函式，在動畫完成時執行的函式，每個元素執行一次。

6.10、淡出效果

1、淡出效果語法規範

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

2、淡出效果引數

（1）引數都可以省略，無動畫直接顯示

（2）speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值（如：1000）。

（3）easing:(Optional)用來指定切換效果，預設是"swing",可用引數"linear"。

（4）fn:回撥函式，在動畫完成時執行的函式，每個元素執行一次。

6.11、淡入淡出切換效果

1、淡入淡出切換效果語法規範

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

2、淡入淡出切換效果引數

（1）引數都可以省略，無動畫直接顯示

（2）speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值（如：1000）。

（3）easing:(Optional)用來指定切換效果，預設是"swing",可用引數"linear"。

（4）fn:回撥函式，在動畫完成時執行的函式，每個元素執行一次。

6.12、淡入淡出效果

1、淡入淡出效果語法規範

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

2、淡入淡出效果引數

（1）opacity透明度必須寫，取值0~1之間。

（2）speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值（如：1000）。必須寫

（3）easing:(Optional)用來指定切換效果，預設是"swing",可用引數"linear"。

（4）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>jQuery效果之淡入淡出</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</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(2).click(function () {
                    // 修改透明度 fadeTo()
                    $("div").fadeTo(1000,0.5);
                })
            })
        </script>
</body>
</html>

6.13、自定義動畫animate

1、語法

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

2、引數

（1）params:想要更改的樣式屬性，以物件形式傳遞，必須寫，屬性名可以不用帶引號，如果是複合屬性則需要採取駝峰命名法borderLeft。其餘引數都可以省略。

（2）speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值（如：1000）。

（3）easing:(Optional)用來指定切換效果，預設是"swing",可用引數"linear"。

（4）fn:回撥函式，在動畫完成時執行的函式，每個元素執行一次。

七、jQuery屬性操作

7.1、設定或獲取元素固有屬性值prop()

所謂元素固有屬性就是元素本身自帶的屬性，比如元素裡面的href，比如元素裡面的type.

1.獲取屬性語法

prop('屬性')

2.設定屬性語法

prop("屬性","屬性值")

7.2、設定或獲取元素自定義屬性值attr()

使用者自己給元素新增的屬性，我們稱為自定義屬性，比如給div新增index = "1"

1.獲取屬性語法

attr("屬性") // 類似原生getAttribute()

2.設定屬性語法

attr("屬性","屬性值") // 類似原生setAttribute()

改方法也可以獲取H5自定義屬性

7.3、資料快取 data()

data()方法可以在指定的元素上存取資料，並不會修改DOM元素結構，一旦頁面重新整理，之前存放的資料都將被移除。

1.附加資料語法

data("name","value") // 向被選元素附加資料

2.獲取資料語法

data("name") // 向被選元素獲取資料

同時，還可以讀取HTML5自定義屬性data-index,得到的是數字型

<!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>全選反選</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap table{
            width: 200px;
            margin: 100px auto;
            border:1px solid #000;
            border-spacing: 0;
        }
        thead th{
            text-align: center;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
        }
        tbody td{
            text-align: center;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cdAll">
                    </th>
                    <th>商品</th>
                    <th>價錢</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>蘋果</td>
                    <td>3.5元/斤</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>梨</td>
                    <td>2.5元/斤</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>榴蓮</td>
                    <td>35元/斤</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        $(function () {
            // 通過全選判斷單選框狀態，全選框狀態發生改變
            $("#j_cdAll").change(function () {
                // 在控制檯列印全選框狀態
                // console.log($(this).prop("checked"));
                // 將全選框狀態賦值給單選框
                $("#j_tb input").prop("checked",$(this).prop("checked"))
                
            })
            // 通過單選框狀態判斷全選框狀態，單選框全選中，全選框也選中
            $("#j_tb input").change(function () {
                // 如果單選框的長度等於單選框全部長度
                if($("#j_tb input:checked").length === $("#j_tb input").length){
                    // 全選框按鈕就選中
                    $("#j_cdAll").prop("checked",true);
                }else{
                    // 否則全選框按鈕不選中
                    $("#j_cdAll").prop("checked",false);
                }
            })
        })
    </script>
</body>
</html>

八、jQuery內容文字值

主要針對元素的內容還有表單的值操作。

8.1、普通元素內容html() (相當於原生inner HTML)

html()	//獲取元素的內容

html("內容")	//設定元素的內容

8.2、普通元素文字內容text() (相當於原生inner Text)

text()	// 獲取元素的文字內容

text("文字內容")	//設定元素的文字內容

8.3、表單的值val() (相當於原生value)

val()	//獲取元素表單的值

val("內容")	// 設定元素的表單的值

<!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>jQuery內容文字值</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div>
        <span>我是內容</span>
    </div>
    <input type="text" value="請輸入內容"> 
    <script>
        // 獲取設定元素內容 html()
        console.log($("div").html());
        console.log($("div").html("123"));
        // 獲取設定元素文字內容 text()
        console.log($("div").text());
        console.log($("div").text("123"));
        // 獲取設定元素表單的值 val()
        console.log($("input").val());
        console.log($("input").val("456"));
    </script>
</body>
</html>

8.4、parents('選擇器')可以返回指定祖先元素

8.5、通過toFixed(2)保留2位小數

<!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>商品數量加減</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        .form{
            position: relative;
            width: 100px;
            height: 20px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .decrement{
            position: absolute;
            top: 0;
            left: 0px;
            width: 20px;
            text-align: center;
            /* border-right: 1px solid #000; */
        }
        .itxt{
            position: absolute;
            top: 0;
            left: 25px;
            width: 50px;
            text-align: center;
        }
        .increment{
            position: absolute;
            top: 0;
            left: 75px;
            width: 30px;
            text-align: center;
            /* border-left: 1px solid #000; */
        }
    </style>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <!-- 商品單價 -->
    <div class="p-price">￥12.60</div>
    <!-- 商品數量加減 -->
    <div class="form">
        <a href="javascript:;" class="decrement">-</a>
        <input type="text" class="itxt" value="1">
        <a href="javascript:;" class="increment">+</a>
    </div>
    <!-- 商品總價 -->
    <div class="p-sum">￥12.60</div>
    <script>
        $(function () {
            // 增加數量
            $(".increment").click(function () {
                // 獲取商品的數量
                var n = $(this).siblings(".itxt").val();
                // 點選加號商品數量也增加
                n++;
                // 將增加後數量賦值給數量值
                $(this).siblings(".itxt").val(n);
                // 獲取商品的單價
                var p = $(this).parent().siblings(".p-price").html();
                // 將獲取的單價￥12.60剪下為商品價格12.60
                p = p.substr(1);
                console.log(p);
                // 將獲取到的單價和數量相乘賦值給商品總價,並保留兩位小數
                $(this).parent().siblings(".p-sum").html("￥" + (p * n ).toFixed(2));  
                })
            // 減少數量
            $(".decrement").click(function () {
                var n = $(this).siblings(".itxt").val();
                if(n==1){
                    return false;
                }
                n--;
                $(this).siblings(".itxt").val(n);
                var p = $(this).parent().siblings(".p-price").html();
                p = p.substr(1);
                console.log(p);
                $(this).parent().siblings(".p-sum").html("￥" + (p * n ).toFixed(2));  
            })
        	// 使用者直接修改文字框的值
            $(".itxt").change(function () {
                // 先得到使用者輸入文字框的值
                var n = $(this).val();
                // 當前商品的單價
                var p = $(this).parent().siblings(".p-price").html();
                // 將獲取的單價￥12.60剪下為商品價格12.60
                p = p.substr(1);
                // 將獲取到的單價和數量相乘賦值給商品總價,並保留兩位小數
                $(this).parent().siblings(".p-sum").html("￥" + (p * n ).toFixed(2));  
            })
        })
    </script>
</body>
</html>

九、jQuery元素操作

主要是遍歷、建立、新增、刪除元素操作。

9.1、遍歷元素

jQuery隱式迭代是對同一類元素做了同樣的操作，如果想要同一類元素做不同操作，就需要用到遍歷。

語法1：

$("div").each(function(index,domEle) {xxx;})

1.each()方法遍歷匹配的每一個元素，主要用DOM處理，each每一個

2.裡面的回撥函式有2個引數：index是每個元素的索引號，demEle是每個DOM元素物件，不是jquery物件

3.所以要想使用jquery()方法，需要給這個dom元素轉換為jquery物件 $(domEle)

<!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>jQuery遍歷元素</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function () {
            // 針對於同一元素做不同操作，需要用到遍歷元素（類似於for 但相比較for更強大）
            var arr = ["red","pink","blue"];
            var sum = 0;
            // 利用each()方法遍歷元素
            $("div").each(function (i,domEle) {
                // 回撥函式第一個引數一定是索引號，可以自己指定索引號名稱
                console.log(i);
                // 回撥函式第二個引數一定是dom元素物件，也是自己命名
                console.log(domEle);
                // domEle.css("color");dom物件沒有css方法
                $(domEle).css("color",arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            
        })
    </script>
</body>
</html>

執行結果：

語法2：

$.each(object,function (index,element) {xxx; })

1.$.each()方法可用於遍歷任何物件。主要用於資料處理，比如陣列，物件

2.裡面的函式有2個引數：index是每個元素的索引號；element遍歷內容

$.each({
    name:"andy",
    age:18
    },function(i,ele) {
        console.log(i);// 輸出的是 name age屬性名
        console.log(ele);// 輸出的是 name age屬性值

})

9.2、新增元素

1.內部新增

(1)element.append("內容")

把內容放入匹配元素內部最後面，類似原生appendChild。

(2)element.prepend("內容")

把內容放入匹配元素內部最前面

2、外部新增

(1)element.after("內容")	// 把內容放入目標元素後面

(2)element.before("內容")	// 把內容放入目標元素前面

（1）內部新增元素：生成之後，它們是父子關係。

（2）外部新增元素：生成之後，它們是兄弟關係。

9.3、刪除元素

element.remove()	// 刪除匹配的元素（本身）

element.empty()		// 刪除匹配的元素集合中所有的子節點

element.html("")	// 清空匹配的元素內容

<!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>建立新增刪除元素</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
    </ul>
    <div class="test">我是第一個</div>
    <script>
        $(function () {
            // 1.建立元素
            var li = $("<li>2</li>");
            // 2.新增元素

            // (1) 內部新增
            // $("ul").append(li); 內部新增並且放到內容的最後面
            $("ul").prepend(li); // 內部新增並且放到內容的最前面

            // (2) 外部新增
            var div = $("<div>我是後媽生的</div>");
            // $(".test").after(div);
            $(".test").before(div);
            // 3.刪除元素
            $("ul").remove();   // 可以刪除匹配的元素
            $("ul").empty();    // 可以刪除匹配的元素裡面的子節點 孩子
            $("ul").html("");   // 可以刪除匹配的元素裡面的子節點 孩子
        })
    </script>
</body>
</html>

十、jQuery事件

1、jQuery事件註冊

1.1、單個事件註冊

語法：

element.事件(function () {})

$("div").click(function () { 事件處理程式})

其他事件和原生基本一致。

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

2、jQuery事件處理

2.1、事件處理on()繫結事件

on()方法在匹配元素上繫結一個或多個事件的事件處理函式。

語法：

element.on(events,[selector],fn)

1.events:一個或多個用空格分隔的事件型別，如"click"或"keydown"。

2.selector:元素的子元素選擇器。

3.fn:回撥函式即繫結在元素身上的偵聽函式

on()方法優勢1：

可以繫結多個事件，多個處理事件處理程式。

$("div").on({
    mouseover:function(){},
    mouseout:function(){},
    click:function(){}
});

$("div").on("mouseover mouseout",function () {
    $(this).toggleClass("current");
})

<!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>事件處理</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .current{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        $(function () {
            // 1.單個事件註冊
            // $("div").click(function () {
            //     $(this).css("background","red");
            // })
            // $("div").mouseenter(function () {
            //     $(this).css("background","skyblue");
            // })

            // 2.事件處理on
            // $("div").on({
            //     mouseenter : function () {
            //         $(this).css("background","red");
            //     },
            //     click : function () {
            //         $(this).css("background","skyblue");
            //     },
            //     mouseleave : function () {
            //         $(this).css("background","orange");
            //     }
            // });
        	// 3.通過滑鼠經過和滑鼠離開自動切換
            $("div").on("mouseenter mouseleave" , function () {
                $(this).toggleClass("current");
            })
        })
    </script>
</body>
</html>

on()方法優勢2：

可以事件委派操作，事件委派的定義就是，把原來加給子元素身上的事件繫結在父元素身上，就是把事件委派給父元素。

$('ul').on('click','li',function () {
    alert('hello world!');
});

在此之前有bind(),live(),delegate()等方法來處理事件繫結或者事件委派，最新版本的請用on代替他們。

on()方法優勢3：

動態建立的元素，click()沒有辦法繫結事件，on()可以給動態生成的元素繫結事件。

<!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>事件處理</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .current{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div></div>
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <ol></ol>
    <script>
        $(function () {
            // 1.事件處理on
            // (1) on可以繫結1個或者多個事件處理程式
            $("div").on("mouseenter mouseleave" , function () {
                $(this).toggleClass("current");
            });
            // (2) on可以實現事件委託（委派）
            $("ul").on("click","li",function () {
                alert(1);
            });
            // click是繫結在ul身上的，但是觸發的物件是ul裡面的li
            // (3) on可以給未來動態建立的元素繫結事件
            // $("ol li").click(function() {
            //     alert(2);    // 無法做點選事件
            // })
            $("ol").on("click","li",function () {
                alert(2);
            })
            var li = $("<li>我是後來建立的</li>");
            $("ol").append(li);
        })
    </script>
</body>
</html>

2.2、事件處理off()解綁事件

off()方法可以移除通過on()方法新增的事件處理程式。

$("p").off()	// 解綁p元素所有事件處理程式
$("p").off("click")		// 解綁p元素上面的點選事件，後面的off是偵聽函式名
$("ul").off("click","li");	// 解綁事件委託

如果有的事件只想觸發一次，可以使用one()來繫結事件。

!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>事件解綁</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script>
        $(function () {
            $("div").on({
                click:function () {
                    console.log('我被點選了');
                },
                mouseover:function() {
                    console.log('我被滑鼠經過了');
                }
            });
            $("ul").on("click","li",function () {
                alert(1);
            });
            // 1.事件解綁off()
            $("div").off(); //這個是解除了div上的所有事件
            $("div").off("click");  // 這個是解除了div上的點選事件
            $("ul").off("click","li");  // 這個是解綁了ul下所有li的點選事件
            // 2.one() 只能觸發事件一次
            $("p").one("click",function () {
                alert(2);
            });
        })
    </script>
</head>
<body>
    <div></div>
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <p>你好</p>
</body>
</html>

2.3、自動觸發事件trigger()

有些事件希望自動觸發，比如輪播圖自動播放功能跟點選右側按鈕一致，可以利用定時器自動觸發右側按鈕點選事件，不必滑鼠點選觸發。

1.element.click()	// 第一種簡寫形式

2.element.trigger("type")	//第二種自動觸發模式

// 案例：
$("p").on("click",function () {
    alert("hi");
});
$("p").trigger("click");	// 此時自動觸發點選事件，不需要滑鼠點選

3.element.triggerHandler(type)	// 第三種自動觸發模式

<!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>自動觸發事件</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script>
        $(function () {
            $("div").click(function () {
                alert(1);
            });
            // 自動觸發事件
            // 1.元素.事件()
            // $("div").click();   會觸發元素的預設行為
            // 2.元素.trigger("事件")
            $("div").trigger("click");  // 會觸發元素的預設行為
            $("input").trigger("focus");
            // 3.元素.triggerHandler("事件") 就是不會觸發元素的預設行為
            $("div").triggerHandler("click");
            $("input").on("focus",function () {
                $(this).val("你好嗎？");
            });
        })
    </script>
</head>
<body>
    <div></div>
    <input type="text">
</body>
</html>

3、jQuery事件物件

事件被觸發，就會有事件物件的產生。

element.on(events,[selector],function(event) {})

阻止預設行為：event.preventDefault() 或者 return false

阻止冒泡：event.stopPropagation()

<!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>事件物件</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script>
        $(function () {
            $(document).on("click",function () {
                console.log("點選了document");
            })
            $("div").on("click",function () {
                console.log("點選了div");
                event.stopPropagation();
            })
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

十一、jQuery物件拷貝

如果想要把某個物件拷貝（合併）給另外一個物件使用，此時可以使用$.extend()方法。

語法：

$.extend([deep],target,object1,[objectN])

1.deep：如果設為true為深拷貝，預設為false淺拷貝

2.target：要拷貝的目標物件

3.object1:待拷貝到第一個物件的物件

<!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>jQuery物件拷貝</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            var targetObj = {
                id: 2,
                msg: {
                    sex: '男'
                }
            };
            var obj = {
                id: 1,
                name: "andy",
                msg: {
                    age:18
                }
            }
            // $.extend(targetObj,obj);
            // console.log(targetObj);  會覆蓋targetObj,裡面原來的資料
            // // 1.淺拷貝把原來物件裡面的複雜資料型別地址拷貝給目標物件
            // targetObj.msg.age = 20;
            // console.log(targetObj);
            // console.log(obj);    obj裡面的msg()方法中的age也變為20
            // 2.深拷貝把裡面的資料完全複製一份給目標物件，如果裡面有不衝突的屬性，會合並在一起
            $.extend(true,targetObj,obj);
            targetObj.msg.age = 20;
            console.log(targetObj);
            console.log(obj); 
        })
    </script>
</head>
<body>
    
</body>
</html>

十二、多庫共存

問題概述

jQuery使用$作為識別符號，隨著jQuery的流行，其它js庫也會用$作為識別符號，這樣一起作用會引起衝突。

客觀需求

需要一個解決方案，讓jQuery和其他的js庫不存在衝突，可以同時存在，這就叫做多庫共存。

jQuery解決方案：

1.把裡面的$符號統一改為jQuery,比如jQuery("div")

2.jQuery變數規定新的名稱：$.noConflict() var xx = $.noConflict();

<!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>多庫共存</title>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            function $(ele){
                return document.querySelector(ele);
            }
            console.log($("div"));
            // 1.如果$符號衝突，我們就是用jquery
            jQuery.each();
            // 2.讓jquery釋放對$控制權讓使用者自己決定
            var s = jQuery.noConflict();
            console.log(s("span"));
            s.each();
        })
    </script>
</head>
<body>
    <div></div>
    <span></span>
</body>
</html>

執行效果：

十三、jQuery外掛

jQuery功能比較有限，想要更復雜的特效效果，可以藉助於jQuery外掛完成。

注意:這些外掛也是依賴與jQuery來完成的，所以必須要先引入jQuery檔案，因此也稱為jQuery外掛。

jQuery外掛常用的網站：

1.jQuery外掛庫：http://www.jq22.com/

2.jQuery之家：http://www.htmleaf.com/

jQuery外掛使用步驟：

1.引入相關檔案。（jQuery檔案和外掛檔案）

2.複製相關html、css、js(呼叫外掛)

jQuery外掛演示

1、瀑布流

2、圖片懶載入（圖片使用延遲載入在可提高網頁下載速度，他也能幫助減輕服務區負載）

當我們頁面滑動到可視區域，在顯示圖片

我們使用jquery外掛庫EasyLazyload。注意，此時的js引入檔案和js呼叫必須寫到DOM元素（圖片）最後面。

3、全屏滾動（fullpage.js）

gitHub:https://github.com/alcarotrigo/fullPage.js

中文翻譯網站：http://www.dowebok.com/demo/2014/77/

十四、jQuery尺寸、位置

1、jQuery尺寸

（1）以上引數為空，則是獲取相應值，返回的是數字型。

（2）如果引數是數字，則是修改相應值。

（3）引數可以不必寫單位。

<!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>jQuery位置</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 10px;
            border: 1px solid #000;
            margin: 2px;
        }
    </style>
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div></div>
    <script>
        $(function () {
            // 1.width() height() 獲取設定元素 width和height大小
            console.log($("div").width());
            // $("div").width(300);

            // 2.innerWidth() innerHeight() 獲取設定元素width和height + padding 大小
            console.log($("div").innerWidth());

            // 3.outerWidth() outHeight() 獲取設定元素 width和height + padding + border 大小
            console.log($("div").outerWidth());

            // 4.outerWidth(true) outHeight(true) 獲取設定元素 width和height + padding + border + margin 大小
            console.log($("div").outerWidth(true));
        })
    </script>
</body>
</html>