jQuery筆記 - 簡書

1. jQuery 介紹

2. jQuery 的基本使用

3. jQuery 選擇器

4. jQuery 樣式操作

5. jQuery 效果

6. jQuery 屬性操作

7. jQuery 文本屬性值

8. jQuery 元素操作

9. jQuery 事件注冊

10. jQuery 事件處理

11. jQuery 事件對象

12. jQuery 拷貝對象

13. jQuery 多庫共存

14. jQuery 插件

15. 綜合案例: toDoList案例分析

16. jQuery 尺寸惶桐、位置操作

學習目標：
能夠說出什么是 jQuery
能夠說出 jQuery 的優(yōu)點
能夠簡單使用 jQuery
能夠說出 DOM 對象和 jQuery 對象的區(qū)別
能夠寫出常用的 jQuery 選擇器
能夠操作 jQuery 樣式
能夠寫出常用的 jQuery 動畫
能夠操作 jQuery 屬性
能夠操作 jQuery 元素
能夠操作 jQuery 元素尺寸焕数、位置
能夠說出4種常見的注冊事件
能夠說出 on 綁定事件的優(yōu)勢
能夠說出 jQuery 事件委派的優(yōu)點以及方式
能夠說出綁定事件與解綁事件
能夠說出 jQuery 對象的拷貝方法
能夠說出 jQuery 多庫共存的2種方法
能夠使用 jQuery 插件

1. jQuery 介紹

1.1 JavaScript 庫

? JavaScript庫：即 library抱婉，是一個封裝好的特定的集合（方法和函數）蝗羊。就是在這個庫中，封裝了很多預先定義好的函數在里面耸采，比如動畫animate艳吠、hide、show局骤，比如獲取元素等

簡單理解：就是一個JS 文件攀圈，里面對我們原生js代碼進行了封裝，我們可以快速高效的使用這些封裝好的功能了

比如 jQuery峦甩，就是為了快速方便的操作DOM赘来，里面基本都是函數（方法）

? 常見的JavaScript 庫：jQuery、Prototype凯傲、YUI犬辰、Dojo、Ext JS冰单、移動端的zepto等忧风，這些庫都是對原生 JavaScript 的封裝

1.2 jQuery的概念

? jQuery總體概況如下 :

jQuery 是一個快速、簡潔的 JavaScript 庫球凰，其設計的宗旨是“write Less狮腿，Do More”腿宰，即倡導寫更少的代碼，做更多的事情
j 就是 JavaScript缘厢； Query 查詢吃度；意思就是查詢js，把js中的DOM操作做了封裝贴硫，我們可以快速的查詢使用里面的功能
jQuery 封裝了 JavaScript 常用的功能代碼椿每，優(yōu)化了 DOM 操作、事件處理英遭、動畫設計和 Ajax 交互
學習jQuery本質：就是學習調用這些函數（方法）
jQuery 出現的目的是加快前端人員的開發(fā)速度间护，我們可以非常方便的調用和使用它，從而提高開發(fā)效率

1.3 jQuery的優(yōu)點

輕量級挖诸。核心文件才幾十kb汁尺，不會影響頁面加載速度
跨瀏覽器兼容，基本兼容了現在主流的瀏覽器
鏈式編程多律、隱式迭代
對事件痴突、樣式、動畫支持狼荞，大大簡化了DOM操作
支持插件擴展開發(fā)辽装。有著豐富的第三方的插件，例如：樹形菜單相味、日期控件拾积、輪播圖等
免費、開源

2. jQuery 的基本使用

2.1 jQuery 的下載

? jQuery的官網地址： https://jquery.com/

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

? 版本介紹：

1x ：兼容 IE 678 等低版本瀏覽器丰涉，官網不再更新

2x ：不兼容 IE 678 等低版本瀏覽器殷勘，官網不再更新

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

2.2 體驗jQuery

? 步驟：

引入jQuery文件

    <script src="jquery.min.js"></script>

在文檔最末尾插入 script 標簽昔搂，書寫體驗代碼
$('div').hide() 可以隱藏盒子

2.3 jQuery的入口函數

? jQuery中常見的兩種入口函數：

// 第一種: 簡單易用。
$(function () {   
    ...  // 此處是頁面 DOM 加載完成的入口
}) ; 

// 第二種: 繁瑣输拇，但是也可以實現
$(document).ready(function(){
   ...  //  此處是頁面DOM加載完成的入口
});9

? 總結：

等著 DOM 結構渲染完畢即可執(zhí)行內部代碼摘符，不必等到所有外部資源加載完成已旧，jQuery 幫我們完成了封裝
相當于原生 js 中的 DOMContentLoaded
不同于原生 js 中的 load 事件（load等頁面文檔梢睛、外部的 js 文件、css文件启涯、圖片猴抹、音頻带族、視頻加載完畢才執(zhí)行內部代碼）
更推薦使用第一種方式

2.4 jQuery中的頂級對象$

$是 jQuery 的別稱，可以使用 jQuery 代替 $蟀给，通常都直接使用$
$是jQuery的頂級對象蝙砌，相當于原生JavaScript中的 window阳堕。把元素利用$包裝成jQuery對象，就可以調用jQuery 的方法

2.5 jQuery 對象和 DOM 對象

? 使用 jQuery 方法和原生JS獲取的元素是不一樣的择克，總結如下 :

用原生 JS 獲取來的對象就是 DOM 對象

var myDiv = document.querySelector('div'); // myDiv 是DOM對象
console.dir(myDiv);
myDiv.style.display = 'none';

jQuery 方法獲取的元素就是 jQuery 對象
```
console.dir($('div'));
$('div').hide();
```
jQuery 對象本質是：利用$對DOM 對象包裝后產生的對象（偽數組形式存儲）

注意：

jQuery 對象只能使用 jQuery 方法恬总，DOM 對象則使用原生的 JavaScirpt 屬性和方法

2.6 jQuery 對象和 DOM 對象轉換

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

// 1.DOM對象轉換成jQuery對象，方法只有一種
var box = document.getElementById('box');  // 獲取DOM對象
var jQueryObject = $(box);  // 把DOM對象轉換為 jQuery 對象

// 2.jQuery 對象轉換為 DOM 對象有兩種方法：
//   2.1 jQuery對象[索引值]
var domObject1 = $('div')[0]

//   2.2 jQuery對象.get(索引值)
var domObject2 = $('div').get(0)

總結：常用的是把DOM對象轉換為jQuery對象骡湖，這樣能夠調用功能更加強大的jQuery中的方法

3. jQuery 選擇器

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

3.1 基礎選擇器

$("選擇器")   //  里面選擇器直接寫 CSS 選擇器即可换途，但是要加引號

例如

$("#id")//id選擇器
$('*')//全選選擇器
$(".class")//類選擇器
$("div")//標簽選擇器
$("div,p,li")//并集選擇器
$("li.current")//交集選擇器

3.2 層級選擇器

? 層級選擇器最常用的兩個分別為：后代選擇器和子代選擇器懊渡。

$("ul>li");//子代選擇器，獲得親兒子層級元素军拟，沒有孫子層級
$("ul li");//后代選擇器剃执，獲得所有后代元素，包括孫子（獲取ul下所有l(wèi)i）

基礎選擇器和層級選擇器案例代碼

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>        
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            console.log($(".nav"));
            console.log($("ul li"));
        })
    </script>
</body>

3.3 篩選選擇器

? 篩選選擇器懈息，顧名思義就是在所有的選項中選擇滿足條件的進行篩選選擇肾档。常見如下 :

$('li:first');//:first 獲取第一個li
$('li:last');//:last 獲取最后一個li
$('li:eq(2)');//:eq(index) index從0開始，獲取第3個li
$('li:odd')//:odd 索引號是奇數的li元素
$('li:even')//:even 索引號是偶數的li元素

案例代碼

<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>

另: jQuery中還有一些篩選方法辫继，類似DOM中的通過一個節(jié)點找另外一個節(jié)點怒见，父、子姑宽、兄以外有所加強

語法	用法	說明
?parent()	$("li").parent();	查找父級（親爸爸）
?children(selector)	$("ul").children("li");	查找子代（親兒子）相當于$("ul>li");
?find(selector)	$("ul").find("li");	查找后代（包括孫子）即$("ul li");
?siblings(selector)	$('.first').siblings("li");	查找兄弟節(jié)點為li的（可以無參數）不包括自身
nextAll([expr])	$('.first').nextAll()	查找當前元素之后的所有同輩元素
prevtAll([expr])	$('.last').prevtAll()	查找當前元素之前的所有同輩元素
hasClass(class)	$('div:first').hasClass("protected")	檢查當前元素是否有某個類遣耍，有返回true
?eq(index)	$("li").eq(2);	相當于$("li:eq("+index+")");

偏重于記憶，演示代碼略

3.4 知識鋪墊

jQuery 設置樣式

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

jQuery 里面的排他思想

// 想要多選一的效果炮车，排他思想：當前元素設置樣式舵变，其余的兄弟元素清除樣式。
$(this).css("color", "red");
$(this).siblings().css("color", "");

隱式迭代

// 遍歷內部 DOM 元素（偽數組形式存儲）的過程就叫做隱式迭代
// 簡單理解：給匹配到的所有元素進行循環(huán)遍歷瘦穆，執(zhí)行相應的方法纪隙，而不用我們再進行循環(huán)，簡化我們的操作扛或，方便我們調用
$('div').hide();  // 頁面中所有的div全部隱藏绵咱，不用循環(huán)操作

鏈式編程

// 鏈式編程是為了節(jié)省代碼量，看起來更優(yōu)雅熙兔。
$(this).css('color', 'red').sibling().css('color', '');

3.5 案例：淘寶服飾精品案例

思路分析:
1.核心原理：鼠標經過左側盒子某個小li悲伶，就讓內容區(qū)盒子相對應圖片顯示艾恼，其余的圖片隱藏。
2.需要得到當前小li 的索引號拢切，就可以顯示對應索引號的圖片
3.jQuery 得到當前元素索引號 $(this).index()
4.中間對應的圖片蒂萎，可以通過 eq(index) 方法去選擇
5.顯示元素 show() 隱藏元素 hide()

$(function() {
            // 1. 鼠標經過左側的小li 
            $("#left li").mouseover(function() {
                // 2. 得到當前小li 的索引號
                var index = $(this).index();
                // 3. 讓我們右側的盒子相應索引號的圖片顯示出來就好了
                // $("#content div").eq(index).show();
                // 4. 讓其余的圖片（就是其他的兄弟）隱藏起來
                // $("#content div").eq(index).siblings().hide();
                // 鏈式編程
                $("#content div").eq(index).show().siblings().hide();
            })
        })

4. jQuery 樣式操作

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

4.1 方法1: 操作 css 方法

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

? 常用以下三種形式 :

// 1.參數只寫屬性名五慈，則是獲取屬性值
var strColor = $(this).css('color');

// 2. 設置一組樣式： 參數是屬性名，屬性值 ","分隔
//屬性必須加引號主穗，值如果是數字可以不用跟單位和""
$(this).css("color", "red");

// 3. 設置多組樣式： 參數可以是對象形式 ":"隔開
//屬性名可以不用加引號泻拦，如果是復合屬性必須采用駝峰命名法backgroundColor，值如果不是數字需要加""
$(this).css({ "color":"white","font-size":"20px"});

? 注意：css() 多用于樣式少時操作忽媒，多了則不太方便

4.2 方法2: 設置類樣式方法

? 作用等同于以前元素的 classList屬性争拐，可以操作類樣式，注意參數不要加點

.current{ 
    "color":"white";
    "font-size":"20px";
}

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

// 1.添加類
$("div").addClass("current");

// 2.刪除類
$("div").removeClass("current");

// 3.切換類
$("div").toggleClass("current");

? 注意：

設置類樣式方法比較適合樣式多時操作晦雨，可以彌補css()的不足
原生 JS 中 className 會覆蓋元素原先里面的類名架曹，jQuery 里面類操作只是對指定類進行操作，不影響原先的類名

4.3 案例：tab 欄切換

思路分析:
1.點擊上部的li闹瞧，當前l(fā)i 添加current類绑雄，其余兄弟移除類。
2.點擊的同時奥邮，得到當前l(fā)i 的索引號
3.讓下部里面相應索引號的item顯示万牺，其余的item隱藏

$(function() {
            // 1.點擊上部的li，當前l(fā)i 添加current類洽腺，其余兄弟移除類
            $(".tab_list li").click(function() {
                // 鏈式編程操作
                $(this).addClass("current").siblings().removeClass("current");
                // 2.點擊的同時脚粟，得到當前l(fā)i 的索引號
                var index = $(this).index();
                console.log(index);
                // 3.讓下部里面相應索引號的item顯示，其余的item隱藏
                $(".tab_con .item").eq(index).show().siblings().hide();
            });
        })

5. jQuery 效果

? jQuery 給我們封裝了很多動畫效果蘸朋，使用手冊https://jquery.cuishifeng.cn/show.html

? 最為常見的如下：

顯示隱藏：show() / hide() / toggle() ;
劃入畫出：slideDown() / slideUp() / slideToggle() ;
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
自定義動畫：animate() ;

注意：

動畫或者效果一旦觸發(fā)就會執(zhí)行核无，如果多次觸發(fā)，就造成多個動畫或者效果排隊執(zhí)行

jQuery為我們提供另一個方法藕坯，可以停止動畫排隊：stop() ;

5.1 顯示隱藏

? 顯示隱藏動畫团南，常見有三個方法：show() / hide() / toggle() ;

? 語法規(guī)范

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

隱藏參數
- 一般使用時不帶參數，參數省略時堕担，表示無動畫直接顯示
- speed：三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
- easing：(Optional) 用來指定切換效果，默認是"swing"曲聂，可用參數"linear"
- fn：在動畫完成時執(zhí)行的函數霹购，每個元素執(zhí)行一次。

![show](images/show.p

代碼演示

<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>

5.2 滑入滑出

? 滑入滑出動畫齐疙，常見有三個方法：slideDown() / slideUp() / slideToggle() ;

語法規(guī)范

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

效果參數
- 參數可以省略
- speed：三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
- easing：(Optional) 用來指定切換效果膜楷，默認是"swing"，可用參數"linear"
- fn：在動畫完成時執(zhí)行的函數贞奋，每個元素執(zhí)行一次

代碼演示

<body>
    <button>下拉滑動</button>
    <button>上拉滑動</button>
    <button>切換滑動</button>
    <div></div>
    <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>
</body>

小案例：下拉菜單略（詳情參看源碼）赌厅。

5.3 淡入淡出

? 淡入淡出動畫，常見有四個方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

語法規(guī)范

fadeIn([speed],[easing],[fn])//淡入
fadeOut([speed,[easing],[fn]])//淡出
fadeToggle([speed,[easing],[fn]])//

效果參數
- 參數可以省略
- speed：三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
- easing：(Optional) 用來指定切換效果轿塔，默認是"swing"特愿，可用參數"linear"
- fn：在動畫完成時執(zhí)行的函數，每個元素執(zhí)行一次

語法規(guī)范

fadeTo([[speed],opacity,[easing],[fn]])//漸進方式調整到指定的不透明度

效果參數
- opacity ：透明度必須寫勾缭，取值0-1之間
- speed ：三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
- easing： (Optional) 用來指定切換效果揍障，默認是"swing"，可用參數"linear"
- fn：在動畫完成時執(zhí)行的函數俩由，每個元素執(zhí)行一次

代碼演示

<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>

5.4 自定義動畫

? 自定義動畫非常強大毒嫡，通過參數的傳遞可以模擬以上所有動畫，方法為：animate() ;

語法規(guī)范
```
animate(params,[speed],[easing],[fn])
```
效果參數
- params:想要更改的樣式屬性幻梯，以對象{}形式傳遞兜畸，屬性名可以不用""，如果是復合屬性采用駝峰命名borderLeft碘梢，其余參數可以省略
- speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
- easing:要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing"
- fn:在動畫完成時執(zhí)行的函數咬摇，每個元素執(zhí)行一次

代碼演示

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

5.5 停止動畫排隊

? 動畫或者效果一旦觸發(fā)就會執(zhí)行，如果多次觸發(fā)痘系，就造成多個動畫或者效果排隊執(zhí)行

? 停止動畫排隊的方法為：stop() ;

stop() 方法用于停止動畫或效果

stop() 寫到動畫或者效果的前面菲嘴，相當于停止結束上一次的動畫

$(".nav>li").hover(function() {
      // stop 方法必須寫到動畫的前面
      $(this).children("ul").stop().slideToggle();
});

? 總結: 每次使用動畫之前，先調用 stop() ,在調用動畫

5.6 事件切換

? jQuery中為我們添加了一個新事件 hover() ; 功能類似 css 中的偽類 :hover 汰翠。介紹如下

語法

hover([over,]out)     // 其中over和out為兩個函數

over:鼠標移到元素上要觸發(fā)的函數（相當于mouseenter）
out:鼠標移出元素要觸發(fā)的函數（相當于mouseleave）
如果只寫一個函數龄坪，則鼠標經過和離開都會觸發(fā)它

hover事件和停止動畫排列案例

<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><li><a href="">@我</a></li></ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠標經過
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 當前元素  this不要加引號
            //     // show() 顯示元素  hide() 隱藏元素
            //     $(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  如果只寫一個函數，那么鼠標經過和鼠標離開都會觸發(fā)這個函數
            $(".nav>li").hover(function() {
                // stop 方法必須寫到動畫的前面
                $(this).children("ul").stop().slideToggle();
            });
        })
    </script>
</body>

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

思路分析:
1.鼠標經過某個小li 有兩步操作：
2.當前小li 寬度變?yōu)?224px复唤，同時里面的小圖片淡出健田，大圖片淡入
3.其余兄弟小li寬度變?yōu)?9px，小圖片淡入佛纫，大圖片淡出

 $(function () {
        // 鼠標經過某個小li 有兩步操作：
        $(".king li").mouseenter(function () {
            // 1.當前小li 寬度變?yōu)?224px妓局， 同時里面的小圖片淡出，大圖片淡入
            $(this).stop().animate({
                  width: 224
            }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
            // 2.其余兄弟小li寬度變?yōu)?9px呈宇， 小圖片淡入好爬， 大圖片淡出
            $(this).siblings("li").stop().animate({
                  width: 69
            }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
        })
  });

6. jQuery 屬性操作

? jQuery 常用屬性操作有三種：prop() / attr() / data() ;

6.1 元素固有屬性值 prop()

? 所謂元素固有屬性就是元素本身自帶的屬性，比如 <a> 元素里面的 href 甥啄，比如 <input> 元素里面的 type

語法

獲取屬性
```
element.prop("屬性名");
```

設置屬性

element.prop("屬性名", "屬性值");

? 注意：prop() 除了普通屬性操作存炮，更適合操作表單屬性：disabled / checked / selected 等

6.2 元素自定義屬性值 attr()

? 用戶自己給元素添加的屬性，我們稱為自定義屬性。比如給 div 添加 index =“1”穆桂。

語法

獲取屬性

element.attr("屬性名");//類似原生getAttribute()

設置屬性

element.attr("屬性名", "屬性值");//類似原生setAttribute()

? 注意：attr() 除了普通屬性操作宫盔，更適合操作自定義屬性（可以獲取 H5 自定義屬性attr("data-index")）

6.3 數據緩存 data()

? data() 方法可以在指定的元素上存取數據，并不會修改 DOM 元素結構享完。一旦頁面刷新灼芭，之前存放的數據都將被移除（類似于變量，用來存儲數據的）

語法

附加屬性

element.data("屬性名", "屬性值");//向被選元素附加數據

獲取屬性

element.data("屬性名");//向被選元素獲取數據

? 注意：同時般又，還可以讀取 HTML5 自定義屬性 data-index 彼绷，data("index")得到的是數字型

演示代碼

<body>
    <a  title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function() {
            //1. element.prop("屬性名") 獲取元素固有的屬性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我們都挺好");
            $("input").change(function() {
                console.log($(this).prop("checked"));
            });
            // console.log($("div").prop("index"));
            // 2. 元素的自定義屬性 我們通過 attr()
            console.log($("div").attr("index"));
            $("div").attr("index", 4);
            console.log($("div").attr("data-index"));
            // 3. 數據緩存 data() 這個里面的數據是存放在元素的內存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 這個方法獲取data-index h5自定義屬性 第一個 不用寫data-  而且返回的是數字型
            console.log($("div").data("index"));
        })
    </script>
</body>

6.4 案例：購物車-全選

全選思路：里面3個小的復選框按鈕（j-checkbox）選中狀態(tài)（checked）跟著全選按鈕（checkall）走
因為checked 是復選框的固有屬性，利用prop()方法獲取和設置該屬性
把全選按鈕狀態(tài)賦值給3小復選框就可以了
當我們每次點擊小的復選框按鈕倒源，就來判斷：
如果小復選框被選中的個數等于3苛预，就全選按鈕選上，否則全選按鈕不選
:checked 選擇器 :checked 查找被選中的表單元素

$(function() {
    $('.checkall').change(function() {
        $(".j-checkbox, .checkall").prop('checked', $(this).prop('checked'));
    })
    $('.j-checkbox').change(function() {
        if($('.j-checkbox:checked').length == $(".j-checkbox").length) {
            $('.checkall').prop('checked', true);
        } else {
            $('.checkall').prop('checked', false);
        }
    })
})

7. jQuery 文本屬性值

? jQuery的文本屬性值常見操作有三種：html() / text() / val() ; 分別對應JS中的 innerHTML 笋熬、innerText 和 value 屬性

7.1 jQuery內容文本值

? 常見操作有三種：html() / text() / val() ; 分別對應JS中的 innerHTML 热某、innerText 和 value 屬性，主要針對元素的內容還有表單的值操作

語法

普通元素內容

html()//獲取元素內容
html("內容")//設置元素內容

普通元素文本內容
```
text()//獲取
text("內容")//設置
```
表單的值
```
val()//獲取
val("內容")//設置
```

? 注意：html() 可識別標簽胳螟，text() 不識別標簽

演示代碼

<body>
    <div>
        <span>我是內容</span>
    </div>
    <input type="text" value="請輸入內容">
    <script>
        // 1. 獲取設置元素內容 html()
        console.log($("div").html());//"<span>我是內容</span>"
        $("div").html("<span>我是內容</span>");//?

        // 2. 獲取設置元素文本內容 text()
        console.log($("div").text());//"我是內容"?

        $("div").text("<span>我是內容</span>");//?
        console.log($("div").text());//"<span>我是內容</span>"?

        // 3. 獲取設置表單值 val()
        console.log($("input").val());
        $("input").val("123");
    </script>
</body>

7.2 案例：購物車-增減商品數量

1.核心思路：首先聲明一個變量昔馋，當我們點擊+號（increment），就讓這個值++糖耸，然后賦值給文本框
2.注意1：只能增加本商品的數量秘遏，就是當前+號的兄弟文本框（itxt）的值。
3.修改表單的值是val() 方法
4.注意2：這個變量初始值應該是這個文本框的值嘉竟，在這個值的基礎上++邦危。要獲取表單的值
5.減號（decrement）思路同理，但是如果文本框的值是1舍扰，就不能再減了倦蚪。

$(function() {
    $('.increment').click(function() {
        var val = $(this).siblings('.itxt').val();
        val++;
        $(this).siblings('.itxt').val(val);
    })
    $('.decrement').click(function() {
        var val = $(this).siblings('.itxt').val();
        if(val == 1) {
            return false;
        }
        val--;
        $(this).siblings('.itxt').val(val);
    })
})

7.3 案例：購物車-修改商品小計parents()

1.核心思路：每次點擊+號或者-號，根據文本框的值乘以當前商品的價格就是商品的小計
2.注意1：只能增加本商品的小計边苹，就是當前商品的小計模塊（p-sum）
3.修改普通元素的內容是text() 方法
4.注意2：當前商品的價格陵且，要把￥符號去掉再相乘截取字符串 substr(1)
5.parents(‘選擇器’) 可以返回指定祖先元素
6.最后計算的結果如果想要保留2位小數通過 toFixed(2) 方法
7.用戶也可以直接修改表單里面的值，同樣要計算小計个束。用表單change事件
8.用最新的表單內的值乘以單價即可但是還是當前商品小計

$(function() {
    $('.increment').click(function() {
        var val = $(this).siblings('.itxt').val();
        val++;
        $(this).siblings('.itxt').val(val);
        // 商品小計
        var p_price = $(this).parents('.p-num').siblings('.p-price').text().substr(1);
        var p_sum = p_price * val;
        // parents(selector)返回指定的祖先元素
        // 等價$(this).parent().parent().siblings('.p-sum').text('￥' + p_sum);
        $(this).parents('.p-num').siblings('.p-sum').text('￥' + p_sum);
    })
    $('.decrement').click(function() {
        var val = $(this).siblings('.itxt').val();
        if(val == 1) {
            return false;
        }
        val--;
        $(this).siblings('.itxt').val(val);
        // 商品小計
        var p_price = $(this).parents('.p-num').siblings('.p-price').text().substr(1);
        var p_sum = (p_price * val).toFixed(2);
        $(this).parents('.p-num').siblings('.p-sum').text('￥' + p_sum);
    })
    // 輸入數字,改變文本
    $('.itxt').change(function() {
        var val = $(this).val();
        var p_price = $(this).parents('.p-num').siblings('.p-price').text().substr(1);
        var p_sum = (p_price * val).toFixed(2);
        $(this).parents('.p-num').siblings('.p-sum').text('￥' + p_sum);
    })

})

8. jQuery 元素操作

? 用jQuery方法慕购，操作標簽的遍歷、創(chuàng)建茬底、添加沪悲、刪除等操作

8.1 遍歷元素

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

語法1

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

? 注意：

此方法用于遍歷 jQuery 對象中的每一項
回調函數中domEle元素為 DOM 對象殿如，index是元素索引號
想要使用 jQuery 方法需要轉換為jQuery對象$(domEle)

語法2

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

? 注意：

$.each()可用于遍歷任何對象昌妹，主要用于數據處理（數組，對象{}）
回調函數中element元素為 DOM 對象
想要使用 jQuery 方法需要轉換$(domEle)

演示代碼

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // 如果針對于同一類元素做不同操作握截，需要用到遍歷元素（類似for，但是比for強大）
            var sum = 0;
            var arr = ["red", "green", "blue"];
            // 1. each() 方法遍歷元素 
            $("div").each(function(i, domEle) {
                // 回調函數第一個參數一定是索引號  可以自己指定索引號號名稱
                // console.log(i);
                // 回調函數第二個參數一定是 dom 元素對象烂叔，也是自己命名
                // console.log(domEle);  // 使用jQuery方法需要轉換 $(domEle)
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍歷元素 主要用于遍歷數據谨胞，處理數據
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // });
            // $.each(arr, function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 輸出的是 name age 屬性名
                console.log(ele); // 輸出的是 andy  18 屬性值
            })
        })
    </script>
</body>

8.2 案例：購物車-計算總計和總額

1.把所有文本框中的值相加就是總額數量，總計同理蒜鸡。
2.文本框里面的值不同胯努，如果想要相加需要用 each() 遍歷，聲明一個變量做計數器逢防，累加即可叶沛。

$(function() {
    // 5. 計算總計和總額模塊
    getSum();

    function getSum() {
        var count = 0; // 計算總件數 
        var money = 0; // 計算總價錢
        $(".itxt").each(function(i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
        $(".p-sum").each(function(i, ele) {
            money += parseFloat($(ele).text().substr(1));
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }

})

8.3 創(chuàng)建、添加忘朝、刪除

? jQuery方法操作元素的創(chuàng)建灰署、添加、刪除方法很多局嘁，則重點使用部分溉箕，如下：

語法總和

創(chuàng)建

$("<li>創(chuàng)建的元素</li>")//動態(tài)創(chuàng)建了一個li

內部添加（父子）

element.append("內容");//把內容放入匹配元素的內部最后面，類似原生appendChild

element.prepend("內容");//把內容放入匹配元素的內部最前面

外部添加（兄弟關系）

element.after("內容");//把內容放入匹配元素的后面

element.before("內容");//把內容放入匹配元素的前面

刪除元素

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

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

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

注意：empty()和html("")等價悦昵，只是html還可以設置內容

以上只是元素的創(chuàng)建肴茄、添加、刪除方法的常用方法但指，其他方法請參詳API

案例代碼

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            // 1. 創(chuàng)建元素
            var li = $("<li>我是后來創(chuàng)建的li</li>");
      
            // 2. 添加元素
            //  2.1 內部添加
            // $("ul").append(li);  內部添加并且放到內容的最后面 
            $("ul").prepend(li); // 內部添加并且放到內容的最前面
            //  2.2 外部添加
            var div = $("<div>我是后媽生的</div>");
            // $(".test").after(div);
            $(".test").before(div);
      
            // 3. 刪除元素
            // $("ul").remove(); 可以刪除匹配的元素 自殺
            // $("ul").empty(); // 可以刪除匹配的元素里面的子節(jié)點 孩子
            $("ul").html(""); // 可以刪除匹配的元素里面的子節(jié)點 孩子
        })
    </script>
</body>

8.4 案例：購物車-刪除商品模塊

1.核心思路：把商品remove() 刪除元素即可
2.有三個地方需要刪除： 1. 商品后面的刪除按鈕 2. 刪除選中的商品 3. 清理購物車
3.商品后面的刪除按鈕：一定是刪除當前的商品寡痰，所以從 $(this) 出發(fā)
4.刪除選中的商品：先判斷小的復選框按鈕是否選中狀態(tài)，如果是選中棋凳，則刪除對應的商品
5.清理購物車：則是把所有的商品全部刪掉

$(function() {
    // 6. 刪除商品模塊
    // (1) 商品后面的刪除按鈕
    $(".p-action a").click(function() {
        // 刪除的是當前的商品 
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // (2) 刪除選中的商品
    $(".remove-batch").click(function() {
        // 刪除的是小的復選框選中的商品
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    });
    // (3) 清空購物車 刪除全部商品
    $(".clear-all").click(function() {
        $(".cart-item").remove();
        getSum();
    })
})

8.5 案例：購物車-選中商品添加背景

1.核心思路：選中的商品添加背景拦坠，不選中移除背景即可
2.全選按鈕點擊：如果全選是選中的，則所有的商品添加背景贫橙，否則移除背景
3.小的復選框點擊：如果是選中狀態(tài)贪婉，則當前商品添加背景，否則移除背景
4.這個背景卢肃，可以通過類名修改疲迂，添加類和刪除類

$(function() {
    $(".checkall").change(function() {
        if ($(this).prop("checked")) {
            // 讓所有的商品添加 check-cart-item 類名
            $(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(".cart-item").removeClass("check-cart-item");
        }
        
    });
    $(".j-checkbox").change(function() {
        if ($(this).prop("checked")) {
            // 讓當前的商品添加 check-cart-item 類名
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    });
})

9. jQuery 事件注冊

? jQuery 為我們提供了方便的事件注冊機制，優(yōu)缺點如下：

優(yōu)點: 操作簡單莫湘，且不用擔心事件覆蓋等問題
缺點: 普通的事件注冊不能做事件委托尤蒿，且無法實現事件解綁，需要借助其他方法

語法

element.事件(function() { })

$('div').click(function() { })

其他事件和原生一致幅垮，比如mouseover腰池、mouseout、blur、focus示弓、change讳侨、keydown、keyup奏属、resize跨跨、scroll...

演示代碼

<body>
    <div></div>
    <script>
        $(function() {
            // 1. 單個事件注冊
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>

10. jQuery 事件處理

? 因為普通注冊事件方法的不足，jQuery又開發(fā)了多個處理方法囱皿，重點講解如下：

on(): 用于事件綁定勇婴，目前最好用的事件綁定方法
off(): 事件解綁
trigger() / triggerHandler(): 事件觸發(fā)

10.1 事件處理 on() 綁定事件

? 因為普通注冊事件方法的不足，jQuery又創(chuàng)建了多個新的事件綁定方法bind() / live() / delegate() / on()等嘱腥，其中最好用的是: on()

語法

on()優(yōu)勢1：

可以綁定一個或多個事件的事件處理函數

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

如果事件處理函數相同

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

on()優(yōu)勢2：

可以事件委派操作耕渴。事件委派就是把原來加給子元素身上的事件綁定給父元素身上，把事件委派給父元素
```
$('ul').on('click', 'li', function() {
    alert('222');
});//事件綁定的是ul齿兔，觸發(fā)的是li
```
在此之前有bind()橱脸、live()、delegate()等方法來處理事件綁定或者事件委派分苇，最新版本用on替代他們

on()優(yōu)勢3：

動態(tài)創(chuàng)建的元素慰技，click()沒法綁定事件，on()可以

$('div').on('click', 'p', function() {
    alert('222');
})
$('div').append($('<p>動態(tài)創(chuàng)建的p</p>'));

演示代碼

<body>
    <div></div>
    <ul>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
    </ul>
    <ol></ol>

    <script>
        $(function() {
            // (1) on可以綁定1個或者多個事件處理程序
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     }
            // });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
  
            // (2) on可以實現事件委托（委派）
            // click 是綁定在ul 身上的组砚，但是 觸發(fā)的對象是 ul 里面的小li
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });

            // (3) on可以給未來動態(tài)創(chuàng)建的元素綁定事件
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后來創(chuàng)建的</li>");
            $("ol").append(li);
        })
    </script>
</body>

10.2 案例：發(fā)布微博案例

1.點擊發(fā)布按鈕吻商，動態(tài)創(chuàng)建一個小li，放入文本框的內容和刪除按鈕糟红，并且添加到ul 中艾帐。
2.點擊的刪除按鈕，可以刪除當前的微博留言盆偿。

? 代碼實現略柒爸。(詳情參考源代碼)

10.3 事件處理 off() 解綁事件

? 當某個事件上面的邏輯，在特定需求下不需要的時候事扭，可以把該事件上的邏輯移除捎稚，這個過程我們稱為事件解綁。jQuery 為我們提供了多種事件解綁方法：die() / undelegate() / off() 等求橄，甚至還有只觸發(fā)一次的事件綁定方法 one()今野，在這里我們重點講解一下 off() ;

語法

off()方法可以移除on()方法綁定的事件處理程序

$("p").off();//解綁p元素所有事件處理程序
$("p").off("click");//解綁p元素上的click事件 
$("ul").off("click", "li");//解綁事件委派

如果事件只想觸發(fā)一次，可以用one()來綁定事件

演示代碼

<body>
    <div></div>
    <ul>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
    </ul>
    <p>我是一個P標簽</p>
    <script>
        $(function() {
            // 事件綁定
            $("div").on({
                click: function() {
                    console.log("我點擊了");
                },
                mouseover: function() {
                    console.log('我鼠標經過了');
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
  
            // 1. 事件解綁 off 
            // $("div").off();  // 這個是解除了div身上的所有事件
            $("div").off("click"); // 這個是解除了div身上的點擊事件
            $("ul").off("click", "li");
  
            // 2. one() 但是它只能觸發(fā)事件一次
            $("p").one("click", function() {
                alert(11);
            })
        })
    </script>
</body>

10.4 事件處理 trigger() 自動觸發(fā)事件

? 有些時候罐农，希望某些事件能夠自動觸發(fā), 比如輪播圖自動播放功能跟點擊右側按鈕一致条霜。可以利用定時器自動觸發(fā)右側按鈕點擊事件涵亏，不必鼠標點擊觸發(fā)宰睡。由此 jQuery 為我們提供了兩個自動觸發(fā)事件 trigger() 和 triggerHandler() ;

語法

trigger("type")

element.click();//第一種簡寫形式
element.trigger("click");//第二種自動觸發(fā)模式

triggerHandler()
```
element.triggerhandler("click");//第三種
```
注意：triggerHandler()不會觸發(fā)元素的默認行為蒲凶，這是和前2種的區(qū)別

演示代碼

<body>
    <div></div>
    <input type="text">
      
    <script>
    $(function() {
      // 綁定事件
      $("div").on("click", function() {
        alert(11);
      });

      // 自動觸發(fā)事件
      // 1. 元素.事件()
      // $("div").click();會觸發(fā)元素的默認行為
      
      // 2. 元素.trigger("事件")
      // $("div").trigger("click");會觸發(fā)元素的默認行為
      $("input").trigger("focus");
      
      // 3. 元素.triggerHandler("事件") 就是不會觸發(fā)元素的默認行為
      $("input").on("focus", function() {
        $(this).val("你好嗎");
      });
      // 一個會獲取焦點，一個不會
      $("div").triggerHandler("click");
      // $("input").triggerHandler("focus");
    });
    </script>
</body>

11. jQuery 事件對象

? jQuery 對DOM中的事件對象 event 進行了封裝拆内，兼容性更好旋圆，獲取更方便，使用變化不大麸恍。事件被觸發(fā)臂聋，就會有事件對象的產生。

語法

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

阻止默認行為：event.preventDefault() / return false

阻止冒泡：event.stopPropagation()

演示代碼

<body>
    <div></div>

    <script>
        $(function() {
            $(document).on("click", function() {
                console.log("點擊了document");
            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("點擊了div");
                event.stopPropagation();
            })
        })
    </script>
</body>

注意：jQuery中的 event 對象使用或南，可以借鑒 API 和 DOM 中的 event

12. jQuery 拷貝對象

? jQuery中分別為我們提供了兩套快速獲取和設置元素尺寸和位置的API，內容如下艾君。

語法

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

deep 如果true為深拷貝采够，默認false淺拷貝
target 要拷貝的目標對象
object1 待拷貝到第一個對象的對象
objectN 待拷貝到第N個對象的對象
淺拷貝把原來對象里面的復雜數據類型地址拷貝給目標對象，修改目標對象會影響原來的對象
深拷貝冰垄，前面加true蹬癌，完全克隆，修改目標對象不會影響原來的對象（被拷貝的對象）

演示代碼

 <script>
        $(function() {
            // 1.合并數據
            var targetObj = {};
            var obj = {
                id: 1,
                name: "andy"
            };
            $.extend(targetObj, obj);
            console.log(targetObj);
   
            // 2. 會覆蓋 targetObj 里面原來的數據
            var targetObj = {
                id: 0
            };
            var obj = {
                id: 1,
                name: "andy"
            };
            $.extend(targetObj, obj);
            console.log(targetObj); 
     
            // 3. 
            var targetObj = {
                id: 0,
                msg: {
                    sex: '男'
                }
            };
            var obj = {
                id: 1,
                name: "andy",
                msg: {
                    age: 18
                }
            };
            $.extend(targetObj, obj);
            console.log(targetObj); // 會覆蓋targetObj 里面原來的數據id msg{age}
            // 1. 淺拷貝把原來對象里面的復雜數據類型地址拷貝給目標對象
            targetObj.msg.age = 20;
            console.log(targetObj);
            console.log(obj);
            // 2. 深拷貝把里面的數據完全復制一份給目標對象 如果里面有不沖突的屬性,會合并到一起 msg{sex age}
            $.extend(true, targetObj, obj);
            // console.log(targetObj); // 會覆蓋targetObj 里面原來的數據
            targetObj.msg.age = 20;
            console.log(targetObj); // msg :{sex: "男", age: 20}
            console.log(obj);
        })
    </script>

13. jQuery 多庫共存

? 實際開發(fā)中虹茶，很多項目連續(xù)開發(fā)十多年逝薪，jQuery版本不斷更新，最初的 jQuery 版本無法滿足需求蝴罪，這時就需要保證在舊有版本正常運行的情況下董济，新的功能使用新的jQuery版本實現，這種情況被稱為要门，jQuery 多庫共存虏肾。

語法

jQuery解決方案

把里面的$符號統一改成jQuery
```
jQuery("div");
```
用戶自定義，$.noConflict
```
var xx = $.noConflict();
xx("div");
```

演示代碼

<script>
    $(function() {
        // 讓jquery 釋放對$ 控制權 讓用自己決定
        var suibian = jQuery.noConflict();
        console.log(suibian("span"));
    })
</script>

14. jQuery 插件

? jQuery 功能比較有限欢搜，想要更復雜的特效效果封豪，可以借助于 jQuery 插件完成。這些插件也是依賴于jQuery來完成的炒瘟，所以必須要先引入jQuery文件吹埠，因此也稱為 jQuery 插件

? jQuery 插件常用的網站：

jQuery 插件庫 http://www.jq22.com/
jQuery 之家 http://www.htmleaf.com/

jQuery 插件使用步驟：
引入相關文件（jQuery 文件和插件文件）
復制相關html、css疮装、js (調用插件)

14.1 瀑布流插件（重點講解）

下載位置

http://www.htmleaf.com/jQuery

[圖片上傳失敗...(image-bffcfe-1597040360674)]

[圖片上傳失敗...(image-ca963d-1597040360674)]

代碼演示

? 插件的使用三點： 1. 引入css. 2.引入JS 3.引入html缘琅。（有的簡單插件只需引入html和js，甚至有的只需引入js）

1.引入css.

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
  
<!-- 下面的樣式代碼為頁面布局廓推，可以引入胯杭，也可以自己寫，自己設計頁面樣式受啥，一般為直接引入做个，方便 -->
<style type="text/css">
  #gallery-wrapper {
    position: relative;
    max-width: 75%;
    width: 75%;
    margin: 50px auto;
  }

  img.thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .white-panel {
    position: absolute;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    padding: 10px;
  }

  .white-panel h1 {
    font-size: 1em;
  }

  .white-panel h1 a {
    color: #A92733;
  }

  .white-panel:hover {
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    margin-top: -5px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
</style>

2.引入js.

<!-- 前兩個必須引入 -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<!-- 下面的為啟動瀑布流代碼，參數可調節(jié)屬性居暖，具體功能可參考readme.html -->
<script type="text/javascript">
    $(function() {
      $("#gallery-wrapper").pinterest_grid({
          no_columns: 5,
          padding_x: 15,
          padding_y: 10,
          margin_bottom: 50,
          single_column_breakpoint: 700
      });
    });
</script>

3.引入html.

    <!-- html結構一般為事先寫好太闺，很難修改結構，但可以修改內容及圖片的多少（article標簽） -->
    <section id="gallery-wrapper">
        <article class="white-panel">
            <img src="images/P_000.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_005.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_006.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_007.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
    </section>

總結：jQuery插件就是引入別人寫好的：html 蟀淮、css怠惶、js （有時也可以只引入一部分轧粟，讀懂后也可以修改部分內容）

14.2 圖片懶加載插件

? 圖片的懶加載就是：當頁面滑動到有圖片的位置策治，圖片才進行加載，用以提升頁面打開的速度及用戶體驗

代碼演示

? 懶加載只需引入html 和 js操作即可兰吟，此插件不涉及css

1.引入js

<!--必須在這里引入懶加載插件-->
<script src="js/EasyLazyload.min.js"></script>
<script>
    lazyLoadInit({
        showTime: 1100,
        onLoadBackEnd: function(i, e) {
            console.log("onLoadBackEnd:" + i);
        },
        onLoadBackStart: function(i, e) {
            console.log("onLoadBackStart:" + i);
        }
    });
</script>

2.引入html

 <img data-lazy-src="upload/floor-1-3.png" alt="">

14.3 全屏滾動插件

? 全屏滾動插件比較大通惫，所以，一般大型插件都會有幫助文檔混蔼，或者網站履腋。全屏滾動插件介紹比較詳細的網站為：

http://www.dowebok.com/demo/2014/77/

代碼演示

? 全屏滾動因為有多重形式悲雳，所以不一樣的風格html和css也不一樣评也，但是 js 變化不大。所以下面只演示js的引入偎蘸，html和css引入根據自己實際

項目需要使用哪種風格引入對應的HTML和CSS料按。

<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>
    $(function() {
        $('#dowebok').fullpage({
            sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],
            navigation: true
        });
    });
</script>

注意：實際開發(fā)奄侠，一般復制文件，然后在文件中進行修改和添加功能

14.4 bootstrap組件

? Bootstrap是 Twitter 公司設計的基于HTML载矿、CSS垄潮、JavaScript開發(fā)的簡潔、直觀闷盔、強悍的前端開發(fā)框架弯洗，他依靠jQuery實現牡整，且支持響應式

布局谣辞，使得 Web 開發(fā)更加方便快捷泥从。

? 凡是在軟件開發(fā)中用到了軟件的復用，被復用的部分都可以稱為組件祈餐，凡是在應用程序中已經預留接口的組件就是插件。Bootstrap組件使

用非常方便: 1.引入bootstrap相關css和js 2.去官網復制html

代碼演示

引入bootstrap相關css和js

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

去官網復制html的功能模塊

    <div class="container">
        <!-- Single button -->
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Action <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
    </div>

14.5 bootstrap插件（JS）

? bootstrap中的js插件其實也是組件的一部分离赫，只不過是需要js調用功能的組件渊胸，所以一般bootstrap的js插件一般會伴隨著js代碼（有的也可以

省略js，用屬性實現）切厘。

? 步驟： 1.引入bootstrap相關css和js 2.去官網復制html 3.復制js代碼，啟動js插件遗座。

代碼演示

引入bootstrap相關css和js

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

去官網復制html的功能模塊

<!-- 模態(tài)框 -->
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            里面就是模態(tài)框
        </div>
    </div>
</div>

復制js代碼馋记，啟動js插件筋帖。

<script>
    // 當我們點擊了自己定義的按鈕寄啼，就彈出模態(tài)框
    $(".myBtn").on("click", function() {
        // alert(11);
        $('#btn').modal()
    })
</script>

14.6 bootstrap案例-阿里百秀

1.通過調用組件實現導航欄
2.通過調用插件實現登錄
3.通過調用插件標簽頁實現 tab 欄

? 代碼實現略。(詳情參考源代碼)

15. 綜合案例: toDoList案例分析

15.1 案例：案例介紹

// 1. 文本框里面輸入內容乙帮，按下回車，就可以生成待辦事項
// 2. 點擊待辦事項復選框氢卡，就可以把當前數據添加到已完成事項里面。
// 3. 點擊已完成事項復選框筑悴，就可以把當前數據添加到待辦事項里面。
// 4. 但是本頁面內容刷新頁面不會丟失求摇。

15.2 案例：toDoList 分析

// 1. 刷新頁面不會丟失數據，因此需要用到本地存儲 localStorage
// 2. 核心思路： 不管按下回車摔刁，還是點擊復選框绑谣，都是把本地存儲的數據加載到頁面中，這樣保證刷新關閉頁面不會丟失數據
// 3. 存儲的數據格式：var todolist =  [{ title : ‘xxx’, done: false}]
// 4. 注意點1： 本地存儲 localStorage 里面只能存儲字符串格式 壤玫，因此需要把對象轉換為字符串 JSON.stringify(data)。
// 5. 注意點2： 獲取本地存儲數據猎贴，需要把里面的字符串轉換為對象格式JSON.parse() 我們才能使用里面的數據。

15.3 案例：toDoList 按下回車把新數據添加到本地存儲里面

// 1.切記： 頁面中的數據趁耗，都要從本地存儲里面獲取右冻，這樣刷新頁面不會丟失數據牍帚，所以先要把數據保存到本地存儲里面暗赶。
// 2.利用事件對象.keyCode判斷用戶按下回車鍵（13）。
// 3.聲明一個數組，保存數據激率。
// 4.先要讀取本地存儲原來的數據（聲明函數 getData()）招盲，放到這個數組里面曹货。
// 5.之后把最新從表單獲取過來的數據，追加到數組里面蜕衡。
// 6.最后把數組存儲給本地存儲 (聲明函數 savaDate())
$(function() {
    $("#title").on("keydown", function(e) {
        if(e.keyCode === 13) {
            // 獲取本地存儲
            var local = getData();
            // 保存local
            local.push({title: $(this).val(), done: false});
            // 更新存儲
            saveData(local);
            load();
        }
    })
    function getData() {
        var data = localStorage.getItem("todolist");
        if(data != null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    }
    function saveData(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }
    function load() {
        ...
    }
})

15.4 案例：toDoList 本地存儲數據渲染加載到頁面

// 1.因為后面也會經常渲染加載操作纳胧，所以聲明一個函數 load万皿，方便后面調用
// 2.先要讀取本地存儲數據。（數據不要忘記轉換為對象格式）
// 3.之后遍歷這個數據（$.each()）减余，有幾條數據，就生成幾個小li 添加到 ol 里面抒抬。
// 4.每次渲染之前，先把原先里面 ol 的內容清空做粤，然后渲染加載最新的數據怕品。
function load() {
        var data = getData();
        $('ol').empty();
        $.each(data, function(i, ele) {
            $("ol").prepend('<li><input type="checkbox"> <p>' + ele.title + '</p> <a href="javascript:;"></a></li>');
        })
}

15.5 案例：toDoList 刪除操作

// 1.點擊里面的a鏈接，不是刪除的li，而是刪除本地存儲對應的數據骑素。
// 2.核心原理：先獲取本地存儲數據末捣，刪除對應的數據，保存給本地存儲邦邦，重新渲染列表li
// 3.我們可以給鏈接自定義屬性記錄當前的索引號
// 4.根據這個索引號刪除相關的數據----數組的splice(i, 1)方法
// 5.存儲修改后的數據燃辖，然后存儲給本地存儲
// 6.重新渲染加載數據列表
// 7.因為a是動態(tài)創(chuàng)建的薪韩，我們使用on方法綁定事件
function load() {
        var data = getData();
        $('ol').empty();
        $.each(data, function(i, ele) {
            $("ol").prepend('<li><input type="checkbox"> <p>' + ele.title + '</p> <a href="javascript:;" id="' + i + '"></a></li>');//添加索引
        })
    }
$('ol').on('click', 'a', function() {
        // 先獲取本地存儲數據
        var data = getData();
        // 刪除對應的數據
        console.log();
        var index = $(this).attr('id');
        data.splice(index, 1);
        // 保存給本地存儲
        saveData(data);
        // 重新渲染列表li
        load();
    })

15.6 案例：toDoList 正在進行和已完成選項操作

// 1.當我們點擊了小的復選框罗捎，修改本地存儲數據，再重新渲染數據列表泻红。
// 2.點擊之后谊路，獲取本地存儲數據。
// 3.修改對應數據屬性 done 為當前復選框的checked狀態(tài)惨恭。
// 4.之后保存數據到本地存儲
// 5.重新渲染加載數據列表
// 6.load 加載函數里面，新增一個條件,如果當前數據的done為true 就是已經完成的轻黑，就把列表渲染加載到 ul 里面
// 7.如果當前數據的done 為false， 則是待辦事項抖拦，就把列表渲染加載到 ol 里面

function load() {
        var data = getData();
        $('ol, ul').empty();//清空
        $.each(data, function(i, ele) {//判斷渲染
            if(ele.done) {
                $("ul").prepend('<li><input type="checkbox" checked> <p>' + ele.title + '</p> <a href="javascript:;" id="' + i + '"></a></li>');
            } else {
                $("ol").prepend('<li><input type="checkbox"> <p>' + ele.title + '</p> <a href="javascript:;" id="' + i + '"></a></li>');
            }
        })
    }
// 當我們點擊了小的復選框复颈，修改本地存儲數據，再重新渲染數據列表
    $('ul, ol').on('click', 'input', function() {
        // 先獲取本地存儲數據
        var data = getData();
        // 刪除對應的數據
        var index = $(this).siblings('a').attr('id');
        data[index].done = $(this).prop('checked');
        console.log(data);
        
        // 保存給本地存儲
        saveData(data);
        // 重新渲染列表li
        load();
    })

15.7 案例：toDoList 統計正在進行個數和已經完成個數

// 1.在我們load 函數里面操作
// 2.聲明2個變量 ：todoCount 待辦個數  doneCount 已完成個數   
// 3.當進行遍歷本地存儲數據的時候帜讲， 如果 數據done為 false获黔， 則 todoCount++, 否則 doneCount++
// 4.最后修改相應的元素 text() 
function load() {
        var data = getData();
    //變量
        var todoCount = 0;
        var doneCount = 0;
        $('ol, ul').empty();
        $.each(data, function (i, ele) {
            if (ele.done) {
                $("ul").prepend('<li><input type="checkbox" checked> <p>' + ele.title + '</p> <a href="javascript:;" id="' + i + '"></a></li>');
                doneCount++;
            } else {
                $("ol").prepend('<li><input type="checkbox"> <p>' + ele.title + '</p> <a href="javascript:;" id="' + i + '"></a></li>');
                todoCount++;
            }
        })
        $('.todocount').text(todoCount);
        $('.donecount').text(doneCount);
    }

16. jQuery 尺寸、位置操作

? jQuery中獲取和設置元素尺寸和位置的API预茄，內容如下

16.1 jQuery 尺寸操作

? jQuery 尺寸操作包括元素寬高的獲取和設置

語法

width()/height()//獲取匹配元素 width和height大小
innerWidth()/innerHeight()//獲取元素 width和height + padding 
outerWidth()/outerHeight()//獲取元素 width和height + padding + border 大小 
outerWidth(true)/outerHeight(true)//獲取 width和height + padding + border + margin

無參則獲取，返回數字型
參數為數字诗宣，則修改相應值
參數不必寫單位

代碼演示

<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()  / outerHeight()  獲取設置元素 width和height + padding + border 大小 
            console.log($("div").outerWidth());

            // 4. outerWidth(true) / outerHeight(true) 獲取設置 width和height + padding + border + margin
            console.log($("div").outerWidth(true));
        })
    </script>
</body>

? 注意：有了這套 API 我們將可以快速獲取和子的寬高来破，至于其他屬性想要獲取和設置诅诱，還要使用 css() 等方法配合。

16.2 jQuery 位置操作

? jQuery的位置操作主要有三個： offset()炮沐、position()、scrollTop()/scrollLeft() , 具體介紹如下:

語法

設置和獲取元素偏移
- 設置和獲取被選元素相對于文檔的偏移位置，跟父級沒關系
- 有2個屬性left遏餐、top，獲取距離文檔左側的距離offset().left粹庞，距離文檔頂部的距離offset().top
- 可以傳入對象，設置元素偏移：offset({top: 10,left: 30});
position()獲取元素偏移
- 獲取被選元素相對于帶有定位的父級偏移坐標，父級沒定位延刘，則以文檔為準
- 該方法2個屬性left、top播掷，獲取距離定位父級左側/頂部的距離position().left/position().top
- 該方法只能獲取
scrollTop()/scrollLeft()
- 獲取和設置元素被卷去的頭部和左側
- 無參是獲取，參數為數字為設置（不帶單位）

代碼演示

<body>
    <div class="father">
        <div class="son"></div>
    </div>
        
    <div class="back">返回頂部</div>
    <div class="container"></div>
   
    <script>
        $(function() {
            // 1. 獲取設置距離文檔的位置（偏移） offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // });
      
            // 2. 獲取距離帶有定位父級位置（偏移） position   如果沒有帶有定位的父級，則以文檔為準
            // 這個方法只能獲取不能設置偏移
            console.log($(".son").position());
            // $(".son").position({
            //     top: 200,
            //     left: 200
            // });
      
            // 3. 被卷去的頭部
            $(document).scrollTop(100);
            // 被卷去的頭部 scrollTop()  / 被卷去的左側 scrollLeft()
            // 頁面滾動事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回頂部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文檔而是 html和body元素做動畫
            })
        })
    </script>
</body>

16.3 案例：帶有動畫的返回頂部

1.核心原理：使用animate動畫返回頂部。
2.animate動畫函數里面有個scrollTop 屬性，可以設置位置
3.但是是元素做動畫孤里，因此 $(“body,html”).animate({scrollTop: 0})

// 返回頂部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文檔而是 html和body元素做動畫
            })

16.4 案例：品優(yōu)購電梯導航（上）

1.當我們滾動到今日推薦模塊炸枣，就讓電梯導航顯示出來
2.點擊電梯導航頁面可以滾動到相應內容區(qū)域
3.核心算法：因為電梯導航模塊和內容區(qū)模塊一一對應的
4.當我們點擊電梯導航某個小模塊候引，就可以拿到當前小模塊的索引號
5.就可以把animate要移動的距離求出來：當前索引號內容區(qū)模塊它的offset().top
6.然后執(zhí)行動畫即可

$(function() {
    $(window).scroll(function() {
        if($(document).scrollTop() >= $('.recommend').offset().top) {
            $('.fixedtool').fadeIn();
        } else {
            $('.fixedtool').fadeOut();
        }
    })
})
$('.fixedtool li').on('click', function(i) {
        var index = $(this).index();
        var current = $('.floor .w').eq(index).offset().top;
        $('html, body').stop().animate({
            scrollTop: current
        })
        $(this).addClass('current').siblings().removeClass('current');
    })

16.5 案例：品優(yōu)購電梯導航（下）

1.當我們點擊電梯導航某個小li，當前小li 添加current類敦跌，兄弟移除類名
2.當我們頁面滾動到內容區(qū)域某個模塊澄干，左側電梯導航，相對應的小li模塊柠傍，也會添加current類麸俘，兄弟移除current類。
3.觸發(fā)的事件是頁面滾動，因此這個功能要寫到頁面滾動事件里面并级。
4.需要用到each，遍歷內容區(qū)域大模塊毁腿。 each里面能拿到內容區(qū)域每一個模塊元素和索引號
5.判斷的條件：被卷去的頭部大于等于內容區(qū)域里面每個模塊的offset().top
6.就利用這個索引號找到相應的電梯導航小li添加類稍计。

$(function() {
    var recommend = $('.recommend').offset().top;
    toggleTool()
    
    function toggleTool() {
        if($(document).scrollTop() >= recommend) {
            $('.fixedtool').fadeIn();
        } else {
            $('.fixedtool').fadeOut();
        }
    }
    $(window).scroll(function() {
        toggleTool()
        //
        $('.floor .w').each(function(i, ele) {
            if($(document).scrollTop() >= $(ele).offset().top) {
                $('.fixedtool li').eq(i).addClass('current').siblings().removeClass('current');
            }
        })
    })
    $('.fixedtool li').on('click', function(i) {
        var index = $(this).index();
        var current = $('.floor .w').eq(index).offset().top;
        $('html, body').stop().animate({
            scrollTop: current
        })
        $(this).addClass('current').siblings().removeClass('current');
    })
})