一、jQuery 介紹
1.1 JavaScript 庫
? JavaScript庫：即 library，是一個(gè)封裝好的特定的集合（方法和函數(shù)）。從封裝一大堆函數(shù)的角度理解庫，就是在這個(gè)庫中，封裝了很多預(yù)先定義好的函數(shù)在里面，比如動(dòng)畫animate、hide、show，比如獲取元素等。
簡單理解： 就是一個(gè)JS 文件，里面對我們原生js代碼進(jìn)行了封裝，存放到里面。這樣我們可以快速高效的使用這些封裝好的功能了。
比如 jQuery，就是為了快速方便的操作DOM，里面基本都是函數(shù)（方法）。
? 常見的JavaScript 庫：jQuery、Prototype、YUI、Dojo、Ext JS、移動(dòng)端的zepto等，這些庫都是對原生 JavaScript 的封裝，內(nèi)部都是用 JavaScript 實(shí)現(xiàn)的，我們主要學(xué)習(xí)的是 jQuery。
1.2 jQuery的概念
? jQuery總體概況如下 :
jQuery 是一個(gè)快速、簡潔的 JavaScript 庫，其設(shè)計(jì)的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。
j 就是 JavaScript； Query 查詢； 意思就是查詢js，把js中的DOM操作做了封裝，我們可以快速的查詢使用里面的功能。
jQuery 封裝了 JavaScript 常用的功能代碼，優(yōu)化了 DOM 操作、事件處理、動(dòng)畫設(shè)計(jì)和 Ajax 交互。
學(xué)習(xí)jQuery本質(zhì)： 就是學(xué)習(xí)調(diào)用這些函數(shù)（方法）。
jQuery 出現(xiàn)的目的是加快前端人員的開發(fā)速度，我們可以非常方便的調(diào)用和使用它，從而提高開發(fā)效率。
1.3 jQuery的優(yōu)點(diǎn)
- 輕量級。核心文件才幾十kb，不會影響頁面加載速度。
- 跨瀏覽器兼容，基本兼容了現(xiàn)在主流的瀏覽器。
- 鏈?zhǔn)骄幊?、隱式迭代。
- 對事件、樣式、動(dòng)畫支持，大大簡化了DOM操作。
- 支持插件擴(kuò)展開發(fā)。有著豐富的第三方的插件，例如：樹形菜單、日期控件、輪播圖等。
- 免費(fèi)、開源。
二、jQuery 的基本使用
2.1 jQuery 的下載
? jQuery的官網(wǎng)地址： https://jquery.com/，官網(wǎng)即可下載最新版本。
各個(gè)版本的下載：https://code.jquery.com/
? 版本介紹：
1x ：兼容 IE 678 等低版本瀏覽器， 官網(wǎng)不再更新
2x ：不兼容 IE 678 等低版本瀏覽器， 官網(wǎng)不再更新
3x ：不兼容 IE 678 等低版本瀏覽器， 是官方主要更新維護(hù)的版本
2.2. 體驗(yàn)jQuery
? 步驟：
- 引入jQuery文件。
- 在文檔最末尾插入 script 標(biāo)簽，書寫體驗(yàn)代碼。
- $('div').hide() 可以隱藏盒子。
2.3 jQuery的入口函數(shù)
? jQuery中常見的兩種入口函數(shù)：
// 第一種: 簡單易用。
$(function () {
... // 此處是頁面 DOM 加載完成的入口
}) ;
// 第二種: 繁瑣，但是也可以實(shí)現(xiàn)
$(document).ready(function(){
... // 此處是頁面DOM加載完成的入口
});
? 總結(jié)：
- 等著 DOM 結(jié)構(gòu)渲染完畢即可執(zhí)行內(nèi)部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝。
- 相當(dāng)于原生 js 中的 DOMContentLoaded。
- 不同于原生 js 中的 load 事件是等頁面文檔、外部的 js 文件、css文件、圖片加載完畢才執(zhí)行內(nèi)部代碼。
- 更推薦使用第一種方式。
2.4 jQuery中的頂級對象$
- $是 jQuery 的別稱，在代碼中可以使用 jQuery 代替，但一般為了方便，通常都直接使用 $ 。
- $是jQuery的頂級對象，相當(dāng)于原生JavaScript中的 window。把元素利用$包裝成jQuery對象，就可以調(diào)用jQuery 的方法。
2.5 jQuery 對象和 DOM 對象
? 使用 jQuery 方法和原生JS獲取的元素是不一樣的，總結(jié)如下 :
- 用原生 JS 獲取來的對象就是 DOM 對象
- jQuery 方法獲取的元素就是 jQuery 對象。
- jQuery 對象本質(zhì)是： 利用$對DOM 對象包裝后產(chǎn)生的對象（偽數(shù)組形式存儲）。
注意：
只有 jQuery 對象才能使用 jQuery 方法，DOM 對象則使用原生的 JavaScirpt 方法。
//1.DOM對象：用原生js獲取過來的對象就是DOM對象
getElementByTagName("div");
var myDiv = document.querySelector("div"); //myDiv是DOM對象
//2.jQuery對象：jQuery 方法獲取的元素就是 jQuery 對象，本質(zhì)是用$對DOM元素進(jìn)行了包裝
$("div"); //$("div")是一個(gè)jQuery對象
//3.jQuery對象只能使用jQuery方法，DOM 對象則使用原生的 JavaScirpt 方法。
myDiv.style.display = 'none';
myDiv.hide();//報(bào)錯(cuò)
$("div").hide();
$("div").style.display = 'none';//報(bào)錯(cuò)
2.6 jQuery 對象和 DOM 對象轉(zhuǎn)換
? DOM 對象與 jQuery 對象之間是可以相互轉(zhuǎn)換的。因?yàn)樵鷍s 比 jQuery 更大，原生的一些屬性和方法 jQuery沒有給我們封裝. 要想使用這些屬性和方法需要把jQuery對象轉(zhuǎn)換為DOM對象才能使用。
// 1.DOM對象轉(zhuǎn)換成jQuery對象，方法只有一種
var box = document.getElementById('box'); // 獲取DOM對象
var jQueryObject = $(box); // 把DOM對象轉(zhuǎn)換為 jQuery 對象
// 2.jQuery 對象轉(zhuǎn)換為 DOM 對象有兩種方法：
// 2.1 jQuery對象[索引值]
var domObject1 = $('div')[0]
// 2.2 jQuery對象.get(索引值)
var domObject2 = $('div').get(0)
總結(jié)：實(shí)際開發(fā)比較常用的是把DOM對象轉(zhuǎn)換為jQuery對象，這樣能夠調(diào)用功能更加強(qiáng)大的jQuery中的方法。
三、jQuery 選擇器
? 原生 JS 獲取元素方式很多，很雜，而且兼容性情況不一致，因此 jQuery 給我們做了封裝，使獲取元素統(tǒng)一標(biāo)準(zhǔn)。
3.1 基礎(chǔ)選擇器
$("選擇器") // 里面選擇器直接寫 CSS 選擇器即可，但是要加引號
3.2 層級選擇器
? 層級選擇器最常用的兩個(gè)分別為：后代選擇器和子代選擇器。
基礎(chǔ)選擇器和層級選擇器案例代碼
<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 篩選選擇器
? 篩選選擇器，顧名思義就是在所有的選項(xiàng)中選擇滿足條件的進(jìn)行篩選選擇。常見如下 :
案例代碼
<body>
<ul>
<li>多個(gè)里面篩選幾個(gè)</li>
<li>多個(gè)里面篩選幾個(gè)</li>
<li>多個(gè)里面篩選幾個(gè)</li>
<li>多個(gè)里面篩選幾個(gè)</li>
<li>多個(gè)里面篩選幾個(gè)</li>
<li>多個(gè)里面篩選幾個(gè)</li>
</ul>
<ol>
<li>多個(gè)里面篩選幾個(gè)</li>
<li>多個(gè)里面篩選幾個(gè)</li>
<li>多個(gè)里面篩選幾個(gè)</li>
<li>多個(gè)里面篩選幾個(gè)</li>
<li>多個(gè)里面篩選幾個(gè)</li>
<li>多個(gè)里面篩選幾個(gè)</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中的通過一個(gè)節(jié)點(diǎn)找另外一個(gè)節(jié)點(diǎn)，父、子、兄以外有所加強(qiáng)。
偏重于記憶，演示代碼略。
3.4 知識鋪墊
- jQuery 設(shè)置樣式
$('div').css('屬性', '值')
- jQuery 里面的排他思想
// 想要多選一的效果，排他思想：當(dāng)前元素設(shè)置樣式，其余的兄弟元素清除樣式。
$(this).css(“color”,”red”);
$(this).siblings().css(“color”,””);
- 隱式迭代
// 遍歷內(nèi)部 DOM 元素（偽數(shù)組形式存儲）的過程就叫做隱式迭代。
// 簡單理解：給匹配到的所有元素進(jìn)行循環(huán)遍歷，執(zhí)行相應(yīng)的方法，而不用我們再進(jìn)行循環(huán)，簡化我們的操作，方便我們調(diào)用。
$('div').hide(); // 頁面中所有的div全部隱藏，不用循環(huán)操作
- 鏈?zhǔn)骄幊?/li>
// 鏈?zhǔn)骄幊淌菫榱斯?jié)省代碼量，看起來更優(yōu)雅。
$(this).css('color', 'red').sibling().css('color', '');
3.5 案例：淘寶服飾精品案例
思路分析:
1.核心原理：鼠標(biāo)經(jīng)過左側(cè)盒子某個(gè)小li，就讓內(nèi)容區(qū)盒子相對應(yīng)圖片顯示，其余的圖片隱藏。
2.需要得到當(dāng)前小li 的索引號，就可以顯示對應(yīng)索引號的圖片
3.jQuery 得到當(dāng)前元素索引號 $(this).index()
4.中間對應(yīng)的圖片，可以通過 eq(index) 方法去選擇
5.顯示元素 show() 隱藏元素 hide()
? 代碼實(shí)現(xiàn)略。(詳情參考源代碼)
四、jQuery 樣式操作
? jQuery中常用的樣式操作有兩種：css() 和 設(shè)置類樣式方法
4.1 方法1: 操作 css 方法
? jQuery 可以使用 css 方法來修改簡單元素樣式； 也可以操作類，修改多個(gè)樣式。
? 常用以下三種形式 :
// 1.參數(shù)只寫屬性名，則是返回屬性值
var strColor = $(this).css('color');
// 2. 參數(shù)是屬性名，屬性值，逗號分隔，是設(shè)置一組樣式，屬性必須加引號，值如果是數(shù)字可以不用跟單位和引號
$(this).css(''color'', ''red'');
// 3. 參數(shù)可以是對象形式，方便設(shè)置多組樣式。屬性名和屬性值用冒號隔開， 屬性可以不用加引號
$(this).css({ "color":"white","font-size":"20px",backgroundSize:'100%'});
? 注意：css() 多用于樣式少時(shí)操作，多了則不太方便。屬性可以省略""，但如果是復(fù)合屬性需要使用駝峰命名法，不能用'-'
4.2 方法2: 設(shè)置類樣式方法
? 作用等同于以前的 classList，可以操作類樣式， 注意操作類里面的參數(shù)不要加點(diǎn)。
? 常用的三種設(shè)置類樣式方法：
// 1.添加類
$("div").addClass("current");
// 2.刪除類
$("div").removeClass("current");
// 3.切換類
$("div").toggleClass("current");
? 注意：
- 設(shè)置類樣式方法比較適合樣式多時(shí)操作，可以彌補(bǔ)css()的不足。
- 原生 JS 中 className 會覆蓋元素原先里面的類名，jQuery 里面類操作只是對指定類進(jìn)行操作，不影響原先的類名。classList操作的簡易版。
4.3 案例：tab 欄切換
思路分析:
1.點(diǎn)擊上部的li，當(dāng)前l(fā)i 添加current類，其余兄弟移除類。
2.點(diǎn)擊的同時(shí)，得到當(dāng)前l(fā)i 的索引號
3.讓下部里面相應(yīng)索引號的item顯示，其余的item隱藏
? 代碼實(shí)現(xiàn)略。(詳情參考源代碼)
五、jQuery 效果
? jQuery 給我們封裝了很多動(dòng)畫效果，最為常見的如下：
- 顯示隱藏：show() / hide() / toggle() ;
- 劃入畫出：slideDown() / slideUp() / slideToggle() ;
- 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
- 自定義動(dòng)畫：animate() ;
注意：
動(dòng)畫或者效果一旦觸發(fā)就會執(zhí)行，如果多次觸發(fā)，就造成多個(gè)動(dòng)畫或者效果排隊(duì)執(zhí)行。
jQuery為我們提供另一個(gè)方法，可以停止動(dòng)畫排隊(duì)：stop() ;
5.1 顯示隱藏
? 顯示隱藏動(dòng)畫，常見有三個(gè)方法：show() / hide() / toggle() ;
? 語法規(guī)范如下:
代碼演示
<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);
})
// 一般情況下，我們都不加參數(shù)直接顯示隱藏就可以了
});
</script>
</body>
5.2 滑入滑出
? 滑入滑出動(dòng)畫，常見有三個(gè)方法：slideDown() / slideUp() / slideToggle() ;
? 語法規(guī)范如下:
代碼演示
<body>
<button>下拉滑動(dòng)</button>
<button>上拉滑動(dòng)</button>
<button>切換滑動(dòng)</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 下滑動(dòng) slideDown()
$("div").slideDown();
})
$("button").eq(1).click(function() {
// 上滑動(dòng) slideUp()
$("div").slideUp(500);
})
$("button").eq(2).click(function() {
// 滑動(dòng)切換 slideToggle()
$("div").slideToggle(500);
});
});
</script>
</body>
5.3 淡入淡出
? 淡入淡出動(dòng)畫，常見有四個(gè)方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
? 語法規(guī)范如下:
代碼演示
<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() 這個(gè)速度和透明度要必須寫
$("div").fadeTo(1000, 0.5);
});
});
</script>
</body>
5.4 自定義動(dòng)畫
? 自定義動(dòng)畫非常強(qiáng)大，通過參數(shù)的傳遞可以模擬以上所有動(dòng)畫，方法為：animate() ;
? 語法規(guī)范如下:
代碼演示
<body>
<button>動(dòng)起來</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>
</body>
5.5 停止動(dòng)畫排隊(duì)
? 動(dòng)畫或者效果一旦觸發(fā)就會執(zhí)行，如果多次觸發(fā)，就造成多個(gè)動(dòng)畫或者效果排隊(duì)執(zhí)行。
? 停止動(dòng)畫排隊(duì)的方法為：stop() ;
- stop() 方法用于停止動(dòng)畫或效果。
- stop() 寫到動(dòng)畫或者效果的前面， 相當(dāng)于停止結(jié)束上一次的動(dòng)畫。
? 總結(jié): 每次使用動(dòng)畫之前，先調(diào)用 stop() ,在調(diào)用動(dòng)畫。
5.6 事件切換
? jQuery中為我們添加了一個(gè)新事件 hover() ; 功能類似 css 中的偽類 :hover 。介紹如下
語法
hover([over,]out) // 其中over和out為兩個(gè)函數(shù)
- over:鼠標(biāo)移到元素上要觸發(fā)的函數(shù)（相當(dāng)于mouseenter）
- out:鼠標(biāo)移出元素要觸發(fā)的函數(shù)（相當(dāng)于mouseleave）
- 如果只寫一個(gè)函數(shù)，則鼠標(biāo)經(jīng)過和離開都會觸發(fā)它
hover事件和停止動(dòng)畫排列案例
<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() {
// 鼠標(biāo)經(jīng)過
// $(".nav>li").mouseover(function() {
// // $(this) jQuery 當(dāng)前元素 this不要加引號
// // show() 顯示元素 hide() 隱藏元素
// $(this).children("ul").slideDown(200);
// });
// // 鼠標(biāo)離開
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp(200);
// });
// 1. 事件切換 hover 就是鼠標(biāo)經(jīng)過和離開的復(fù)合寫法
// $(".nav>li").hover(function() {
// $(this).children("ul").slideDown(200);
// }, function() {
// $(this).children("ul").slideUp(200);
// });
// 2. 事件切換 hover 如果只寫一個(gè)函數(shù)，那么鼠標(biāo)經(jīng)過和鼠標(biāo)離開都會觸發(fā)這個(gè)函數(shù)
$(".nav>li").hover(function() {
// stop 方法必須寫到動(dòng)畫的前面
$(this).children("ul").stop().slideToggle();
});
})
</script>
</body>
5.7 案例：王者榮耀手風(fēng)琴效果
思路分析:
1.鼠標(biāo)經(jīng)過某個(gè)小li 有兩步操作：
2.當(dāng)前小li 寬度變?yōu)?224px， 同時(shí)里面的小圖片淡出，大圖片淡入
3.其余兄弟小li寬度變?yōu)?9px， 小圖片淡入， 大圖片淡出
第一部分總結(jié)
六、jQuery 屬性操作
? jQuery 常用屬性操作有三種：prop() / attr() / data() ;
6.1 元素固有屬性值 prop()
? 所謂元素固有屬性就是元素本身自帶的屬性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。
語法
1.獲取屬性語法：prop("屬性")
2.設(shè)置屬性語法：prop("屬性","屬性值")
? 注意：prop() 除了普通屬性操作，更適合操作表單屬性：disabled / checked / selected 等。
6.2 元素自定義屬性值 attr()
? 用戶自己給元素添加的屬性，我們稱為自定義屬性。 比如給 div 添加 index =“1”。
語法
1.獲取屬性語法：attr("屬性")//類似原生getAttribute()
2.設(shè)置屬性語法:：attr("屬性","屬性值") //類似原生setAttribute()
該方法也可以獲取H5自定義屬性（如data-index）
? 注意：attr() 除了普通屬性操作，更適合操作自定義屬性。（該方法也可以獲取 H5 自定義屬性）
6.3 數(shù)據(jù)緩存 data()
? data() 方法可以在指定的元素上存取數(shù)據(jù)，并不會修改 DOM 元素結(jié)構(gòu)。一旦頁面刷新，之前存放的數(shù)據(jù)都將被移除。
語法
1.附加數(shù)據(jù)語法
$("div").data("name","value") //向被選元素附加數(shù)據(jù)
2.獲取數(shù)據(jù)語法
$("div").data("name") //向被選元素獲取數(shù)據(jù)
? 注意：同時(shí)，還可以讀取 HTML5 自定義屬性 data-index ，得到的是數(shù)字型。
演示代碼
<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. 數(shù)據(jù)緩存 data() 這個(gè)里面的數(shù)據(jù)是存放在元素的內(nèi)存里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 這個(gè)方法獲取data-index h5自定義屬性 第一個(gè) 不用寫data- 而且返回的是數(shù)字型
console.log($("div").data("index"));
})
</script>
</body>
6.4 案例：購物車案例模塊-全選
- 全選思路：里面3個(gè)小的復(fù)選框按鈕（j-checkbox）選中狀態(tài)（checked）跟著全選按鈕（checkall）走。
- 因?yàn)閏hecked 是復(fù)選框的固有屬性，此時(shí)我們需要利用prop()方法獲取和設(shè)置該屬性。
- 把全選按鈕狀態(tài)賦值給3小復(fù)選框就可以了。
- 當(dāng)我們每次點(diǎn)擊小的復(fù)選框按鈕，就來判斷：
- 如果小復(fù)選框被選中的個(gè)數(shù)等于3 就應(yīng)該把全選按鈕選上，否則全選按鈕不選。
- :checked 選擇器 :checked 查找被選中的表單元素。
七、 jQuery 文本屬性值
? jQuery的文本屬性值常見操作有三種：html() / text() / val() ; 分別對應(yīng)JS中的 innerHTML 、innerText 和 value 屬性。
7.1 jQuery內(nèi)容文本值
? 常見操作有三種：html() / text() / val() ; 分別對應(yīng)JS中的 innerHTML 、innerText 和 value 屬性，主要針對元素的內(nèi)容還有表單的值操作。
語法
- 普通元素內(nèi)容 html() （相當(dāng)于原生中的innerHTML）
html()//獲取元素的內(nèi)容
html("內(nèi)容")//設(shè)置元素的內(nèi)容 - 普通元素文本內(nèi)容 text() （相當(dāng)于原生的innerText）
text()//獲取元素的文本內(nèi)容
text("文本內(nèi)容")//設(shè)置元素的文本內(nèi)容 - 表單的值 val() （相當(dāng)于原生value）
val()//獲取表單的值
val("內(nèi)容")//設(shè)置表單的值
? 注意：html() 可識別標(biāo)簽，text() 不識別標(biāo)簽。
演示代碼
<body>
<div>
<span>我是內(nèi)容</span>
</div>
<input type="text" value="請輸入內(nèi)容">
<script>
// 1. 獲取設(shè)置元素內(nèi)容 html()
console.log($("div").html());
// $("div").html("123");
// 2. 獲取設(shè)置元素文本內(nèi)容 text()
console.log($("div").text());
$("div").text("123");
// 3. 獲取設(shè)置表單值 val()
console.log($("input").val());
$("input").val("123");
</script>
</body>
7.2 案例：購物車案例模塊-增減商品數(shù)量
1.核心思路：首先聲明一個(gè)變量，當(dāng)我們點(diǎn)擊+號（increment），就讓這個(gè)值++，然后賦值給文本框。
2.注意1： 只能增加本商品的數(shù)量， 就是當(dāng)前+號的兄弟文本框（itxt）的值。
3.修改表單的值是val() 方法
4.注意2： 這個(gè)變量初始值應(yīng)該是這個(gè)文本框的值，在這個(gè)值的基礎(chǔ)上++。要獲取表單的值
5.減號（decrement）思路同理，但是如果文本框的值是1，就不能再減了。
7.3 案例：購物車案例模塊-修改商品小計(jì)
1.核心思路：每次點(diǎn)擊+號或者-號，根據(jù)文本框的值 乘以 當(dāng)前商品的價(jià)格 就是 商品的小計(jì)
2.注意1： 只能增加本商品的小計(jì)， 就是當(dāng)前商品的小計(jì)模塊（p-sum）
3.修改普通元素的內(nèi)容是text() 方法
4.注意2： 當(dāng)前商品的價(jià)格，要把￥符號去掉再相乘 截取字符串 substr(1)
5.parents(‘選擇器’) 可以返回指定祖先元素
6.最后計(jì)算的結(jié)果如果想要保留2位小數(shù) 通過 toFixed(2) 方法
7.用戶也可以直接修改表單里面的值，同樣要計(jì)算小計(jì)。 用表單change事件
8.用最新的表單內(nèi)的值 乘以 單價(jià)即可 但是還是當(dāng)前商品小計(jì)
八、jQuery 元素操作
? jQuery 元素操作主要講的是用jQuery方法，操作標(biāo)簽的遍歷、創(chuàng)建、添加、刪除等操作。
8.1 遍歷元素
? jQuery 隱式迭代是對同一類元素做了同樣的操作。 如果想要給同一類元素做不同操作，就需要用到遍歷。
語法1
$("div").each(function(index,domEle){})
1.each()遍歷匹配的每一個(gè)元素，主要用DOM處理
2.回調(diào)函數(shù)有2個(gè)參數(shù)：index是每個(gè)元素的索引號，domEle是每個(gè)DOM元素對象，不是jQuery對象
3.所以要用jquery方法，需要轉(zhuǎn)換為jquery對象$(domEle)
? 注意：此方法用于遍歷 jQuery 對象中的每一項(xiàng)，回調(diào)函數(shù)中元素為 DOM 對象，想要使用 jQuery 方法需要轉(zhuǎn)換。
語法2
$.each(object,function(index,element){})
1.$.each()方法可用于遍歷任何對象，主要用于數(shù)據(jù)處理，比如數(shù)組、對象
2.里面的回調(diào)函數(shù)的參數(shù)有2個(gè)參數(shù)：index是每個(gè)元素的索引號，element是遍歷的內(nèi)容
? 注意：此方法用于遍歷 jQuery 對象中的每一項(xiàng)，回調(diào)函數(shù)中元素為 DOM 對象，想要使用 jQuery 方法需要轉(zhuǎn)換。
演示代碼
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// 如果針對于同一類元素做不同操作，需要用到遍歷元素（類似for，但是比for強(qiáng)大）
var sum = 0;
var arr = ["red", "green", "blue"];
// 1. each() 方法遍歷元素
$("div").each(function(i, domEle) {
// 回調(diào)函數(shù)第一個(gè)參數(shù)一定是索引號 可以自己指定索引號號名稱
// console.log(i);
// 回調(diào)函數(shù)第二個(gè)參數(shù)一定是 dom 元素對象，也是自己命名
// console.log(domEle); // 使用jQuery方法需要轉(zhuǎn)換 $(domEle)
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
// 2. $.each() 方法遍歷元素 主要用于遍歷數(shù)據(jù)，處理數(shù)據(jù)
// $.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 案例：購物車案例模塊-計(jì)算總計(jì)和總額
1.把所有文本框中的值相加就是總額數(shù)量，總計(jì)同理。
2.文本框里面的值不同，如果想要相加需要用 each() 遍歷，聲明一個(gè)變量做計(jì)數(shù)器，累加即可。
8.3 創(chuàng)建、添加、刪除
? jQuery方法操作元素的創(chuàng)建、添加、刪除方法很多，則重點(diǎn)使用部分，如下：
語法總和
- 創(chuàng)建
var li = $("<li></li>");
動(dòng)態(tài)第創(chuàng)建了一個(gè)<li> - 內(nèi)部添加
element.append("內(nèi)容")
$("ul").append(li)
把內(nèi)容放入匹配元素內(nèi)容最后面，類似原生appendChild
element.prepend("內(nèi)容")
把內(nèi)容放入匹配元素內(nèi)容最后面 - 外部添加
element.after("內(nèi)容")//把內(nèi)容放入目標(biāo)元素后面
element.before("內(nèi)容")//把內(nèi)容放入目標(biāo)元素前面 - 刪除元素
element.remove()//刪除匹配的元素（它本身）
element.empty()//刪除匹配元素的集合中所有的子節(jié)點(diǎn)
element.html("")//清空匹配元素的內(nèi)容
empty()和html("")作用等價(jià)
? 注意：以上只是元素的創(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 內(nèi)部添加
// $("ul").append(li); 內(nèi)部添加并且放到內(nèi)容的最后面
$("ul").prepend(li); // 內(nèi)部添加并且放到內(nèi)容的最前面
// 2.2 外部添加
var div = $("<div>我是后媽生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3. 刪除元素
// $("ul").remove(); 可以刪除匹配的元素 自殺
// $("ul").empty(); // 可以刪除匹配的元素里面的子節(jié)點(diǎn) 孩子
$("ul").html(""); // 可以清空匹配元素的內(nèi)容
})
</script>
</body>
8.4 案例：購物車案例模塊-刪除商品模塊
- 核心思路：把商品remove() 刪除元素即可
- 有三個(gè)地方需要?jiǎng)h除： 1. 商品后面的刪除按鈕 2. 刪除選中的商品 3. 清理購物車
- 商品后面的刪除按鈕： 一定是刪除當(dāng)前的商品，所以從 $(this) 出發(fā)
- 刪除選中的商品： 先判斷小的復(fù)選框按鈕是否選中狀態(tài)，如果是選中，則刪除對應(yīng)的商品
- 清理購物車： 則是把所有的商品全部刪掉
8.5 案例：購物車案例模塊-選中商品添加背景
- 核心思路：選中的商品添加背景，不選中移除背景即可
- 全選按鈕點(diǎn)擊：如果全選是選中的，則所有的商品添加背景，否則移除背景
- 小的復(fù)選框點(diǎn)擊： 如果是選中狀態(tài)，則當(dāng)前商品添加背景，否則移除背景
- 這個(gè)背景，可以通過類名修改，添加類和刪除類
九、jQuery 尺寸、位置操作
? jQuery中分別為我們提供了兩套快速獲取和設(shè)置元素尺寸和位置的API，方便易用，內(nèi)容如下。
9.1 jQuery 尺寸操作
? jQuery 尺寸操作包括元素寬高的獲取和設(shè)置，且不一樣的API對應(yīng)不一樣的盒子模型。
語法
代碼演示
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 獲取設(shè)置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 獲取設(shè)置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 獲取設(shè)置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 獲取設(shè)置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
</body>
? 注意：有了這套 API 我們將可以快速獲取和子的寬高，至于其他屬性想要獲取和設(shè)置，還要使用 css() 等方法配合。
9.2 jQuery 位置操作
? jQuery的位置操作主要有三個(gè)： offset()、position()、scrollTop()/scrollLeft() , 具體介紹如下:
語法
offset()
（1）獲取或者設(shè)置元素相當(dāng)于文檔的偏移坐標(biāo)，和父級沒關(guān)系
（2）該方法有2個(gè)屬性left、top。offset().top獲取元素距離文檔頂部的距離
（3）設(shè)置元素的偏移offset({top:10,left:30})position()
（1）用于返回被選元素相對于帶有定位的父級的偏移坐標(biāo)，如果父級都沒有定位，則以文檔為基準(zhǔn)
（2）該方法有2個(gè)屬性left、top。position().top獲取元素距離定位父級頂部的距離
（3）該方法只能獲取scrollTop/scrollLeft()
（1）設(shè)置或返回被選元素被卷去的頭部
（2）可選參數(shù)是不帶單位的數(shù)字，為設(shè)置被卷去的頭部
代碼演示
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="back">返回頂部</div>
<div class="container"></div>
<script>
$(function() {
// 1. 獲取設(shè)置距離文檔的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
// top: 200,
// left: 200
// });
// 2. 獲取距離帶有定位父級位置（偏移） position 如果沒有帶有定位的父級，則以文檔為準(zhǔn)
// 這個(gè)方法只能獲取不能設(shè)置偏移
console.log($(".son").position());
// $(".son").position({
// top: 200,
// left: 200
// });
// 3. 被卷去的頭部
$(document).scrollTop(100);
// 被卷去的頭部 scrollTop() / 被卷去的左側(cè) scrollLeft()
// 頁面滾動(dòng)事件
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元素做動(dòng)畫
})
})
</script>
</body>
9.3 案例：帶有動(dòng)畫的返回頂部
1.核心原理： 使用animate動(dòng)畫返回頂部。
2.animate動(dòng)畫函數(shù)里面有個(gè)scrollTop 屬性，可以設(shè)置位置
3.但是元素才能做動(dòng)畫，$(document)是無效的，因此 $(“body,html”).animate({scrollTop: 0})
9.4 案例： 品優(yōu)購電梯導(dǎo)航（上）
1.當(dāng)我們滾動(dòng)到 今日推薦 模塊，就讓電梯導(dǎo)航顯示出來
2.點(diǎn)擊電梯導(dǎo)航頁面可以滾動(dòng)到相應(yīng)內(nèi)容區(qū)域
3.核心算法：因?yàn)殡娞輰?dǎo)航模塊和內(nèi)容區(qū)模塊一一對應(yīng)的
4.當(dāng)我們點(diǎn)擊電梯導(dǎo)航某個(gè)小模塊，就可以拿到當(dāng)前小模塊的索引號
5.就可以把a(bǔ)nimate要移動(dòng)的距離求出來：當(dāng)前索引號內(nèi)容區(qū)模塊它的offset().top
6.然后執(zhí)行動(dòng)畫即可
? 代碼實(shí)現(xiàn)略。(詳情參考源代碼)
9.5 案例：品優(yōu)購電梯導(dǎo)航（下）
- 當(dāng)我們點(diǎn)擊電梯導(dǎo)航某個(gè)小li， 當(dāng)前小li 添加current類，兄弟移除類名
- 當(dāng)我們頁面滾動(dòng)到內(nèi)容區(qū)域某個(gè)模塊， 左側(cè)電梯導(dǎo)航，相對應(yīng)的小li模塊，也會添加current類， 兄弟移除current類。
- 觸發(fā)的事件是頁面滾動(dòng)，因此這個(gè)功能要寫到頁面滾動(dòng)事件里面。
- 需要用到each，遍歷內(nèi)容區(qū)域大模塊。 each里面能拿到內(nèi)容區(qū)域每一個(gè)模塊元素和索引號
- 判斷的條件： 被卷去的頭部 大于等于 內(nèi)容區(qū)域里面每個(gè)模塊的offset().top
- 就利用這個(gè)索引號找到相應(yīng)的電梯導(dǎo)航小li添加類。
第二部分總結(jié)
十、jQuery 事件注冊
? jQuery 為我們提供了方便的事件注冊機(jī)制，優(yōu)缺點(diǎn)如下：
- 優(yōu)點(diǎn): 操作簡單，且不用擔(dān)心事件覆蓋等問題。
- 缺點(diǎn): 普通的事件注冊不能做事件委托，且無法實(shí)現(xiàn)事件解綁，需要借助其他方法。一個(gè)元素如果要綁定多個(gè)事件，需一個(gè)個(gè)分開注冊。
語法
element.事件(function(){})
$("div").click(function(){事件處理程序})
其他事件名也和原生基本一致
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
演示代碼
<body>
<div></div>
<script>
$(function() {
// 1. 單個(gè)事件注冊
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
})
</script>
</body>
十一、jQuery 事件處理
? 因?yàn)槠胀ㄗ允录椒ǖ牟蛔?，jQuery又開發(fā)了多個(gè)處理方法，重點(diǎn)講解如下：
- on(): 用于事件綁定，目前最好用的事件綁定方法
- off(): 事件解綁
- trigger() / triggerHandler(): 事件觸發(fā)
11.1 事件處理 on() 綁定事件
? 因?yàn)槠胀ㄗ允录椒ǖ牟蛔?，jQuery又創(chuàng)建了多個(gè)新的事件綁定方法bind() / live() / delegate() / on()等，其中最好用的是: on()
語法
element.on(events,[selector],fn)
1.一個(gè)或多個(gè)用空格分割的事件類型，如click或keydown
2.元素的子元素選擇器
on()方法優(yōu)勢1:
可以綁定多個(gè)事件，多個(gè)事件各自對應(yīng)不同處理程序
$("div").on({
mouseover: function(){},
mouseout:function(){},
click:function(){}
})
如果事件處理程序相同
$("div").on("mouseover mouseout" ,function(){
$(this).toggleClass("current");
})
on()方法優(yōu)勢2:
可以事件委派操作，即把原來加給子元素身上的事件綁定在父元素身上，就是把事件委托給父元素。ul綁定了點(diǎn)擊事件，但是只有觸發(fā)對象是li。點(diǎn)擊li后事件冒泡到ul身上，ul的點(diǎn)擊事件就可以執(zhí)行處理程序。
$("ul").on('click','li',function(){
alert("Hello");
})
在此之前有bind()、live() delegate()等方法來處理事件綁定或者事件委派，現(xiàn)在都請用on來替代它們。
on()方法優(yōu)勢3:
動(dòng)態(tài)創(chuàng)建的元素，click()沒有辦法綁定事件，on()可以給動(dòng)態(tài)生成的元素綁定事件
$("div").on("click","p",function(){
alert("給動(dòng)態(tài)生成的元素綁定了click事件")
})
$("div").append($("<p>我是動(dòng)態(tài)創(chuàng)建的p</p>"))
演示代碼
<body>
<div></div>
<ul>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
</ul>
<ol></ol>
<script>
$(function() {
// (1) on可以綁定1個(gè)或者多個(gè)事件處理程序
// $("div").on({
// mouseenter: function() {
// $(this).css("background", "skyblue");
// },
// click: function() {
// $(this).css("background", "purple");
// }
// });
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以實(shí)現(xiàn)事件委托（委派）
// click 是綁定在ul 身上的，但是 觸發(fā)的對象是 ul 里面的小li
// $("ul li").click();//隱式迭代，循環(huán)給每個(gè)里注冊了事件
$("ul").on("click", "li", function() {
alert(11);
});
// (3) on可以給未來動(dòng)態(tài)創(chuàng)建的元素綁定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后來創(chuàng)建的</li>");
$("ol").append(li);
})
</script>
</body>
11.2 案例：發(fā)布微博案例
1.點(diǎn)擊發(fā)布按鈕， 動(dòng)態(tài)創(chuàng)建一個(gè)小li，放入文本框的內(nèi)容和刪除按鈕， 并且添加到ul 中。
2.點(diǎn)擊的刪除按鈕，可以刪除當(dāng)前的微博留言。
11.3 事件處理 off() 解綁事件
? 當(dāng)某個(gè)事件上面的邏輯，在特定需求下不需要的時(shí)候，可以把該事件上的邏輯移除，這個(gè)過程我們稱為事件解綁。jQuery 為我們提供 了多種事件解綁方法：die() / undelegate() / off() 等，甚至還有只觸發(fā)一次的事件綁定方法 one()，在這里我們重點(diǎn)講解一下 off() ;
語法
off()方法可以移除通過on()方法添加的事件處理程序
element.off() //解綁該元素的所有事件處理程序
element.off("某個(gè)事件")
$("div").off("click") //解綁div上的點(diǎn)擊事件處理程序
$("ul").off("click","li") //解除事件委托
如果有的事件只想觸發(fā)一次，可以使用one()來綁定事件
演示代碼
<body>
<div></div>
<ul>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
</ul>
<p>我是一個(gè)P標(biāo)簽</p>
<script>
$(function() {
// 事件綁定
$("div").on({
click: function() {
console.log("我點(diǎn)擊了");
},
mouseover: function() {
console.log('我鼠標(biāo)經(jīng)過了');
}
});
$("ul").on("click", "li", function() {
alert(11);
});
// 1. 事件解綁 off
// $("div").off(); // 這個(gè)是解除了div身上的所有事件
$("div").off("click"); // 這個(gè)是解除了div身上的點(diǎn)擊事件
$("ul").off("click", "li");
// 2. one() 但是它只能觸發(fā)事件一次
$("p").one("click", function() {
alert(11);
})
})
</script>
</body>
11.4 事件處理 trigger() 自動(dòng)觸發(fā)事件
有些時(shí)候，在某些特定的條件下，我們希望某些事件能夠自動(dòng)觸發(fā), 比如輪播圖自動(dòng)播放功能跟點(diǎn)擊右側(cè)按鈕一致。可以利用定時(shí)器自動(dòng)觸發(fā)右側(cè)按鈕點(diǎn)擊事件，不必鼠標(biāo)點(diǎn)擊觸發(fā)。由此 jQuery 為我們提供了兩個(gè)自動(dòng)觸發(fā)事件 trigger() 和 triggerHandler() ;
語法
第一種：trigger()
element.click() //第一種簡寫形式
element.trigger("type") //第二種自動(dòng)觸發(fā)模式
第二種：triggerHandler()
element.triggerHandler(type) //第三種自動(dòng)觸發(fā)模式
triggerHandler模式不會觸發(fā)元素的默認(rèn)行為，這是和前兩種的區(qū)別。比如表單被點(diǎn)擊后默認(rèn)會有光標(biāo)在里面閃爍，triggerHandler不會觸發(fā)這個(gè)。
演示代碼
<body>
<div></div>
<input type="text">
<script>
$(function() {
// 綁定事件
$("div").on("click", function() {
alert(11);
});
// 自動(dòng)觸發(fā)事件
// 1. 元素.事件()
// $("div").click();會觸發(fā)元素的默認(rèn)行為
// 2. 元素.trigger("事件")
// $("div").trigger("click");會觸發(fā)元素的默認(rèn)行為
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不會觸發(fā)元素的默認(rèn)行為
$("input").on("focus", function() {
$(this).val("你好嗎");
});
// 一個(gè)會獲取焦點(diǎn)，一個(gè)不會
$("div").triggerHandler("click");
// $("input").triggerHandler("focus");
});
</script>
</body>
十二、jQuery 事件對象
? jQuery 對DOM中的事件對象 event 進(jìn)行了封裝，兼容性更好，獲取更方便，使用變化不大。事件被觸發(fā)，就會有事件對象的產(chǎn)生。
語法
element.on("events",[selector],function(event){})
阻止默認(rèn)行為 event.preventDefault();或者return false
阻止冒泡 event.stopPropagation();
演示代碼
<body>
<div></div>
<script>
$(function() {
$(document).on("click", function() {
console.log("點(diǎn)擊了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("點(diǎn)擊了div");
event.stopPropagation();
})
})
</script>
</body>
注意：jQuery中的 event 對象使用，可以借鑒 API 和 DOM 中的 event 。
十三、 jQuery 拷貝對象
? jQuery中分別為我們提供了兩套快速獲取和設(shè)置元素尺寸和位置的API，方便易用，內(nèi)容如下。
如果想要把某個(gè)對象拷貝（合并）給另一個(gè)對象使用，可以使用$.extend()方法
語法
$.extend([deep],target,object1,[objectN])
1.deep：如果設(shè)為true是深拷貝，默認(rèn)是false淺拷貝
2.target：要拷貝其他對象的那個(gè)目標(biāo)對象
3.object1：待拷貝到target的第一個(gè)對象
4.淺拷貝是把被拷貝對象中復(fù)雜數(shù)據(jù)類型的地址拷貝給目標(biāo)對象，修改目標(biāo)對象的復(fù)雜數(shù)據(jù)類型中屬性的值會影響被拷貝對象，修改簡單數(shù)據(jù)類型的值不會影響被拷貝對象
5.深拷貝是完全克隆，把里面的數(shù)據(jù)完全復(fù)制一份給目標(biāo)對象，遇到復(fù)雜數(shù)據(jù)類型會在內(nèi)存新開辟一個(gè)地址存儲。如果復(fù)雜數(shù)據(jù)類型的值里面有不沖突的屬性,會合并到一起。修改目標(biāo)對象不會影響被拷貝對象
演示代碼
$(function() {
// 1.合并數(shù)據(jù)
var targetObj1 = {};
var obj1 = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj1, obj1);
console.log(targetObj1);
// 2. 會覆蓋 targetObj 里面原來的數(shù)據(jù)
var targetObj = {
id: 0,
msg: {
sex: '男'
}
};
var obj = {
id: 1,
name: "andy",
msg: {
age: 18
}
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj); // 會覆蓋targetObj 里面原來的數(shù)據(jù)
// // 1. 淺拷貝把原來對象里面的復(fù)雜數(shù)據(jù)類型地址拷貝給目標(biāo)對象
targetObj.msg.age = 20;
targetObj.id = 3; //簡單數(shù)據(jù)類型修改不會影響obj
console.log(targetObj);
console.log(obj);
// 2. 深拷貝把里面的數(shù)據(jù)完全復(fù)制一份給目標(biāo)對象 如果里面有不沖突的屬性,會合并到一起
$.extend(true, targetObj, obj);
console.log(targetObj); // 會覆蓋targetObj 里面原來的數(shù)據(jù)
targetObj.msg.age = 20;
console.log(targetObj); // msg :{sex: "男", age: 20}
console.log(obj);
})
十四、jQuery 多庫共存
實(shí)際開發(fā)中，很多項(xiàng)目連續(xù)開發(fā)十多年，jQuery版本不斷更新，最初的 jQuery 版本無法滿足需求，這時(shí)就需要保證在舊有版本正常運(yùn)行的情況下，新的功能使用新的jQuery版本實(shí)現(xiàn)，這種情況被稱為，jQuery 多庫共存。jQuery使用$作為標(biāo)識符，而其他的js庫也可能使用$作為標(biāo)識符，這樣一起使用會引起沖突。
//$符號簡單封裝
function $(ele){
return document.querySelector(ele);
}
$("div")
$.each() //報(bào)錯(cuò)
解決方案
1.把$符號統(tǒng)一改為jQuery，比如jQuery("div")
2.jQuery標(biāo)識($)重新賦給自定義的名稱：如var myQ=$.noConflict() var myQ=jQuery.noConflict()
演示代碼
$(function() {
// 讓jquery 釋放對$ 控制權(quán) 讓用戶自己決定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
})
十五、jQuery 插件
jQuery 功能比較有限，想要更復(fù)雜的特效效果，可以借助于 jQuery 插件完成。 這些插件也是依賴于jQuery來完成的，所以必須要先引入
jQuery文件，因此也稱為 jQuery 插件。
? jQuery 插件常用的網(wǎng)站：
- jQuery 插件庫 http://www.jq22.com/
- jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步驟：
- 引入相關(guān)文件。（jQuery 文件 和 插件文件）
- 復(fù)制相關(guān)html、css、js (調(diào)用插件)。
15.1 瀑布流插件（重點(diǎn)講解）
? 我們學(xué)習(xí)的第一個(gè)插件是jQuery之家的開源插件，瀑布流。我們將重點(diǎn)詳細(xì)講解，從找到插件所在網(wǎng)頁，然后點(diǎn)擊下載代碼，到插件的使用等，后面的插件使用可參考瀑布流插件的使用。
代碼演示
插件的使用三點(diǎn)： 1. 引入css. 2.引入JS 3.引入html。 （有的簡單插件只需引入html和js，甚至有的只需引入js）
- 引入css.
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- 下面的樣式代碼為頁面布局，可以引入，也可以自己寫，自己設(shè)計(jì)頁面樣式，一般為直接引入，方便 -->
<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>
- 引入js.
<!-- 前兩個(gè)必須引入 -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<!-- 下面的為啟動(dòng)瀑布流代碼，參數(shù)可調(diào)節(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>
- 引入html.
<!-- html結(jié)構(gòu)一般為事先寫好，很難修改結(jié)構(gòu)，但可以修改內(nèi)容及圖片的多少（article標(biāo)簽） -->
<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>
總結(jié)：jQuery插件就是引入別人寫好的：html 、css、js （有時(shí)也可以只引入一部分，讀懂后也可以修改部分內(nèi)容）
15.2 圖片懶加載插件
? 圖片的懶加載就是：當(dāng)頁面滑動(dòng)到有圖片的位置，圖片才進(jìn)行加載，用以提升頁面打開的速度及用戶體驗(yàn)。js文件引用和調(diào)用必須寫在DOM后面
代碼演示
? 懶加載只需引入html 和 js操作 即可，此插件不涉及css。
- 引入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>
- 引入html
<img data-lazy-src="upload/floor-1-3.png" alt="">
15.3 全屏滾動(dòng)插件
? 全屏滾動(dòng)插件比較大，所以，一般大型插件都會有幫助文檔，或者網(wǎng)站。全屏滾動(dòng)插件介紹比較詳細(xì)的網(wǎng)站為：
http://www.dowebok.com/demo/2014/77/
代碼演示
? 全屏滾動(dòng)因?yàn)橛卸嘀匦问?，所以不一樣的風(fēng)格html和css也不一樣，但是 js 變化不大。所以下面只演示js的引入，html和css引入根據(jù)自己實(shí)際
項(xiàng)目需要使用哪種風(fēng)格引入對應(yīng)的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>
注意：實(shí)際開發(fā)，一般復(fù)制文件，然后在文件中進(jìn)行修改和添加功能。
15.4 bootstrap組件
Bootstrap是 Twitter 公司設(shè)計(jì)的基于HTML、CSS、JavaScript開發(fā)的簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，他依靠jQuery實(shí)現(xiàn)，且支持響應(yīng)式布局，使得 Web 開發(fā)更加方便快捷。
?凡是在軟件開發(fā)中用到了軟件的復(fù)用，被復(fù)用的部分都可以稱為組件，凡是在應(yīng)用程序中已經(jīng)預(yù)留接口的組件就是插件。Bootstrap組件使用非常方便: 1.引入bootstrap相關(guān)css和js 2.去官網(wǎng)復(fù)制html
代碼演示
- 引入bootstrap相關(guān)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>
- 去官網(wǎng)復(fù)制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>
15.5 bootstrap插件（JS）
? bootstrap中的js插件其實(shí)也是組件的一部分，只不過是需要js調(diào)用功能的組件，所以一般bootstrap的js插件一般會伴隨著js代碼（有的也可以省略js，用屬性實(shí)現(xiàn)）。
? 步驟： 1.引入bootstrap相關(guān)css和js 2.去官網(wǎng)復(fù)制html 3.復(fù)制js代碼，啟動(dòng)js插件。
代碼演示
- 引入bootstrap相關(guān)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>
- 去官網(wǎng)復(fù)制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>
- 復(fù)制js代碼，啟動(dòng)js插件。
<script>
// 當(dāng)我們點(diǎn)擊了自己定義的按鈕，就彈出模態(tài)框
$(".myBtn").on("click", function() {
// alert(11);
$('#btn').modal()
})
</script>
15.6 bootstrap案例-阿里百秀
- 通過調(diào)用組件實(shí)現(xiàn)導(dǎo)航欄
- 通過調(diào)用插件實(shí)現(xiàn)登錄
- 通過調(diào)用插件標(biāo)簽頁實(shí)現(xiàn) tab 欄
? 代碼實(shí)現(xiàn)略。(詳情參考源代碼)
十六、綜合案例: toDoList案例分析
16.1 案例：案例介紹
// 1. 文本框里面輸入內(nèi)容，按下回車，就可以生成待辦事項(xiàng)。
// 2. 點(diǎn)擊待辦事項(xiàng)復(fù)選框，就可以把當(dāng)前數(shù)據(jù)添加到已完成事項(xiàng)里面。
// 3. 點(diǎn)擊已完成事項(xiàng)復(fù)選框，就可以把當(dāng)前數(shù)據(jù)添加到待辦事項(xiàng)里面。
// 4. 但是本頁面內(nèi)容刷新頁面不會丟失。
16.2 案例：toDoList 分析
// 1. 刷新頁面不會丟失數(shù)據(jù)，因此需要用到本地存儲 localStorage
// 2. 核心思路： 不管按下回車，還是點(diǎn)擊復(fù)選框，都是把本地存儲的數(shù)據(jù)加載到頁面中，這樣保證刷新關(guān)閉頁面不會丟失數(shù)據(jù)
// 3. 存儲的數(shù)據(jù)格式：var todolist = [{ title : ‘xxx’, done: false}]
// 4. 注意點(diǎn)1： 本地存儲 localStorage 里面只能存儲字符串格式 ，因此需要把對象轉(zhuǎn)換為字符串 JSON.stringify(data)。
// 5. 注意點(diǎn)2： 獲取本地存儲數(shù)據(jù)，需要把里面的字符串轉(zhuǎn)換為對象格式JSON.parse() 我們才能使用里面的數(shù)據(jù)。
16.3 案例：toDoList 按下回車把新數(shù)據(jù)添加到本地存儲里面
// 1.切記： 頁面中的數(shù)據(jù)，都要從本地存儲里面獲取，這樣刷新頁面不會丟失數(shù)據(jù)，所以先要把數(shù)據(jù)保存到本地存儲里面。
// 2.利用事件對象.keyCode判斷用戶按下回車鍵（13）。
// 3.聲明一個(gè)數(shù)組，保存數(shù)據(jù)。
// 4.先要讀取本地存儲原來的數(shù)據(jù)（聲明函數(shù) getData()），放到這個(gè)數(shù)組里面。
// 5.之后把最新從表單獲取過來的數(shù)據(jù)，追加到數(shù)組里面。
// 6.最后把數(shù)組存儲給本地存儲 (聲明函數(shù) savaDate())
16.4 案例：toDoList 本地存儲數(shù)據(jù)渲染加載到頁面
// 1. 因?yàn)楹竺嬉矔?jīng)常渲染加載操作，所以聲明一個(gè)函數(shù) load，方便后面調(diào)用
// 2. 先要讀取本地存儲數(shù)據(jù)。（數(shù)據(jù)不要忘記轉(zhuǎn)換為對象格式）
// 3. 之后遍歷這個(gè)數(shù)據(jù)（$.each()），有幾條數(shù)據(jù)，就生成幾個(gè)小li 添加到 ol 里面。
// 4. 每次渲染之前，先把原先里面 ol 的內(nèi)容清空，然后渲染加載最新的數(shù)據(jù)。
16.5 案例：toDoList 刪除操作
// 1. 點(diǎn)擊里面的a鏈接，不是刪除的li，而是刪除本地存儲對應(yīng)的數(shù)據(jù)。
// 2. 核心原理：先獲取本地存儲數(shù)據(jù)，刪除對應(yīng)的數(shù)據(jù)，保存給本地存儲，重新渲染列表li
// 3. 我們可以給鏈接自定義屬性記錄當(dāng)前的索引號
// 4. 根據(jù)這個(gè)索引號刪除相關(guān)的數(shù)據(jù)----數(shù)組的splice(i, 1)方法
// 5. 存儲修改后的數(shù)據(jù)，然后存儲給本地存儲
// 6. 重新渲染加載數(shù)據(jù)列表
// 7. 因?yàn)閍是動(dòng)態(tài)創(chuàng)建的，我們使用on方法綁定事件
16.6 案例：toDoList 正在進(jìn)行和已完成選項(xiàng)操作
// 1. 當(dāng)我們點(diǎn)擊了小的復(fù)選框，修改本地存儲數(shù)據(jù)，再重新渲染數(shù)據(jù)列表。
// 2. 點(diǎn)擊之后，獲取本地存儲數(shù)據(jù)。
// 3. 修改對應(yīng)數(shù)據(jù)屬性 done 為當(dāng)前復(fù)選框的checked狀態(tài)。
// 4. 之后保存數(shù)據(jù)到本地存儲
// 5. 重新渲染加載數(shù)據(jù)列表
// 6. load 加載函數(shù)里面，新增一個(gè)條件,如果當(dāng)前數(shù)據(jù)的done為true 就是已經(jīng)完成的，就把列表渲染加載到 ul 里面
// 7. 如果當(dāng)前數(shù)據(jù)的done 為false， 則是待辦事項(xiàng)，就把列表渲染加載到 ol 里面
16.7 案例：toDoList 統(tǒng)計(jì)正在進(jìn)行個(gè)數(shù)和已經(jīng)完成個(gè)數(shù)
// 1. 在我們load 函數(shù)里面操作
// 2. 聲明2個(gè)變量 ：todoCount 待辦個(gè)數(shù) doneCount 已完成個(gè)數(shù)
// 3. 當(dāng)進(jìn)行遍歷本地存儲數(shù)據(jù)的時(shí)候， 如果 數(shù)據(jù)done為 false， 則 todoCount++, 否則 doneCount++
// 4. 最后修改相應(yīng)的元素 text()
第三部分總結(jié)
