吐槽
資訊專欄INFORMATION COLUMN
摘要：相對(duì)論極大地改變了人類對(duì)宇宙和自然的常識(shí)性觀念，提出了同時(shí)的相對(duì)性四維時(shí)空彎曲時(shí)空等全新的概念。狹義相對(duì)性原理是相對(duì)論的兩個(gè)基本假定，在目前實(shí)驗(yàn)的觀測下，物體的運(yùn)動(dòng)與相對(duì)論是吻合很好的，所以目前普遍認(rèn)為相對(duì)論是正確的理論。
7. jQuery 里的事件機(jī)制
javascript和HTML之間的交互是通過用戶和瀏覽器操作頁面時(shí)引發(fā)的事件來處理的。jQuery不僅提供了更加優(yōu)雅的事件處理語法，而且極大地增強(qiáng)了事件處理能力。7.1 加載 DOM
前面章節(jié)我們已經(jīng)對(duì)比了window.onload()和$(document).ready()兩種方法的區(qū)別。兩種都是入口函數(shù)，只不過前者是js中的而后者是jQ中的。并且領(lǐng)著之間還是有區(qū)別的：
1、執(zhí)行時(shí)機(jī)：
window.onload()方法是等到頁面中所有元素加載完畢之后，才執(zhí)行，即javascript此時(shí)才可以訪問網(wǎng)頁中的任何元素。而jQuery使用$(document).ready()方法，可以在DOM載入就緒時(shí)就對(duì)其進(jìn)行操縱并調(diào)用執(zhí)行它所綁定的函數(shù)。也就是說在jQ中，不需要等待所有圖片加載完再執(zhí)行。
但是就會(huì)有個(gè)問題，當(dāng)獲取圖片寬高的時(shí)候，可能獲取不到。不過jQ中多帶帶提出了一個(gè)頁面加載的方法——load()方法，如果這個(gè)處理函數(shù)綁定給window對(duì)象則會(huì)在所有內(nèi)容加載完畢之后觸發(fā)。
$(window).load(function(){
// 執(zhí)行代碼
});
上面的代碼，等同于js中的：
window.onload = function(){
// 執(zhí)行代碼
}
2、多次使用：
在javascript中入口函數(shù)只能寫一次，如果寫多個(gè)，下面會(huì)將上面的覆蓋掉：
window.onload = function(){
alert(123);
}
window.onload = function(){
alert(456); // 頁面只會(huì)彈出 456
}
在jQuery中，入口函數(shù)可以寫多次，不會(huì)出現(xiàn)覆蓋的情況：
$(document).ready(function(){
alert(123); // 123
});
$(document).ready(function(){
alert(456); // 456
});
3、簡寫方式：
javascript中沒有簡寫方式，但是在jQ中有簡寫方式：
// 1-原始版寫法
$(document).ready(function(){
// 執(zhí)行代碼
});
// 2-簡化寫法，document可以省略
$().ready(function(){
// 執(zhí)行代碼
});
// 3-簡化寫法
$(function(){
// 執(zhí)行代碼
});
7.2 事件綁定
1、什么是事件綁定
在文檔裝載完成之后，如果打算為元素綁定事件來完成某些操作，則可以使用bind()方法，bind()方法的調(diào)用格式為：
bind(type [, data] ,fn);
bind()方法有三個(gè)參數(shù)：
type：事件類型，類型包括：blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等。
[,data]：可選參數(shù)，作為event.data屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象。
fn：用來綁定的處理函數(shù)。
示例代碼： [ 38-jq事件機(jī)制-事件綁定.html ]
什么是相對(duì)論？
相對(duì)論是關(guān)于時(shí)空和引力的基本理論，主要由阿爾伯特·愛因斯坦創(chuàng)立，依據(jù)研究的對(duì)象不同分為狹義相對(duì)論和廣義相對(duì)論。相對(duì)論的基本假設(shè)是相對(duì)性原理，即物理定律與參照系的選擇無關(guān)。
狹義相對(duì)論和廣義相對(duì)的區(qū)別是，前者討論的是勻速直線運(yùn)動(dòng)的參照系（慣性參照系）之間的物理定律，后者則推廣到具有加速度的參照系中（非慣性系），并在等效原理的假設(shè)下，廣泛應(yīng)用于引力場中。相對(duì)論極大地改變了人類對(duì)宇宙和自然的“常識(shí)性”觀念，提出了“同時(shí)的相對(duì)性”、“四維時(shí)空”、“彎曲時(shí)空”等全新的概念。它發(fā)展了牛頓力學(xué)，推動(dòng)物理學(xué)發(fā)展到一個(gè)新的高度。
狹義相對(duì)性原理是相對(duì)論的兩個(gè)基本假定，在目前實(shí)驗(yàn)的觀測下，物體的運(yùn)動(dòng)與相對(duì)論是吻合很好的，所以目前普遍認(rèn)為相對(duì)論是正確的理論。
效果圖：
注意：
is()方法，可以用來判斷一個(gè)元素是否包含某一屬性。
當(dāng)一個(gè)選擇器多次出現(xiàn)的時(shí)候，可以用一個(gè)變量將它緩存起來。
2、簡寫綁定事件
jQuery提供了一套簡寫的方法，簡寫的方法和bind()的使用方法類似，實(shí)現(xiàn)效果也相同，但是可以減少代碼量：
$(function(){
$("h2").click(function(){
// 執(zhí)行代碼
});
});
7.3 合成事件
jQuery 有兩個(gè)合成事件：hover()方法和toggle()方法(這里的toggle跟另一個(gè)方法toggle不是一個(gè)方法，這里的toggle方法因?yàn)橹孛脑?，已?jīng)在jQ1.8版本以后棄用了)。
1、hover()方法：
hover(enter,leaver); // enter 和 leaver 是兩個(gè)函數(shù)
hover()方法用于模擬光標(biāo)懸停事件。當(dāng)光標(biāo)移動(dòng)到元素上的時(shí)候會(huì)觸發(fā)第一個(gè)函數(shù)(enter)，當(dāng)光標(biāo)離開元素的時(shí)候會(huì)觸發(fā)第二個(gè)函數(shù)(leaver)。
示例代碼： [ 39-jq事件機(jī)制-合成事件hover.html ]
$(function() {
// hover 方法
$("h2").hover(enter, leaver);
var $content = $("h2").next();
// 鼠標(biāo)進(jìn)入的時(shí)候觸發(fā)的函數(shù)
function enter() {
$content.show();
}
// 鼠標(biāo)離開時(shí)觸發(fā)的函數(shù)
function leaver() {
$content.hide();
}
});
2、toggle()方法：此方法自1.8版本以后，已棄用
toggle(fn1,fn2,...fnN);
toggle()方法，模擬的是鼠標(biāo)單擊事件，當(dāng)點(diǎn)擊第一次的時(shí)候，觸發(fā)對(duì)應(yīng)的第一個(gè)函數(shù)(fn1)，當(dāng)點(diǎn)擊第二次的時(shí)候，觸發(fā)對(duì)應(yīng)的第二個(gè)函數(shù)(fn2)，一直到最后一個(gè)函數(shù)的時(shí)候，再點(diǎn)擊就會(huì)循環(huán)到第一個(gè)函數(shù)，就這樣一直循環(huán)切換。
另外一個(gè) toggle() 方法，是切換元素的可見狀態(tài)，如果元素是可見的，事件觸發(fā)之后，就會(huì)切換成不可見。
$("h2").click(function(){
$(this).next().toggle(); // 如果元素一開始是隱藏的，點(diǎn)擊之后就會(huì)切換成顯示。
});
7.4 事件冒泡
在前面特效篇里面，我們已經(jīng)介紹了什么是事件冒泡，這里不再累贅，簡單來說，就是一個(gè)元素包含另一個(gè)元素，兩個(gè)元素同時(shí)綁定了點(diǎn)擊事件，當(dāng)我點(diǎn)擊里面元素的時(shí)候，會(huì)同時(shí)觸發(fā)兩個(gè)事件函數(shù)，這就是事件冒泡。
具體產(chǎn)生的原理，和解決辦法請(qǐng)點(diǎn)擊這個(gè)鏈接，這里會(huì)有處理兼容性的詳細(xì)步驟。
示例代碼： [ 40-jq事件機(jī)制-事件冒泡.html ]
提示信息
提示信息
提示信息
效果圖：
我們可以看到，明明點(diǎn)擊的是最里面的盒子，但是三個(gè)點(diǎn)擊事件都同時(shí)觸發(fā)了。
1、事件對(duì)象：
由于在IE-DOM和標(biāo)準(zhǔn)DOM實(shí)現(xiàn)事件對(duì)象的方法各不相同，所以需要處理兼容性。在jQuery中，已經(jīng)將我們封裝好了。 直接在觸發(fā)事件函數(shù)里面?zhèn)饕粋€(gè)參數(shù)：
$("element").bind("click",function(event){
// 執(zhí)行代碼
});
2、阻止事件冒泡：
阻止事件的方法存也在兼容性，同樣的jQ中已經(jīng)封裝好，直接使用stopPropagation()方法來阻止事件冒泡。
示例代碼： [ 41-jq事件機(jī)制-阻止事件冒泡.html ]
$(function() {
$(".box").click(function(e) { // 事件對(duì)象
$(this).children("p").text(".box被觸發(fā)了");
e.stopPropagation(); // 阻止事件冒泡
});
$(".box1").click(function(e) {
$(this).children("p").text(".box1被觸發(fā)了");
e.stopPropagation();
});
$(".box2").click(function(e) {
$(this).children("p").text(".box2被觸發(fā)了");
e.stopPropagation();
});
});
效果圖：
3、阻止默認(rèn)行為：
網(wǎng)頁中有很多元素都有默認(rèn)行為，例如，單擊超鏈接后會(huì)跳轉(zhuǎn)、單擊提交按鈕后表單會(huì)提交，有時(shí)候我們需要阻止元素的默認(rèn)行為。
在jQ中提供了一個(gè)方法來阻止元素的默認(rèn)行為：preventDefault
不加阻止默認(rèn)行為時(shí)的效果：
示例代碼： [ 42-jq事件機(jī)制-阻止默認(rèn)行為.html ]
效果圖：
4、return false：
如果想要同時(shí)對(duì)事件停止冒泡和阻止默認(rèn)行為，可以有一種默認(rèn)的簡寫方式：return false。
5、事件捕獲：
在jQ中不支持事件捕獲，如果想要事件捕獲的話，請(qǐng)參考原生的js。7.5 事件對(duì)象的屬性
1、event.type：
該方法可以獲取到事件的類型。
$("a").click(function(event){
console.log(event.type); // 打印a標(biāo)簽點(diǎn)擊之后的事件類型 打印 ==> click
return false; // 阻止a標(biāo)簽?zāi)J(rèn)跳轉(zhuǎn)事件
});
2、event.stopPropagation()方法：
上面已經(jīng)提過了，該方法是阻止事件冒泡。
3、event.preventDefault()方法：
上面已經(jīng)提過了，該方法是阻止事件默認(rèn)行為。
4、event.target：
該方法的作用是獲取到觸發(fā)事件的元素。
$("a").click(function(event){
console.log(event.target); // 打印 ==> a
return false; // 阻止a標(biāo)簽?zāi)J(rèn)跳轉(zhuǎn)事件
});
5、event.pageX 和 event.pageY：
該方法的作用，是分別獲取到光標(biāo)相對(duì)于頁面的x坐標(biāo)和y坐標(biāo)，如果頁面上有滾動(dòng)條的話，還要加上滾動(dòng)條的寬度和高度。
6、event.which
該方法的作用是在鼠標(biāo)單擊事件中獲取到鼠標(biāo)的左、中、右鍵；在鍵盤事件中獲取鍵盤的按鍵。
比如獲取鼠標(biāo)的按鍵：
$("a").mousedown(function(event){
console.log(event.which); // 鼠標(biāo)左鍵==> 1 鼠標(biāo)中鍵==> 2 鼠標(biāo)右鍵==> 3
return false; // 阻止a標(biāo)簽?zāi)J(rèn)跳轉(zhuǎn)事件
});
比如獲取鍵盤的按鍵：
$("input[text]").keyup(function(event){
console.log(event.which); // 對(duì)應(yīng)按下的鍵盤碼
});
7、event.metaKey：
該方法是針對(duì)不同瀏覽器，獲取到7.6 移除事件按鍵。
當(dāng)我們想要移除一個(gè)事件的時(shí)候，可以使用unbind()方法。
unbind([type].[data]);
第一個(gè)參數(shù)是事件類型，第二個(gè)參數(shù)是將要移除的函數(shù)：
如果沒有參數(shù)，直接刪除所有的綁定的事件；
如果提供了事件類型作為參數(shù)，那只刪除該類型的綁定事件；
如果把在綁定時(shí)傳遞的處理函數(shù)作為第二個(gè)參數(shù)，則只有這個(gè)特定的事件處理函數(shù)會(huì)被刪除。
示例代碼： [ 43-jq事件機(jī)制-移除事件.html ]
效果圖：
7.7 模擬操作什么是模擬操作呢？我們可以看到前面的單擊事件，都需要手動(dòng)去觸發(fā)，模擬操作就是可以自動(dòng)觸發(fā)click，而不需要用戶主動(dòng)點(diǎn)擊。
一進(jìn)入頁面就會(huì)自動(dòng)彈出“呵呵”，其中 $("#btn").click();，也可以達(dá)到同樣的效果。
trigger()方法觸發(fā)事件后，會(huì)執(zhí)行瀏覽器默認(rèn)操作：
$("input").trigger("focus");
上面的代碼不僅會(huì)觸發(fā)元素綁定的focus事件，也會(huì)使input元素本身得到焦點(diǎn)(這就是瀏覽器的默認(rèn)操作)。
triggerHandler()方法：
如果你只想觸發(fā)綁定的focus事件，而不想執(zhí)行瀏覽器默認(rèn)操作，可以使用triggerHandler()方法。
$("input").triggerHandler("focus");
7.8 事件委托
事件委托，首先按字面的意思就能看出來，是將事件交由別人來執(zhí)行，再聯(lián)想到事件冒泡，是不是想到了？對(duì)，就是將子元素的事件通過冒泡的形式交由父元素來執(zhí)行。
舉個(gè)例子：
假如想要給多個(gè)li都注冊(cè)點(diǎn)擊事件，只需要給li循環(huán)遍歷，再添加點(diǎn)擊事件，這種方法固然簡單，但是假如有100個(gè)、1000個(gè)li的時(shí)候，這里的DOM操無形之中就繁瑣了。并且當(dāng)我們動(dòng)態(tài)添加li元素的時(shí)候，這些li是沒有點(diǎn)擊事件的。但是這些只要講點(diǎn)擊事件交給父元素來執(zhí)行，就能實(shí)現(xiàn)了。
1、on + 注冊(cè)事件：
除了bind方法綁定事件之外，在jQuery1.7版本之后，新添了一種方法：on()方法用來綁定事件，off()方法用來解除綁定事件。on()方法既可以注冊(cè)事件，還可以注冊(cè)委托事件。
$(element).on(type,[selector],fn);
參數(shù)詳解：
type：字符串，事件類型，如：click、mouseover...；
selector：可選，字符串，用于過濾出被選中的元素中能觸發(fā)事件的后代元素。如果選擇器是 null 或者忽略了該選擇器，那么被選中的元素總是能觸發(fā)事件；
fn：事件被觸發(fā)執(zhí)行的函數(shù)。
示例代碼：
111111
111111
111111
111111
123456
效果圖：
第二個(gè)參數(shù)其實(shí)就相當(dāng)于一個(gè)過濾器的作用，給div里面的p注冊(cè)委托事件。在執(zhí)行順序上，會(huì)先執(zhí)行元素自己的事件，再去執(zhí)行綁定的事件，最后執(zhí)行父元素的事件。
當(dāng)?shù)诙€(gè)參數(shù)傳進(jìn)去的時(shí)候，就想當(dāng)于給過濾的元素注冊(cè)委托事件。
2、delegate 注冊(cè)委托事件：
delegate只能注冊(cè)委托事件。
$(fatheElement).delegate(selector,type,fn);
參數(shù)詳解：
fatheElement：父元素；
selector：可選，字符串，用于過濾出被選中的元素中能觸發(fā)事件的后代元素。如果選擇器是 null 或者忽略了該選擇器，那么被選中的元素總是能觸發(fā)事件；
type：事件類型；
fn：事件被觸發(fā)執(zhí)行的函數(shù)。
7.9 其他用法1、綁定多個(gè)事件類型：
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over"); // 當(dāng)鼠標(biāo)進(jìn)入的時(shí)候，該元素的class屬性切換為over 鼠標(biāo)離開時(shí)class切換為先前的值
});
2、添加事件的命名空間：
$("div").bind("click.plugin",function(){
alert(123);
});
$("div").bind("mouseover.plugin",function(){
alert(456);
});
$("div").bind("dbclick",function(){
alert(666);
});
$("button").click(function(){
$("div").unbind(".plugin");
});
其中.plugin就是命名空間，當(dāng)點(diǎn)擊button按鈕的時(shí)候，就刪除了事件的命名空間.plugin，此時(shí)對(duì)應(yīng)的事件也會(huì)被移除。
相同的事件，不同的命名空間：
$("div").bind("click.plugin",function(){
alert(456);
});
$("div").bind("click",function(){
alert(666);
});
$("button").click(function(){
$("div").trigger("click!"); // 注意后面的感嘆號(hào)
});
當(dāng)點(diǎn)擊div的時(shí)候，會(huì)同時(shí)觸發(fā)click.plugin和click事件，如果點(diǎn)擊button只會(huì)觸發(fā)click事件，而不會(huì)觸發(fā)click.plugin事件。trigger("click!")，后面感嘆號(hào)表示的是匹配所有不在命名空間中的click方法。
8. jQuery 動(dòng)畫相對(duì)于原生js，jQuery中的動(dòng)畫更加的方便，更加的強(qiáng)大。8.1 show()方法 和 hide()方法
當(dāng)一個(gè)元素調(diào)用show()方法的時(shí)候，會(huì)將該元素的display設(shè)置為block，當(dāng)調(diào)用hide()方法的時(shí)候，會(huì)將該元素的display設(shè)置為none。
$("h2").bind("mouseover",function(){
$(this).next().show(); // 鼠標(biāo)進(jìn)入的時(shí)候 h2 下一個(gè)兄弟元素顯示
}).bind("mouseout",function(){
$(this).next().hide(); // 鼠標(biāo)離開的時(shí)候 h2 下一個(gè)兄弟元素隱藏
})
此時(shí)還沒有動(dòng)畫的效果，下面給他們加上動(dòng)畫效果
下面的代碼表示的是，元素在600ms內(nèi)顯示出來：
$("element").show(600);
下面的代碼表示的是，元素在300ms內(nèi)隱藏起來：
$("element").hide(300);
示例代碼： [ 45-jq動(dòng)畫-show&hide.html ]
鼠標(biāo)經(jīng)過&離開
相對(duì)論是關(guān)于時(shí)空和引力的基本理論，主要由阿爾伯特·愛因斯坦創(chuàng)立，依據(jù)研究的對(duì)象不同分為狹義相對(duì)論和廣義相對(duì)論。相對(duì)論的基本假設(shè)是相對(duì)性原理，即物理定律與參照系的選擇無關(guān)。
效果圖：
我們可以看到，不管是show還是hide的時(shí)候，元素的寬、高和不透明度都是在慢慢增加或者減小的。
8.2 fadeIn()方法 和 fadeOut()方法與show、hide方法不同的是，fadeIn和fadeOut方法只改變?cè)氐牟煌该鞫?，不?huì)去改變寬高。
下面的代碼表示的是元素淡入的效果，其中也可以傳時(shí)間：
$("element").fadeIn();
下面的代碼表示的是元素淡出的效果：
$("element").fadeOut();
示例代碼： [ 46-jq動(dòng)畫-fadeIn&fadeOut.html ]
$(function() {
$("h4").bind("mouseover", function() {
$(this).next().fadeIn();
}).bind("mouseout", function() {
$(this).next().fadeOut();
});
});
效果圖：
8.3 slideUp()方法 和 slideDown()方法slideUp()方法和slideDown()方法只會(huì)改變?cè)氐母叨?，如果一個(gè)元素的display屬性值為“none”，調(diào)用slideDown()方法的時(shí)候元素由上至下延伸顯示。slideUp()正好相反，元素將由下到上縮短隱藏。
示例代碼： [ 47-jq動(dòng)畫-slideDown&slideUp.html ]
$(function() {
$("h4").bind("mouseover", function() {
$(this).next().slideDown();
}).bind("mouseout", function() {
$(this).next().slideUp();
});
});
效果圖：
8.4 自定義動(dòng)畫方法 animate()前面幾種類型動(dòng)畫，比較單一，很多時(shí)候不能滿足于用戶的需求，但是在jQ中還有一個(gè)自定義動(dòng)畫animate，非常強(qiáng)大。
animate(params,speed,easing,callback);
參數(shù)說明如下：
params：一個(gè)包含樣式和值的對(duì)象，比如{p1:"val1",p2:"val2",...}；
speed：動(dòng)畫執(zhí)行速度(可選)，默認(rèn)400；
easing：表示過度使用哪種緩動(dòng)函數(shù)(默認(rèn)swing，jQ內(nèi)部還支持一個(gè)linear)
callback：在動(dòng)畫執(zhí)行完之后，執(zhí)行的函數(shù)(可選)。
1、簡單的動(dòng)畫：
效果圖：
2、累加、累減動(dòng)畫：
通過累加一個(gè)值讓元素從當(dāng)前位置，累加到900的位置
$("#box2").animate({
left: "+=900" // 在當(dāng)前位置累加到 900
}, 1000);
3、多重動(dòng)畫：
同時(shí)執(zhí)行多個(gè)動(dòng)畫
$("#box3").click(function() {
$(this).animate({
left: "300",
height: "200px",
width: "200px",
top: "200px"
}, 2000);
});
效果圖：
我們可以看到所有的變化都是同時(shí)進(jìn)行的。
按順序執(zhí)行多個(gè)動(dòng)畫
$("#box4").click(function() {
$(this).animate({
left: "400px",
height: "150px",
opacity: "1"
}, 3000).animate({
top: "150px",
width: "150px"
}, 3000).fadeOut("slow");
});
效果圖：
4、延遲動(dòng)畫：
在動(dòng)畫執(zhí)行中如果想要對(duì)某一段動(dòng)畫進(jìn)行延遲操作，可以使用delay()方法。
$("#box5").click(function() {
$(this).animate({
left: "400px",
height: "150px",
opacity: "1"
}, 3000)
.delay(1000)
.animate({
top: "150px",
width: "150px"
}, 3000).fadeOut("slow");
});
效果圖：
5、動(dòng)畫隊(duì)列：
一組元素上的效果：
當(dāng)在一個(gè)animate()方法中應(yīng)用多個(gè)屬性時(shí)，動(dòng)畫是同時(shí)發(fā)生的；
當(dāng)以鏈?zhǔn)降膶懛☉?yīng)用到動(dòng)畫方法時(shí)，動(dòng)畫是按照順序發(fā)生的。
多組元素上的動(dòng)畫：
默認(rèn)情況下，幾組動(dòng)畫是同時(shí)發(fā)生的；
當(dāng)以回調(diào)形式應(yīng)用動(dòng)畫方式時(shí)，動(dòng)畫按照回調(diào)順序發(fā)生的。
6、停止動(dòng)畫：
如果需要在某處停止動(dòng)畫需要使用stop()方法。
stop([clearQueue],[gotoEnd]);
兩個(gè)參數(shù)都是可選的，都為布爾值，clearQueue表示是否要清空未執(zhí)行完的動(dòng)畫隊(duì)列。gotoEnd表示的是直接將正在執(zhí)行的動(dòng)畫跳轉(zhuǎn)到末狀態(tài)。直接使用stop()方法，則會(huì)立即停止當(dāng)前正在執(zhí)行的動(dòng)畫。
不明白的小伙伴，參考8.6小節(jié)，第二個(gè)案例 《動(dòng)畫下拉菜單欄》
8.5 其他動(dòng)畫方法1、toggle()方法：
toggle()方法可以切換元素的可見狀態(tài)，如果元素是可見的，則切換為隱藏。如果元素是隱藏的，則切換為可見。
$("#btn1").click(function() {
$(this).next().toggle();
});
效果圖：
只要循環(huán)點(diǎn)擊h4，它的下一個(gè)兄弟元素就會(huì)循環(huán)切換。
2、slideToggle()方法：
通過高度變化來切換匹配元素的可見性。
$("#btn2").click(function() {
$(this).next().slideToggle();
});
效果圖：
3、fadeTo()方法：
fadeTo()方法可以將不透明度設(shè)置到指定的值。
$("#btn3").click(function() {
$(this).next().fadeTo(600, 0.5); // 600表示的是執(zhí)行時(shí)間 0.5 表示目標(biāo)值
});
效果圖：
4、fadeToggle()方法：
fadeToggle()方法可以切換不透明度。
$("#btn4").click(function() {
$(this).next().fadeToggle();
});
效果圖：
8.6 jQuery 動(dòng)畫案例下面通過幾個(gè)簡單的例子，鞏固一下jQuery動(dòng)畫的知識(shí)。
1、呼吸燈版輪播圖：
在實(shí)現(xiàn)原理上，與前面特效篇的是不同的，這里改變的是圖片的不透明度opacity，并且不需要讓所有li左浮動(dòng)，ul也不需要設(shè)置一個(gè)很寬的寬度。在jQ中操作更加的簡單。
樣式上：
大盒子相對(duì)定位，圖片的li絕對(duì)定位，讓所有的圖片疊加在一起；
給所有的圖片li設(shè)置隱藏屬性，第一張圖片需要顯示；
js上：
定義一個(gè)index用來記錄當(dāng)前點(diǎn)擊的張數(shù)；
當(dāng)點(diǎn)擊右箭頭的時(shí)候，讓對(duì)應(yīng)的圖片li，fadeIn，其余的兄弟元素fadeOut，同時(shí)讓對(duì)應(yīng)的小圓點(diǎn)添加current類，其余的兄弟元素移除這個(gè)類；
點(diǎn)擊左箭頭只需將index--，再進(jìn)行判斷一下，其他的與點(diǎn)擊右箭頭原理是一樣的。
示例代碼： [ 50-jq動(dòng)畫-案例-呼吸燈版輪播圖.html ]
效果圖：
2、動(dòng)畫下拉菜單欄：
動(dòng)畫下拉菜單欄，主要實(shí)現(xiàn)原理還是運(yùn)用jQ里面的兩個(gè)動(dòng)畫slideDown和slideUp，并且配合stop方法。
先看一下，如果不加stop()方法，會(huì)是一個(gè)什么效果：
我們可以看到一個(gè)效果，當(dāng)光標(biāo)移到第一個(gè)“一級(jí)菜單”的時(shí)候，觸發(fā)動(dòng)畫效果，但是動(dòng)畫效果還沒結(jié)束，我就將光標(biāo)移進(jìn)了第二個(gè)菜單，觸發(fā)第二個(gè)菜單下拉效果。所以導(dǎo)致了動(dòng)畫效果與光標(biāo)不一致，此時(shí)只需要在光標(biāo)移入、移出之前加上stop()方法，就能解決這個(gè)問題。
stop()方法會(huì)結(jié)束當(dāng)前正在進(jìn)行的動(dòng)畫效果，并立即執(zhí)行隊(duì)列中的下一個(gè)動(dòng)畫。
示例代碼： [ 51-jq動(dòng)畫-案例-動(dòng)畫下拉菜單.html ]
效果圖：
3、手風(fēng)琴：
實(shí)現(xiàn)原理：
給外部大盒子設(shè)置一個(gè)與圖片大小一致的寬高，并且設(shè)置相對(duì)定位
還是采用ul，li結(jié)構(gòu)，li設(shè)置寬高，與圖片大小一致，設(shè)置絕對(duì)定
動(dòng)態(tài)的給li添加背景圖片，因?yàn)?b>li絕對(duì)定位的原因，此時(shí)所有的li都疊在一起
動(dòng)態(tài)的給每個(gè)li設(shè)置left值(left*i)，這時(shí)候li就會(huì)依次排開
大盒子還要設(shè)置一個(gè)overflow-hidden屬性，將多余的隱藏掉
給每個(gè)li注冊(cè)鼠標(biāo)鼠標(biāo)經(jīng)過事件，然后根據(jù)下面推算出的規(guī)律(當(dāng)前鼠標(biāo)經(jīng)過的索引index，他之前包括他自己的left值都是，設(shè)定的最小值乘以對(duì)應(yīng)的索引。而他后面的會(huì)將設(shè)定的最小值乘以對(duì)應(yīng)的索引后再加上450，這里的450不是一個(gè)固定值，根據(jù)規(guī)律找出來的)進(jìn)行判斷，設(shè)置各自的left值；
鼠標(biāo)離開的時(shí)候再讓所有的盒子恢復(fù)到一開始的位置，每個(gè)li顯示等分的寬度
大盒子沒有overflow-hidden的時(shí)候：
畫個(gè)圖，理解一下：
找規(guī)律：
結(jié)合上面的圖片，我們可以找到一個(gè)規(guī)律
當(dāng)鼠標(biāo)在第1個(gè)li上的時(shí)候，li下標(biāo)index為0：
index：0 left：0
index：1 left：500px
index：2 left：550px
index：3 left：600px
index：4 left：650px
當(dāng)鼠標(biāo)在第2個(gè)li上的時(shí)候，li下標(biāo)index為1：
index：0 left：0
index：1 left：50px
index：2 left：550px
index：3 left：600px
index：4 left：650px
當(dāng)鼠標(biāo)在第3個(gè)li上的時(shí)候，li下標(biāo)index為2：
index：0 left：0
index：1 left：50px
index：2 left：100px
index：3 left：600px
index：4 left：650px
看出規(guī)律了嗎？
當(dāng)對(duì)應(yīng)li的下標(biāo)<=鼠標(biāo)懸停的的下標(biāo)上的時(shí)候left值 是50*i
當(dāng)對(duì)應(yīng)li的下標(biāo)>鼠標(biāo)懸停的的下標(biāo)上的時(shí)候left值 是50*i + ,450(450不是固定的值，是經(jīng)過計(jì)算出來的)
示例代碼： [ 52-jq動(dòng)畫-案例-手風(fēng)琴.html ]
效果圖：
4、彈幕效果：
獲取輸入框的的 value 值；并生成 span 標(biāo)簽
將 span 標(biāo)簽添加到 頁面中，隨機(jī)顏色 隨機(jī)高度 span動(dòng)畫從右向左
到達(dá)最左邊的時(shí)候刪除 span 標(biāo)簽(不刪除會(huì)隨著輸入的內(nèi)容越來越多影響性能)
示例代碼： [ 53-jq動(dòng)畫-案例-彈幕效果.html ]
吐槽
效果圖：
9. jQuery 里的 Ajax 操作Ajax全稱“Asynchronous JavaScript and XML”（異步的JavaScript和XML）。它的出現(xiàn)揭開了無刷新更新頁面的新時(shí)代。具體的實(shí)現(xiàn)方式以及Ajax的優(yōu)缺點(diǎn)，在前面的一篇文章[《js 進(jìn)階知識(shí)-Ajax篇》]()已經(jīng)講得很詳細(xì)了，不明白的小伙伴，可以先去學(xué)習(xí)下原生js是如何實(shí)現(xiàn)Ajax的。
jQuery對(duì)Ajax操作進(jìn)行了封裝，在jQuery中$.ajax()方法屬于最底層的方法，第2層是load()、$.get()和$.post()方法，第3層就是$.getScript()和$.getJSON()方法。
9.1 load()方法1、載入HTML文檔
load()方法是jQuery中最為簡單和常用的Ajax方法，能載入遠(yuǎn)程HTML代碼并插入DOM中。它的結(jié)構(gòu)為：
load(url[,data][,callback]);
參數(shù)詳解：
| 參數(shù)名稱 | 類型 | 說明 |
|---|---|---|
| url | String | 請(qǐng)求HTML頁面的URL地址 |
| data（可選） | Object | 發(fā)送至服務(wù)器的key/value數(shù)據(jù) |
| callback（可選） | Function | 請(qǐng)求完成時(shí)的回調(diào)函數(shù)，無論請(qǐng)求成功還是失敗 |
示例代碼：
首先新建一個(gè)data.html的文件，里面模擬的是請(qǐng)求的數(shù)據(jù)：
李四：
頂樓上
王五：
66666
再創(chuàng)建一個(gè)主頁面，index.html：
已有評(píng)論：
效果圖：
上面的例子可以看出來，開發(fā)人員只需要使用jQuery選擇器為HTML片段指定目標(biāo)位置，然后將要加載的文件URL作為參數(shù)傳遞給load()方法即可。我們可以發(fā)現(xiàn)原本的data頁面是沒有為類comment設(shè)置樣式的，但是主頁面加載后同樣的樣式名會(huì)立即應(yīng)用到新加載的內(nèi)容上。
2、篩選載入的HTML文檔
上面的案例我們可以看到，點(diǎn)擊之后data.html里面的整個(gè)內(nèi)容都被加載進(jìn)來了。如果需要加載data.html頁面里的某些元素的時(shí)候該怎么辦呢？我們可以使用load()方法的URL參數(shù)來達(dá)到目的。只需要指定選擇符就ok了。
示例代碼：
// 選擇加載data.html頁面中class為“para”的內(nèi)容，注意中間有一個(gè)空格
$(".resText").load("data.html .para");
效果圖：
我們可以看到，只有類名是“para”的被加載了。
3、傳遞方式：
load()方法的傳遞方式根據(jù)參數(shù)data來自動(dòng)指定。如果沒有參數(shù)傳遞，則采用GET方式傳遞；反之則會(huì)自動(dòng)轉(zhuǎn)換為POST方式：
// 1- 無data參數(shù)傳遞的時(shí)候，則是GET方式
$(".resText").load("data.php",function(){});
// 2- 有data參數(shù)傳遞的時(shí)候，則是POST方式
$(".resText").load("data.php",{name:"Levi",age:"18"},function(){});
4、回調(diào)函數(shù)：
回調(diào)函數(shù)是在頁面加載完成之后執(zhí)行的操作，該函數(shù)有三個(gè)參數(shù)，分別是請(qǐng)求返回的內(nèi)容、請(qǐng)求狀態(tài)、XMLHttpRequest對(duì)象：
$(".resText").load("data.php",function(responseText,textStatus,XMLHttpRequest){
// responseText ： 請(qǐng)求返回的內(nèi)容
// textStatus：請(qǐng)求狀態(tài)：success、error、notmodified、timeout 4種
// XMLHttpRequest ：XMLHttpRequest對(duì)象
});
在load()方法中，無論Ajax請(qǐng)求是否成功，只要當(dāng)請(qǐng)求完成之后，回調(diào)函數(shù)都會(huì)執(zhí)行。
9.2 $.get()方法和$.post()方法load()方法通常是用來從WEB服務(wù)器上獲取靜態(tài)的數(shù)據(jù)的，如果需要向服務(wù)器傳遞參數(shù)的話，可以使用$.get()方法和$.post()方法還有后面的$.ajax方法。
1、$.get()方法
$.get()方法使用GET方式來進(jìn)行異步請(qǐng)求：
$.get(url [,data] [,callback] [,type]);
參數(shù)詳解：
| 參數(shù)名稱 | 類型 | 說明 |
|---|---|---|
| url | String | 請(qǐng)求HTML頁面的URL地址 |
| data（可選） | Object | 發(fā)送至服務(wù)器的key/value數(shù)據(jù)，會(huì)作為字符串憑接在url的后面 |
| callback（可選） | Function | 請(qǐng)求完成時(shí)的回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success的時(shí)候，才調(diào)用該函數(shù)) |
| type （可選） | String | 服務(wù)器返回內(nèi)容的格式，包括xml、html、script、json、text、_default |
回調(diào)函數(shù)：
$.get()方法的回調(diào)函數(shù)只有兩個(gè)參數(shù)：
$.get("get.php",{useraname: "Levi",age:18},function(data,textStatus){
// data 返回的內(nèi)容，可以是XML文檔、JSON文件、HTML片段等的
// textStatus 請(qǐng)求狀態(tài)：success、error、notmodified、timeout 4種。
})
data參數(shù)代表請(qǐng)求返回的內(nèi)容，textStatus參數(shù)代表請(qǐng)求回來的狀態(tài)，注意：只有當(dāng)數(shù)據(jù)成功返回success后才被調(diào)用。
2、$.post()方法
它與$.get()方法的結(jié)構(gòu)和使用方式都相同，不過他們之間仍有以下區(qū)別：
get請(qǐng)求會(huì)將參數(shù)跟在URL的后面進(jìn)行傳遞，而post請(qǐng)求則是作為HTTP消息的實(shí)體內(nèi)容發(fā)送給Web服務(wù)器；
get對(duì)傳輸?shù)臄?shù)據(jù)大小有限制（通常不大于2KB），而使用post方式傳遞數(shù)據(jù)量要比get方式大得多；
get方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存起來，因此可以通過瀏覽器的歷史記錄中讀到這些數(shù)據(jù)，存在安全性問題。
9.3 $.ajax()方法$.ajax()方式常用參數(shù)解析：
| 方法 | 作用 |
|---|---|
| url | 請(qǐng)求的地址 |
| type | 請(qǐng)求的方式 |
| dataType | 告訴jQuery，需要按照什么格式對(duì)服務(wù)器返回的數(shù)據(jù)進(jìn)行解析，默認(rèn)json |
| data | 數(shù)據(jù) |
| success | 請(qǐng)求成功的回調(diào)函數(shù) |
| error | 請(qǐng)求失敗的回調(diào)函數(shù) |
| beforeSend | 請(qǐng)求發(fā)送之前調(diào)用的函數(shù) |
| complete | 不論請(qǐng)求是成功還是失敗的，只要請(qǐng)求完成就會(huì)調(diào)用 |
| timeout | 設(shè)置請(qǐng)求超時(shí)時(shí)間 |
示例代碼：
$.ajax({
// 請(qǐng)求的地址
url: "04-data.php",
// 請(qǐng)求的方式
type: "get",
// 告訴jQuery，需要按照什么格式對(duì)服務(wù)器返回的數(shù)據(jù)進(jìn)行解析，默認(rèn)json
dataType: "json",
// 數(shù)據(jù)
data: {
msg: "我是來請(qǐng)求數(shù)據(jù)的"
},
// 請(qǐng)求成功的回調(diào)函數(shù)
success: function(data) {
console.log(data);
},
// 請(qǐng)求失敗的回調(diào)函數(shù)
error: function() {
console.log("失敗了");
},
// 請(qǐng)求發(fā)送之前調(diào)用的函數(shù)
beforeSend: function() {
console.log("請(qǐng)求發(fā)送之前調(diào)用的函數(shù)");
// 如果返回一個(gè)false，那么就會(huì)阻止整個(gè)請(qǐng)求的發(fā)送
// return false;
// 用法：可以用作表單驗(yàn)證，當(dāng)表單內(nèi)容符合規(guī)范的時(shí)候發(fā)送ajax請(qǐng)求，當(dāng)不符合的時(shí)候就不發(fā)送ajax請(qǐng)求
},
// 不論請(qǐng)求是成功還是失敗的，只要請(qǐng)求完成就會(huì)調(diào)用
complete: function() {
console.log("請(qǐng)求完成了");
},
// 設(shè)置請(qǐng)求超時(shí)時(shí)間(單位:ms)，超過這個(gè)時(shí)間后，就不會(huì)請(qǐng)求了
timeout:2000
});
9.3 jQuery中的serialize和serializeArray方法
1、jQuery中的serialize方法：
serialize方法會(huì)將表單中所有的內(nèi)容拼接成key=value&key=value這樣的字符串。
通過這種方式就不要再去手動(dòng)獲取表單中的內(nèi)容的
2、jQuery中的serializeArray方法：
上面的方法我們可以看到，獲取整個(gè)數(shù)據(jù)的時(shí)候，是很簡單，但是想要進(jìn)行校驗(yàn)的話就很難，因?yàn)樯厦娴姆椒ǐ@取的是一個(gè)字符串，不能進(jìn)行校驗(yàn)，所以此時(shí)我們需要另外一個(gè)方法，jQuery中的serializeArray方法。
示例代碼：ajax模擬表單校驗(yàn)及注冊(cè)
sing in page
用戶名不能為空
張三：
哈哈哈，真有趣