前端之jQuery快速入門-有解無憂

一、jQuery

1.1 jQuery介紹

jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫，
jQuery使用戶能夠更方便地處理HTML Document、Events、實作影片效果、方便地進行Ajax互動，能夠極大地簡化JavaScript編程，它的宗旨就是：“Write less, do more.“

1.2 jQuery的優勢

一款輕量級的JS框架，jQuery的核心JS檔案才幾十kb，不會影響頁面加載速度，
豐富的DOM選擇器，jQuery的選擇器用起來很方便，比如要找到某個DOM物件的相鄰元素，JS可能要寫好幾行代碼，而jQuery一行代碼就搞定了，再比如要將一個表格的隔行變色，jQuery也是一行代碼搞定，
鏈式運算式，jQuery的鏈式操作可以把多個操作寫在一行代碼里，更加簡潔，
事件、樣式、影片支持，jQuery還簡化了JS操作css的代碼，并且代碼的可讀性也比js要強，
Ajax操作支持，jQuery簡化了AJAX操作，后端只需回傳一個JSON格式的字串就能完成與前端的通信，
跨瀏覽器兼容，jQuery基本兼容了現在主流的瀏覽器，不用再為瀏覽器的兼容問題而傷透腦筋，
插件擴展開發，jQuery有著豐富的第三方的插件，例如：樹形選單、日期控制元件、圖片切換插件、彈出視窗等等基本前端頁面上的組件都有對應插件，并且用jQuery插件做出來的效果很炫，并且還可以根據自己需要去改寫和封裝插件，簡單實用，

1.3 jQuery的內容

選擇器
篩選器
樣式操作
文本操作
屬性操作
檔案處理
事件
影片效果
插件
each、data、Ajax

下載鏈接：jQuery官網

中文檔案：jQuery AP中文檔案

1.4 jQuery版本

1.x：兼容IE678,使用最為廣泛的，官方只做BUG維護，功能不再新增，因此一般專案來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG維護，功能不再新增，如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的瀏覽器，需要注意的是很多老的jQuery插件不支持3.x版，目前該版本是官方主要更新維護的版本，

維護IE678是一件讓人頭疼的事情，一般我們都會額外加載一個CSS和JS單獨處理，值得慶幸的是使用這些瀏覽器的人也逐步減少，PC端用戶已經逐步被移動端用戶所取代，如果沒有特殊要求的話，一般都會選擇放棄對678的支持，

二、jQuery物件

jQuery物件就是通過jQuery包裝DOM物件后產生的物件，jQuery物件是 jQuery獨有的，如果一個物件是 jQuery物件，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()，

$("#i1").html()的意思是：獲取id值為 i1的元素的html代碼，其中 html()是jQuery里的方法，

相當于： document.getElementById("i1").innerHTML;

雖然 jQuery物件是包裝 DOM物件后產生的，但是 jQuery物件無法使用 DOM物件的任何方法，同理 DOM物件也不能使用 jQuery里的方法，

另外這里有一個約定：我們在宣告jQuery物件變數的時候要在變數名前面加上$：

var $variable = jQuery對像
var variable = DOM物件
$variable[0]  //jQuery物件轉成DOM物件

拿上面那個例子舉例，jQuery物件和DOM物件的使用：

$("#i1").html();  //jQuery物件可以使用jQuery的方法
$("#i1")[0].innerHTML;  // DOM物件使用DOM的方法

三、jQuery基礎語法

語法結構：$(selector).action()

3.1 查找標簽

3.1.1 基本選擇器

id選擇器：
```
$("#id")
```
標簽選擇器：
```
$("tagName")
```
class選擇器：
```
$(".className")
```
所有元素選擇器：
```
$("*")
```

配合使用：

$("div.c1")  // 找到含有c1 class類的div標簽

組合選擇器：
```
$("#id, .className, tagName")
```

3.1.2 層級選擇器

x和y可以為任意選擇器：

$("x y");  // x的所有后代y（子子孫孫）
$("x > y");	 // x的所有兒子y（兒子）
$("x + y");   // 找到所有緊挨在x后面的y
$("x ~ y");  // x之后所有的兄弟y

3.2 基本篩選器

:first  // 第一個
:last  // 最后一個
:eq(index) // 索引等于index的那個元素
:even  // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd  // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)  // 匹配所有大于給定索引值的元素
:lt(index)  // 匹配所有小于給定索引值的元素
:not(元素選擇器)  // 移除所有滿足not條件的標簽
:has(元素選擇器)  // 選取所有包含一個或多個標簽在其內的標簽(指的是從后代元素找)

示例：

$("div:has(h1)")  // 找到所有后代中有h1標簽的div標簽
$("div:has(.c1)")  // 找到所有后代中有c1樣式類的div標簽
$("li:not(.c1)")  // 找到所有不包含c1樣式類的li標簽
$("li:not(:has(a))")  // 找到所有后代中不含a標簽的li標簽

jQuery版自定義模態框：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>自定義模態框</title>
    <style>
        .cover {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: darkgrey;
            z-index: 999;
        }

        .modal {
            width: 600px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 1000;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="https://www.cnblogs.com/JZjuechen/p/彈" id="i0">

<div ></div>
<div >
    <label for="i1">姓名</label>
    <input id="i1" type="text">
    <label for="i2">愛好</label>
    <input id="i2" type="text">
    <input type="button" id="i3" value="https://www.cnblogs.com/JZjuechen/p/關閉">
</div>
<script>
    var tButton = $("#i0")[0];
    tButton.onclick = function () {
        var coverEle = $(".cover")[0];
        var modalEle = $(".modal")[0];

        $(coverEle).removeClass("hide");
        $(modalEle).removeClass("hide");
    };

    var cButton = $("#i3")[0];
    cButton.onclick = function () {
        var coverEle = $(".cover")[0];
        var modalEle = $(".modal")[0];

        $(coverEle).addClass("hide");
        $(modalEle).addClass("hide");
    }
</script>
</body>
</html>

3.3 屬性選擇器

[attribute]
[attribute=value]  // 屬性等于
[attribute!=value]  // 屬性不等于

示例：

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input");  // 取到所有input標簽
$("input[type='checkbox']");  // 取到checkbox型別的input標簽
$("input[type!='text']");  // 取到型別不是text的input標簽

3.4 表單篩選器

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

示例1：

$(":checkbox")  // 找到屬性是checkbox的form表單內的標簽

表單物件屬性：

:enabled
:disabled
:checked
:selected

示例2：

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input標簽

找到被選中的option：

<select id="s1">
  <option value="https://www.cnblogs.com/JZjuechen/p/beijing">北京市</option>
  <option value="https://www.cnblogs.com/JZjuechen/p/shanghai">上海市</option>
  <option selected value="https://www.cnblogs.com/JZjuechen/p/guangzhou">廣州市</option>
  <option value="https://www.cnblogs.com/JZjuechen/p/shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被選中的option

注意：

使用 $(':checked') 時會連同option中的selected一起找到，

3.5 篩選器方法

下一個元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一個元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父親元素：

$("#id").parent()
$("#id").parents()  // 查找當前元素的所有的父輩元素
$("#id").parentsUntil()  // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止，

兒子和兄弟元素：

$("#id").children();  // 兒子們
$("#id").siblings();  // 兄弟們

查找：

搜索所有與指定運算式匹配的元素，這個函式是找出正在處理的元素的后代元素的好方法，
```
$("div").find("p")
```
等價于 $("div p")
篩選：

篩選出與指定運算式匹配的元素集合，這個方法用于縮小匹配的范圍，用逗號分隔多個運算式，
```
$("div").filter(".c1")  // 從結果集中過濾出有c1樣式類的
```
等價于 $("div.c1")

補充：

.first()  // 獲取匹配的第一個元素
.last()  // 獲取匹配的最后一個元素
.not()  // 從匹配元素的集合中洗掉與指定運算式匹配的元素
.has()  // 保留包含特定后代的元素，去掉那些不含有指定后代的元素，
.eq()  // 索引值等于指定值的元素

示例：左側選單欄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>左側選單欄示例</title>
    <style>
        .left {
            position: fixed;
            left: 0;
            top: 0;
            width: 20%;
            height: 100%;
            background-color: rgb(47, 53, 61);
        }
        .right {
            width: 80%;
            height: 100%;
        }
        .menu {
            color: white;
        }
        .title {
            text-align: center;
            padding: 10px 15px;
            border-bottom: 1px solid #23282e;
        }
        .items {
            background-color: #181c20;

        }

        .item {
            padding: 5px 10px;
            border-bottom: 1px solid #23282e;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>

<div >
    <div >
        <div >
            <div >選單一</div>
            <div >
                <div >111</div>
                <div >222</div>
                <div >333</div>
            </div>
        </div>
        <div >
            <div >選單二</div>
            <div >
                <div >444</div>
                <div >555</div>
                <div >666</div>
            </div>
        </div>
        <div >
            <div >選單三</div>
            <div >
                <div >777</div>
                <div >888</div>
                <div >999</div>
            </div>
        </div>
    </div>
</div>
<div ></div>

<script>
    $(".title").click(function () {  // jQuery系結事件
        // 隱藏所有class里有.items的標簽
        // $(".items").addClass("hide");  //批量操作
        // $(this).next().removeClass("hide");

        // jQuery鏈式操作
        $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
    });
</script>

3.6 操作標簽

3.6.1 樣式操作

樣式類：

addClass();  // 添加指定的CSS類名，
removeClass();  // 移除指定的CSS類名，
hasClass();  // 判斷樣式存不存在
toggleClass();  // 切換CSS類名，如果有就移除，如果沒有就添加，

CSS：

css("color","red")  //DOM操作：tag.style.color="red"

示例：

$("p").css("color", "red");  //將所有p標簽的字體設定為紅色

3.6.2 位置操作

offset()  // 獲取匹配元素在當前視窗的相對偏移或設定元素位置
position()  // 獲取匹配元素相對父元素的偏移
scrollTop()  // 獲取匹配元素相對滾動條頂部的偏移
scrollLeft()  // 獲取匹配元素相對滾動條左側的偏移

.offset() 方法允許我們檢索一個元素相對于檔案（document）的當前位置（應用場景：回傳頂部按鈕），

和 .position() 的差別在于： .position() 是相對于相對于父級元素的位移，

3.6.3 尺寸

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

3.6.4 文本操作

HTML代碼：

html()  // 取得第一個匹配元素的html內容
html(val)  // 設定所有匹配元素的html內容

文本值：

text()  // 取得所有匹配元素的內容
text(val)  // 設定所有匹配元素的內容

值：

val()  // 取得第一個匹配元素的當前值
val(val)  // 設定所有匹配元素的值
val([val1, val2])  // 設定多選的checkbox、多選select的值

例如：

<input type="checkbox" value="https://www.cnblogs.com/JZjuechen/p/basketball" name="hobby">籃球
<input type="checkbox" value="https://www.cnblogs.com/JZjuechen/p/football" name="hobby">足球

<select multiple id="s1">
    <option value="https://www.cnblogs.com/JZjuechen/p/1">1</option>
    <option value="https://www.cnblogs.com/JZjuechen/p/2">2</option>
    <option value="https://www.cnblogs.com/JZjuechen/p/3">3</option>
</select>

設定值：

$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])

示例：獲取被選中的checkbox或radio的值：

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="https://www.cnblogs.com/JZjuechen/p/0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="https://www.cnblogs.com/JZjuechen/p/1">

可以使用：

$("input[name='gender']:checked").val()

自定義登錄校驗示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>文本操作之登錄驗證</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>

<form action="">
    <div>
        <label for="input-name">用戶名</label>
        <input type="text" id="input-name" name="name">
        <span ></span>
    </div>
    <div>
        <label for="input-password">密碼</label>
        <input type="password" id="input-password" name="password">
        <span ></span>
    </div>
    <div>
        <input type="button" id="btn" value="https://www.cnblogs.com/JZjuechen/p/提交">
    </div>
</form>

<script>
    $("#btn").click(function () {
        var username = $("#input-name").val();
        var password = $("#input-password").val();

        if (username.length === 0) {
            $("#input-name").siblings(".error").text("用戶名不能為空");
        }
        if (password.length === 0) {
            $("#input-password").siblings(".error").text("密碼不能為空");
        }
    })
</script>
</body>
</html>

3.6.5 屬性操作

用于ID等自定義屬性：

attr(attrName)  // 回傳第一個匹配元素的屬性值
attr(attrName, attrValue)  // 為所有匹配元素設定一個屬性值
attr({k1: v1, k2:v2})  // 為所有匹配元素設定多個屬性值
removeAttr()  // 從每一個匹配的元素中洗掉一個屬性

適用于checkbox和radio：

prop()  // 獲取屬性
removeProp()  // 移除屬性

注意：

在1.x及2.x版本的jQuery中使用attr對checkbox進行賦值操作時會出bug，在3.x版本的jQuery中則沒有這個問題，為了兼容性，我們在處理checkbox和radio的時候盡量使用特定的prop()，不要使用attr("checked", "checked")，

<input type="checkbox" value="https://www.cnblogs.com/JZjuechen/p/1">
<input type="radio" value="https://www.cnblogs.com/JZjuechen/p/2">
<script>
  $(":checkbox[value='https://www.cnblogs.com/JZjuechen/p/1']").prop("checked", true);
  $(":radio[value='https://www.cnblogs.com/JZjuechen/p/2']").prop("checked", true);
</script>

prop和attr的區別：

attr全稱attribute(屬性)

prop全稱property(屬性)

雖然都是屬性，但他們所指的屬性并不相同，attr所指的屬性是HTML標簽屬性，而prop所指的是DOM物件屬性，可以認為attr是顯式的，而prop是隱式的，

舉個例子：

<input type="checkbox" id="i1" value="https://www.cnblogs.com/JZjuechen/p/1">

針對上面的代碼：

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

可以看到attr獲取一個標簽內沒有的東西會得到undefined，而prop獲取的是這個DOM物件的屬性，因此checked為false，

如果換成下面的代碼：

<input type="checkbox" checked id="i1" value="https://www.cnblogs.com/JZjuechen/p/1">

再執行：

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

這已經可以證明attr的局限性，它的作用范圍只限于HTML標簽內的屬性，而prop獲取的是這個DOM物件的屬性，選中回傳true，沒選中回傳flase，

最后再來看一下針對自定義屬性，attr和prop又有什么區別：

<input type="checkbox" checked id="i1" value="https://www.cnblogs.com/JZjuechen/p/1" me="自定義屬性">

執行以下代碼：

$("#i1").attr("me")   // "自定義屬性"
$("#i1").prop("me")  // undefined

可以看到prop不支持獲取標簽的自定義屬性，

總結：

對于標簽上有的能看到的屬性和自定義屬性都用attr；
對于回傳布林值的比如checkbox，radio和option的是否被選中都用prop；

3.7 檔案處理

添加到指定元素內部的后面：

$(A).append(B)  // 把B追加到A
$(A).appendTo(B)  // 把A追加到B

添加到指定元素內部的前面：

$(A).prepend(B)  // 把B前置到A
$(A).prependTo(B)  // 把A前置到B

添加到指定元素外部的后面：

$(A).after(B)  // 把B放到A的后面
$(A).insertAfter(B)  // 把A放到B的后面

添加到指定元素外部的前面：

$(A).before(B)  // 把B放到A的前面
$(A).insertBefore(B)  // 把A放到B的前面

移除和清空元素：

remove()  // 從DOM中洗掉所有匹配的元素，
empty()  // 洗掉匹配的元素集合中所有的子節點，

替換：
```
replaceWith()
replaceAll()
```

克隆：

clone()  // 引數

克隆示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>克隆</title>
    <style>
        #b1 {
            background-color: deeppink;
            padding: 5px;
            color: white;
            margin: 5px;
        }

        #b2 {
            background-color: dodgerblue;
            padding: 5px;
            color: white;
            margin: 5px;
        }
    </style>
</head>
<body>

<button id="b1">屠龍寶刀，點擊就送</button>
<hr>
<button id="b2">屠龍寶刀，點擊就送</button>

<script>
    // clone方法不加引數true，克隆標簽但不克隆標簽帶的事件
    $("#b1").on("click", function () {
        $(this).clone().insertAfter(this);
    });
    // clone方法加引數true，克隆標簽并且克隆標簽帶的事件
    $("#b2").on("click", function () {
        $(this).clone(true).insertAfter(this);
    });
</script>
</body>
</html>

四、事件

4.1 常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

hover事件示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>hover滑鼠懸浮和移出事件</title>
</head>
<body>
<span>蒼茫的天涯是我的哎，綿綿的青山腳下一片海！</span>

<script>
    // hover事件會在滑鼠懸浮和滑鼠移出指定區域的時候觸發對應函式的執行
    $('span').hover(
        function () {
            alert('來啦，老弟')
        },
        function () {
            alert('慢走哦～')
        }
    )
</script>
</body>
</html>

實時監聽input輸入值變化示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>實時監聽input輸入值變化</title>
</head>
<body>
<input type="text" id="i1">

<script>
    /*
    * oninput是HTML5的標準事件
    * 能夠檢測textarea,input:text,input:password和input:search這幾個元素的內容變化，
    * 在內容修改后立即被觸發，不像onchange事件需要失去焦點才觸發
    * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
    * 使用jQuery庫的話直接使用on同時系結這兩個事件即可，
    * */
    $("#i1").on("input propertychange", function () {
        alert($(this).val());
    })
</script>
</body>
</html>

4.2 系結事件

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

events：事件
selector: 選擇器（可選的）
function: 事件處理函式

系結事件的兩種方式：

jQuery物件.事件名(function(){})
```
$('#d1').click(function(){alert(123)})
```

jQuery物件.on('事件名',function(){})

$('#d1').on('click',function(){alert(123)})

注意：

像click、keydown等DOM中定義的事件，我們都可以使用 .on() 方法來系結事件，但是 hover 這種jQuery中定義的事件就不能用 .on() 方法來系結了，

4.3 移除事件

.off( events [, selector ][,function(){}])

.off() 方法用來移除 .on()系結的事件處理程式，

events：事件
selector: 選擇器（可選的）
function: 事件處理函式

4.4 阻止后續事件執行

return false; // 常用于阻止表單提交等
e.preventDefault();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默認事件</title>
</head>
<body>

<form action="">
    <button id="b1">點我</button>
</form>

<script src="https://www.cnblogs.com/JZjuechen/p/jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>

如想使用事件委托的方式系結hover事件處理函式，可以參照如下代碼分兩步系結事件：

$('ul').on('mouseenter', 'li', function() {  //系結滑鼠進入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {  //系結滑鼠劃出事件
    $(this).removeClass('hover');
});

4.5 阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>點我</span>
    </p>
</div>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

4.6 頁面載入

當DOM載入就緒就可以查詢及操縱時系結一個要執行的函式，這是事件模塊中最重要的一個函式，因為它可以極大地提高web應用程式的回應速度，

兩種寫法：

$(document).ready(function(){
// 在這里寫你的JS代碼...
})

可簡寫為：

$(function(){
// 你在這里寫你的代碼
})

與window.onload的區別

window.onload()函式有覆寫現象，必須等待著圖片資源加載完成之后才能呼叫
jQuery的這個入口函式沒有函式覆寫現象，檔案加載完成之后就可以呼叫（建議使用此函式）

4.7 事件委托

事件委托是通過事件冒泡的原理，利用父標簽去捕獲子標簽的事件，

示例：表格中每一行的編輯和洗掉按鈕都能觸發相應的事件，

$("table").on("click", ".delete", function () {
  // 洗掉按鈕系結的事件
})

五、影片效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])

// 滑動
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])

// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])

// 自定義（了解即可）
animate(p,[s],[e],[fn])

自定義影片—點贊特效簡單示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>點贊影片示例</title>
    <style>
        div {
            position: relative;
            display: inline-block;
        }

        div > i {
            display: inline-block;
            color: red;
            position: absolute;
            right: -16px;
            top: -5px;
            opacity: 1;
        }
    </style>
</head>
<body>

<div id="d1">點贊</div>

<script>
    $("#d1").on("click", function () {
        var newI = document.createElement("i");
        newI.innerText = "+1";
        $(this).append(newI);
        $(this).children("i").animate({
            opacity: 0
        }, 1000)
    })
</script>
</body>
</html>

六、補充

6.1 each

6.1.1 jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一個通用的迭代函式，它可以用來無縫迭代物件和陣列，陣列和類似陣列的物件通過一個長度屬性（如一個函式的引數物件）來迭代數字索引，從0到lenght-1，其他物件通過其屬性名進行迭代，

li = [10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);  //index是索引，v是每次回圈的具體元素，
})

輸出：

6.1.2 .each(function(index, Element))：

描述：遍歷一個jQuery物件，為每個匹配元素執行一個函式，

.each() 方法用來迭代jQuery物件中的每一個DOM元素，每次回呼函式執行時，會傳遞當前回圈次數作為引數(從0開始計數)，由于回呼函式是在當前DOM元素為背景關系的語境中觸發的，所以關鍵字 this 總是指向這個元素，

// 為每一個li標簽添加class
$("li").each(function(){
  $(this).addClass("c1");
});

注意：

jQuery的方法回傳一個jQuery物件，遍歷jQuery集合中的元素 - 被稱為隱式迭代的程序，當這種情況發生時，它通常不需要顯式回圈的 .each()方法：

也就是說，上面的例子沒有必要使用 .each() 方法，直接像下面這樣寫就可以了：

$("li").addClass("c1");  // 對所有標簽做統一操作

注意：

在遍歷程序中可以使用 return false提前結束each回圈，

6.2 .data()

在匹配的元素集合中的所有元素上存盤任意相關資料或回傳匹配的元素集合中的第一個元素的給定名稱的資料存盤的值，

6.2.1 .data(key, value):

描述：在匹配的元素上存盤任意相關資料，

$("div").data("k",100);  //給所有div標簽都保存一個名為k，值為100

6.2.2 .data(key):

描述: 回傳匹配的元素集合中的第一個元素的給定名稱的資料存盤的值—通過 .data(name, value)或 HTML5 data-*屬性設定，

$("div").data("k");  //回傳第一個div標簽中保存的"k"的值

6.2.3 .removeData(key):

描述：移除存放在元素上的資料，不加key引數表示移除所有保存的資料，

$("div").removeData("k");  //移除元素上存放k對應的資料

6.3 插件（了解）

jQuery.extend(object)

jQuery的命名空間下添加新的功能，多用于插件開發者向 jQuery 中添加新函式時使用，

示例：

<script>
jQuery.extend({
  min:function(a, b){return a < b ? a : b;},
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);  // => 2
jQuery.max(4,5);  // => 5
</script>

jQuery.fn.extend(object)

一個物件的內容合并到jQuery的原型，以提供新的jQuery實體方法，

<script>
  jQuery.fn.extend({
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
    
// jQuery物件可以使用新添加的check()方法了，
$("input[type='checkbox']").check();
</script>

單獨寫在檔案中的擴展：

(function(jq){
  jq.extend({
    funcName:function(){
    ...
    },
  });
})(jQuery);

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/424968.html

標籤：JavaScript

上一篇：大檔案切片上傳到服務器

下一篇：vue3的組合式API究竟是什么