《WEB前端開發(fā)技術(shù)實(shí)用教程》第11章 網(wǎng)站特效魔術(shù)師-jQuery技術(shù)

1第11章網(wǎng)站特效魔術(shù)師-jQuery技術(shù)目錄211.1jQuery概述及安裝11.2jQuery選擇器11.3訪問DOM元素11.4jQuery元素篩選11.5jQuery事件處理11.6jQuery動(dòng)畫與特效11.7jQuery特效案例11.1jQuery概述及安裝311.1.1jQuery概述11.1.2jQuery的下載和安裝11.1.3核心函數(shù)jQuery11.1.4第一個(gè)jQuery程序11.1.5頁面加載事件document.ready11.1.6DOM對象和jQuery對象11.1.1jQuery概述jQuery是一個(gè)快速、簡潔的、優(yōu)秀的javaScript庫，使用戶能更方便地處理HTML實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery特點(diǎn)（1）輕量級（2）鏈?zhǔn)秸Z法（3）CSS選擇器（4）多瀏覽器兼容性（5）簡單易用（6）易擴(kuò)展411.1.1jQuery概述jQuery提供的功能修改頁面的表現(xiàn)（Presentation）訪問和草走DOM元素頁面事件處理為頁面添加動(dòng)畫與服務(wù)器異步交互大量豐富的擴(kuò)展插件511.1.2jQuery的下載和安裝下載jQuery官方網(wǎng)站：不需要任何安裝過程，將源碼文件直接導(dǎo)入到你的網(wǎng)頁文件中，在頁面頭部head中，添加js,如下代碼：<scriptlanguage=“JavaScript”src=“js/jquery-2.1.1.min.js”></script>611.1.3核心函數(shù)jQuery()jQuery([selector,[context]])selector:用來查找的字符串context:作為待查找的DOM元素集、文檔或jQuery對象。這個(gè)函數(shù)接收一個(gè)包含CSS選擇器的字符串，然后用這個(gè)字符串去匹配一組元素。jQuery()等價(jià)于$()$,用于聲明jQuery對象，是jQuery中選取元素的符號711.1.4第一個(gè)jQuery程序8<scriptlanguage="JavaScript"src="js/jquery-2.1.1.min.js"></script><scriptlanguage="JavaScript">$(document).ready(function(){

$('#btn1').click(function(){$(".box1").toggle("slow");});});</script><inputtype="button"value="點(diǎn)擊"id="btn1"/><br/><divclass="box1">這是一個(gè)DIV塊！</div>11.1.5頁面加載事件document.ready9$(document).ready事件和window.onload事件比較1）解析HTML結(jié)構(gòu)2）加載外部腳本和CSS樣式文件3）解析并執(zhí)行腳本代碼4）構(gòu)造HTMLDOM模型樹-------------------------------------------------》JQuery執(zhí)行ready快5）加載圖片,flash等外部文件6）頁面加載完畢。-------------------------------------------------》window.load執(zhí)行慢執(zhí)行時(shí)間不同執(zhí)行數(shù)量不同,$(document).read可以重復(fù)寫多個(gè)并且每個(gè)都能執(zhí)行，而window.load盡管也可以寫多個(gè)但，后面的會(huì)覆蓋前面的執(zhí)行，最終只執(zhí)行最后的一個(gè)。$(document).read(function(){})可以簡寫成$(function(){})11.1.6DOM對象和jQuery對象1. DOM對象DOM是文檔對象模型，當(dāng)一個(gè)文檔在瀏覽器中加載完畢，瀏覽器會(huì)根據(jù)整個(gè)文檔的結(jié)構(gòu)，將文檔中的每一個(gè)元素包括文本形成一個(gè)HTMLDOM模型樹，這棵模型樹上的節(jié)點(diǎn)都是一個(gè)對象，即DOM對象。2. jQuery對象在jQuery庫中，通過jQuery提供的方法來訪問文檔頁面元素的對象稱之為jQuery對象。1011.1.6DOM對象和jQuery對象3、jQuery對象和DOM對象的轉(zhuǎn)換（1） jQuery對象轉(zhuǎn)成DOM對象jQuery對象不能使用DOM中的方法,但如果jQuery沒有封裝想要的方法,不得不使用DOM對象的時(shí)候,有如下兩種處理方法:1）jQuery對象是一個(gè)數(shù)組對象,可以通過[index]的方法得到對應(yīng)的DOM對象.2）使用jQuery中的get(index)方法得到相應(yīng)的DOM對象11$(“#divOut1”).html($(“#divTmp1”).html());可以寫成：

$("#divOut1").html($("#divTmp1")[0].innerHTML);11.1.6DOM對象和jQuery對象3、jQuery對象和DOM對象的轉(zhuǎn)換（2） DOM對象轉(zhuǎn)成jQuery對象對于一個(gè)DOM對象,只需要用$()把DOM對象包裝起來(jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象),就可以獲得一個(gè)jQuery對象.

轉(zhuǎn)換后就可以使用jQuery中的方法了12oDiv.innerHTML=tDiv.innerHTML;可以寫成：$(oDiv).html($(tDiv).html()); jQuery和DOM對象轉(zhuǎn)換示例1311.2jQuery選擇器1411.2.1選擇器介紹及分類11.2.2基本選擇器11.2.3層次選擇器11.2.4過濾選擇器11.2.5表單選擇器11.2.1選擇器介紹及分類選擇器是jQuery的根基，允許通過標(biāo)簽名、屬性名或內(nèi)容對DOM元素進(jìn)行快速、準(zhǔn)確的查找選擇。1. jQuery選擇器的優(yōu)點(diǎn)簡潔的寫法完善的事件處理機(jī)制1511.2.1選擇器介紹及分類2.jQuery選擇器分類1611.2.2基本選擇器.基本選擇器Basics基本選擇器是jQuery中使用最頻繁的選擇器，它由元素Id、Class、元素名、多個(gè)選擇符組成，通過基本選擇器可以實(shí)現(xiàn)大多數(shù)頁面元素的查找，其詳細(xì)說明如表所示。17名稱參數(shù)說明返回值舉例ID選擇器#id根據(jù)元素ID選擇單個(gè)$("#divId")：選擇ID為divId的元素標(biāo)簽選擇器element根據(jù)元素的名稱選擇,同類型集合$("a")：選擇所有<a>元素類別選擇器.class根據(jù)元素的css類選擇集合$(“.bgRed”)：選擇所用CSS類為bgRed的元素全匹配選擇器*選擇所有元素所有元素集合$("*")：選擇頁面所有元素群組選擇器selector1,selector2,selectorN可以將幾個(gè)選擇器用","分隔拼成一個(gè)選擇器字符串，會(huì)同時(shí)選中這幾個(gè)選擇器匹配的內(nèi)容集合$("#divId,a,.bgRed")：選擇id為divId，所有的a標(biāo)簽，class為bgRed三類元素。11.2.2基本選擇器18<scriptlanguage="javascript"src="js/jquery-1.5.2.min.js"></script><scripttype="text/javascript">$(function(){//ID匹配元素

$("#divOne").css("display","block");})$(function(){//元素名匹配元素

$("divspan").css("display","block");})$(function(){//類匹配元素

$(".clsFrame.clsOne").css("display","block");})$(function(){//匹配所有元素

$("*").css("display","block");})$(function(){//合并匹配元素

$("#divOne,span").css("display","block");})</script>基本選擇器實(shí)例11.2.3層次選擇器層次選擇器通過DOM元素間的層次關(guān)系獲取元素，其主要的層次關(guān)系包括后代、父子、相鄰、兄弟關(guān)系，通過其中某類關(guān)系可以方便快捷地定位元素，其詳細(xì)說明如表所示。19說明ancestordescendant與parent>child所選擇的元素集合是不同的，前者的層次關(guān)系是祖先與后代，而后者是父子關(guān)系；另外，prev+next可以使用.next()代替，而prev~siblings可以使用nextAll()代替。名稱參數(shù)說明返回值舉例后代選擇器ancestor

descendant在給定的祖先元素下匹配所有的后代元素集合$(".bgReddiv")選擇CSS類為bgRed的元素中的所有<div>元素.子選擇器parent>child選擇parent的直接子節(jié)點(diǎn)child.child必須包含在parent中并且父類是parent元素.集合$(".myList>li")選擇CSS類為myList元素中的直接子節(jié)點(diǎn)<li>對象.相鄰選擇器prev+nextprev和next是兩個(gè)同級元素.選中在prev元素后面的next元素.集合$("#div1+img")選擇id為div1元素后面的img對象.兄弟選擇器prev~siblings選擇prev后面的根據(jù)siblings過濾的元素集合$("#someDiv~span")選擇id為someDiv的對象后面的span元素11.2.3層次選擇器實(shí)例：20<scripttype="text/javascript">$(function(){//匹配后代元素

$("#divMid").css("display","block");$("divspan").css("display","block");})$(function(){//匹配子元素

$("#divMid").css("display","block");$("div>span").css("display","block");})$(function(){//匹配后面元素

$("#divMid+div").css("display","block");$("#divMid").next().css("display","block");})$(function(){//匹配所有后面元素

$("#divMid~div").css("display","block");$("#divMid").nextAll().css("display","block");})$(function(){//匹配所有相鄰元素

$("#divMid").siblings("div").css("display","block");})</script>11.2.4過濾選擇器過濾選擇器根據(jù)某類過濾規(guī)則進(jìn)行元素的匹配，書寫時(shí)都以冒號（:）開頭，其詳細(xì)說明如表所示21名稱說明舉例:first匹配找到的第一個(gè)元素查找表格的第一行:$("tr:first"):last匹配找到的最后一個(gè)元素查找表格的最后一行:$("tr:last"):not(selector)去除所有與給定選擇器匹配的元素查找所有未選中的input元素:$("input:not(:checked)"):even匹配所有索引值為偶數(shù)的元素，從0開始計(jì)數(shù)查找表格的1、3、5...行:$("tr:even"):odd匹配所有索引值為奇數(shù)的元素，從0開始計(jì)數(shù)查找表格的2、4、6行:$("tr:odd"):eq(index)匹配一個(gè)給定索引值的元素

注:index從0開始計(jì)數(shù)查找第二行:$("tr:eq(1)"):gt(index)匹配所有大于給定索引值的元素;注:index從0開始計(jì)數(shù)查找索引值比0大的行:$("tr:gt(0)"):lt(index)選擇結(jié)果集中索引小于N的elements；注:index從0開始計(jì)數(shù)查找索引值比2小的行:$("tr:lt(2)"):header選擇所有h1,h2,h3一類的header標(biāo)簽.給頁面內(nèi)所有標(biāo)題加上背景色:$(":header").css("background","#EEE");:animated匹配所有正在執(zhí)行動(dòng)畫效果的元素只有對不在執(zhí)行動(dòng)畫效果的元素執(zhí)行一個(gè)動(dòng)畫特效:$("div:not(:animated)").animate({left:"+=20"},1000);2211.2.4過濾選擇器實(shí)例<scriptlanguage="JavaScript"src="js/jquery-2.1.1.min.js"></script><scriptlanguage="JavaScript">$(function(){ $(":header").css("color","#F00"); $("tr:first").css({"font-weight":"bold",color:"#00F","text-align":"center"}); $("tr:not(:first)").css("font-family","楷體"); $("tr:last").css("color","#0F0"); $("tr:even").css("background-color","#999900"); $("tr:odd").css("background-color","#3399FF");});</script><body><h1>簡單過濾選擇器</h1><table><tr><td>姓名</td><td>年齡</td><td>城市</td></tr><tr><td>張小蝶</td><td>21</td><td>北京</td></tr><tr><td>李思</td><td>19</td><td>上海</td></tr><tr><td>王藍(lán)</td><td>25</td><td>廣州</td></tr><tr><td>馬霖</td><td>18</td><td>深圳</td></tr><tr><td>王思遠(yuǎn)</td><td>22</td><td>武漢</td></tr></table></body>過濾選擇器—屬性過濾選擇器AttributeFilters屬性過濾選擇器根據(jù)元素的某個(gè)屬性獲取元素，如ID號或匹配屬性值的內(nèi)容，并以“[”號開始、以“]”號結(jié)束。其詳細(xì)的說明如表所示。23jQuery選擇器名稱說明舉例[attribute]匹配包含給定屬性的元素查找所有含有id屬性的div元素:

$("div[id]")[attribute=value]匹配給定的屬性是某個(gè)特定值的元素查找所有name屬性是newsletter的input元素:

$("input[name='newsletter']").attr("checked",true);[attribute!=value]匹配給定的屬性是不包含某個(gè)特定值的元素查找所有name屬性不是newsletter的input元素:

$("input[name!='newsletter']").attr("checked",true);[attribute^=value]匹配給定的屬性是以某些值開始的元素$("input[name^='news']")[attribute$=value]匹配給定的屬性是以某些值結(jié)尾的元素查找所有name以'letter'結(jié)尾的input元素:

$("input[name$='letter']")[attribute*=value]匹配給定的屬性是以包含某些值的元素查找所有name包含'man'的input元素:

$("input[name*='man']")[attributeFilter1][attributeFilter2][attributeFilterN]復(fù)合屬性選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用。找到所有含有id屬性，并且它的name屬性是以man結(jié)尾的:

$("input[id][name$='man']")表單對象屬性過濾選擇器通過表單中的某對象屬性特征獲取該類元素，如enabled、disabled、checked、selected屬性。其詳細(xì)的說明如表所示2411.2.5表單選擇器名稱說明解釋:input匹配所有input,textarea,select和button元素查找所有的input元素:$(":input"):text匹配所有的文本框查找所有文本框:$(":text"):password匹配所有密碼框查找所有密碼框:$(":password"):radio匹配所有單選按鈕查找所有單選按鈕

$(":radio"):checkbox匹配所有復(fù)選框查找所有復(fù)選框:$(":checkbox"):submit匹配所有提交按鈕查找所有提交按鈕:$(":submit"):image匹配所有圖像域匹配所有圖像域:$(":image"):reset匹配所有重置按鈕查找所有重置按鈕:$(":reset"):button匹配所有按鈕查找所有按鈕:$(":button"):file匹配所有文件域查找所有文件域:$(":file")全選功能25<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>復(fù)選框全選實(shí)例</title><scriptlanguage="javascript"src="../js/jquery-2.1.1.min.js"></script><scripttype="text/javascript">$(function(){//全選功能$("#all").click(function(){$(":checkbox[name='items']").prop("checked",true);});//全不選功能$("#no").click(function(){$(":checkbox[name='items']").prop("checked",false);});//反選功能$("#rev").click(function(){ $(":checkbox[name='items']").each(function(){ varf=$(this).prop("checked"); $(this).prop("checked",!f); }); });全選功能26//提交顯示所選內(nèi)容$("#ok").click(function(){ if($(":checkbox[name=items]:checked").length>0){

varstr="你選中的是：\n";

$(":checkbox[name=items]:checked").each(function(){str+=$(this).val()+"\n";});

alert(str); }else{alert("請至少選擇一項(xiàng)！");}});});</script></head><body>你愛好的運(yùn)動(dòng)是?<br/><inputname="items"type="checkbox"id="items"value="足球"/>足球<br/><inputname="items"type="checkbox"id="items"value="籃球"/>籃球<br/><inputname="items"type="checkbox"id="items"value="羽毛球"/>羽毛球<br/><inputname="items"type="checkbox"id="items"value="乒乓球"/>乒乓球<br/><inputtype="button"id="all"value="全選"/><inputtype="button"id="no"value="全不選"/><inputtype="button"id="rev"value="反選"/><inputtype="button"id="ok"value="提交"/></body></html>設(shè)置復(fù)選框?yàn)檫x中狀態(tài)$(“:checkbox”).attr(“checked”,true);在jQuery1.6版本以后，點(diǎn)擊一次有效，點(diǎn)擊多次無效在jquery1.6版本以后的checked屬性attr("checked")為checked，未選中時(shí)為undefined；解決方式：改成prop("checked")2711.3訪問DOM元素2811.3.1DOM元素屬性操作11.3.2DOM元素CSS類操作11.3.3DOM元素內(nèi)容操作11.3.4DOM元素操作11.3.1DOM元素屬性操作1、獲取元素屬性語法：attr(name)功能：取得第一個(gè)匹配元素的屬性值。舉例：$(“#im1”).attr(“src”);2、設(shè)置元素屬性（1）設(shè)置單個(gè)屬性語法：attr(key,value)舉例：$(“#im1”).attr(“src”,”images/01.jpg”);（2）設(shè)置多個(gè)屬性語法：attr({key0:value0,key1:value1})舉例：$("#im1").attr({title:"aimage!",width:"115px",src:”images/01.jpg”});3. 刪除元素的屬性語法：removeAttr(name)舉例：$(“#img1’).removeAttr(“src”);2911.3.2DOM元素css類操作1. 直接設(shè)置元素樣式值語法：css(name,value)舉例：$(“p”).css(“color”,”#f00”);2. 增加CSS類別語法：addClass(class)舉例：$(“#p1”).addClass(“myclass“);

3. 類別切換語法：toggleClass(class)舉例：$(“#p1”).toggleClass(“togcls”);4. 刪除類別語法：removeClass([class])舉例：$("p").removeClass("cls0");3011.3.3DOM元素內(nèi)容操作1、html()方法設(shè)置或獲取每一個(gè)匹配元素的html內(nèi)容2、text()方法設(shè)置或獲取每一個(gè)匹配元素的文本內(nèi)容3、val()方法設(shè)置或獲取匹配元素的value屬性的值3111.3.4DOM元素操作1. 插入元素節(jié)點(diǎn)（1） 內(nèi)部插入append(),appendTo(),prepend(),prependTo()（2） 外部插入after(),insertAfter(),before(),insertbBefore()2. 包裹元素節(jié)點(diǎn)wrap(),unwrap(),wrapAll()3. 替換元素節(jié)點(diǎn)replaceWith(),replaceAll()4. 復(fù)制元素節(jié)點(diǎn)clone()5. 刪除元素節(jié)點(diǎn)empty(),remove()6. 遍歷元素each()3211.4jQuery元素篩選3311.4.1元素過濾11.4.2元素查找11.4.1元素過濾34名稱功能說明舉例eq(index)獲取第N個(gè)元素獲取匹配的第二個(gè)元素:

$("p").eq(1)filter(expr)篩選出與指定表達(dá)式匹配的元素集合。保留帶有select類的元素:$("p").filter(".selected")filter(fn)篩選出與指定函數(shù)返回值匹配的元素集合這個(gè)函數(shù)內(nèi)部將對每個(gè)對象計(jì)算一次(正如'$.each').如果調(diào)用的函數(shù)返回false則這個(gè)元素被刪除，否則就會(huì)保留。保留子元素中不含有ol的元素:$("div").filter(function(index){return$("ol",this).size()==0;});is(expr)用一個(gè)表達(dá)式來檢查當(dāng)前選擇的元素集合，如果其中至少有一個(gè)元素符合這個(gè)給定的表達(dá)式就返回true。如果沒有元素符合，或者表達(dá)式無效,都返回false由于input元素的父元素是一個(gè)表單元素，所以返回true:$("input[type='checkbox']").parent().is("form")map(callback)將一組元素轉(zhuǎn)換成其他數(shù)組（不論是否是元素?cái)?shù)組）可以用這個(gè)函數(shù)來建立一個(gè)列表，不論是值、屬性還是CSS樣式，或者其他特別形式。這都可以用'$.map()'來方便的建立把form中的每個(gè)input元素的值建立一個(gè)列表:$("p").append($("input").map(function(){return$(this).val();}).get().join(","));not(expr)刪除與指定表達(dá)式匹配的元素從p元素中刪除帶有select的ID的元素:$("p").not($("#selected")[0])slice(start,end)選取一個(gè)匹配的子集選擇第一個(gè)p元素:$("p").slice(0,1);11.4.2元素查找35名稱說明舉例add(expr)把與表達(dá)式匹配的元素添加到j(luò)Query對象中。這個(gè)函數(shù)可以用于連接分別與兩個(gè)表達(dá)式匹配的元素結(jié)果集。動(dòng)態(tài)生成一個(gè)元素并添加至匹配的元素中:$("p").add("<span>Again</span>")children([expr])取得一個(gè)包含匹配的元素集合中每一個(gè)元素的所有子元素的元素集合。查找DIV中的每個(gè)子元素:$("div").children()closest([expr])取得與表達(dá)式匹配的最新的父元素$("li:first").closest(["ul","body"]);contents()查找匹配元素內(nèi)部所有的子節(jié)點(diǎn)（包括文本節(jié)點(diǎn)）。查找所有文本節(jié)點(diǎn)并加粗:$("p").contents().not("[nodeType=1]").wrap("<b/>");find(expr)搜索所有與指定表達(dá)式匹配的元素。從所有的段落開始，進(jìn)一步搜索下面的span元素。與$("pspan")相同:$("p").find("span")next([expr])取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的那一個(gè)同輩元素的元素集合。找到每個(gè)段落的后面緊鄰的同輩元素:

$("p").next()nextAll([expr])查找當(dāng)前元素之后所有的同輩元素。給第一個(gè)div之后的所有元素加個(gè)類:$("div:first").nextAll().addClass("after");offsetParent()返回第一個(gè)有定位的父類(如relative或absolute).

11.4.2元素查找36名稱說明舉例parent([expr])取得一個(gè)包含著所有匹配元素的唯一父元素的元素集合。查找每個(gè)段落的父元素:

$("p").parent()parents([expr])取得一個(gè)包含著所有匹配元素的祖先元素的元素集合（不包含根元素）。找到每個(gè)span元素的所有祖先元素:$("span").parents()prev([expr])取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的前一個(gè)同輩元素的元素集合。找到每個(gè)段落緊鄰的前一個(gè)同輩元素:$("p").prev()prevAll([expr])查找當(dāng)前元素之前所有的同輩元素給最后一個(gè)之前的所有div加上一個(gè)類:$("div:last").prevAll().addClass("before");siblings([expr])取得一個(gè)包含匹配的元素集合中每一個(gè)元素的所有唯一同輩元素的元素集合。找到每個(gè)div的所有同輩元素:$("div").siblings()11.5jQuery事件處理3711.5.1頁面載入事件11.5.2綁定與移除綁定事件11.5.3綁定一次性事件11.5.4觸發(fā)事件11.5.5切換事件11.5.6事件方法11.5.1頁面載入事件ready()方法格式：ready(fn)功能：頁面載入事件，當(dāng)DOM載入就緒可以查詢及操縱時(shí)，綁定一個(gè)要執(zhí)行的函數(shù)。參數(shù)：fn，要在DOM就緒時(shí)執(zhí)行的函數(shù)寫法一：$(document).ready(function(){});寫法二(推薦)：$(function(){});寫法三：jQuery(document).ready(function(){});寫法四：jQuery(function(){});3811.5.2 綁定與移除綁定事件1. 事件綁定方法：bind()功能：為每一個(gè)匹配元素的特定事件（像click）綁定一個(gè)事件處理器函數(shù)。格式：bind(type,[data],fn)參數(shù)：type,事件類型data:(可選)作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象fn:綁定到每個(gè)匹配元素的事件上面的處理函數(shù)舉例：$("p").bind("click",function(){alert($(this).text());});3911.5.2 綁定與移除綁定事件2. 移除綁定事件unbind()功能：從每一個(gè)匹配的元素中刪除綁定的事件。格式：bind(type,fn)參數(shù)：type：事件類型，一個(gè)或多個(gè)事件,由空格分隔多個(gè)事件值。fn：移除的事件處理函數(shù)舉例：$("p").unbind("click")4011.5.3

綁定一次性事件one()方法功能：為每一個(gè)匹配元素的特定事件（像click）綁定一個(gè)一次性的事件處理器函數(shù)。格式：one(type,[data],fn)參數(shù)：type,事件類型data:(可選)作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象fn:每當(dāng)事件觸發(fā)時(shí)執(zhí)行的函數(shù)。舉例：$("p").one("click",function(){alert($(this).text());});4111.5.4

觸發(fā)事件trigger()方法功能：在每一個(gè)匹配的元素上觸發(fā)某類事件。格式：trigger(type,[data])參數(shù)：type:一個(gè)事件對象或者要觸發(fā)的事件類型data:(可選)傳遞給事件處理函數(shù)的附加參數(shù)舉例：$("form:first").trigger("submit")4211.5.5切換事件1、hover()功能：一個(gè)模仿懸停事件（鼠標(biāo)移動(dòng)到一個(gè)對象上面及移出這個(gè)對象）的方法。格式：hover(over,out)參數(shù)：over：鼠標(biāo)移到元素上要觸發(fā)的函數(shù)out：鼠標(biāo)移出元素要觸發(fā)的函數(shù)舉例：$(".clsTitle").hover(

function(){$(".clsContent").show();},function(){$(".clsContent").hide();}

);4311.5.5切換事件2、toggle()功能：每次點(diǎn)擊后依次調(diào)用函數(shù)。格式：toggle(fn1,fn2,[fn3,fn4…])參數(shù)：fn1：第一數(shù)次點(diǎn)擊時(shí)要執(zhí)行的函數(shù)。fn2：第二數(shù)次點(diǎn)擊時(shí)要執(zhí)行的函數(shù)。fn3,fn4,...：更多次點(diǎn)擊時(shí)要執(zhí)行的函數(shù)。舉例：$("img").toggle(function(){

$("img").attr({src:"images/img01.jpg",title:this.src});},function(){

$("img").attr({src:"images/img02.jpg",title:this.src});},function(){

$("img").attr({src:"images/img03.jpg",title:this.src});})4411.5.6事件方法45jQuery事件方法說明blur(fn)在每一個(gè)匹配元素的blur事件中綁定一個(gè)處理函數(shù)。blur事件會(huì)在元素失去焦點(diǎn)的時(shí)候觸發(fā)，既可以是鼠標(biāo)行為，也可以是按tab鍵離開的change(fn)在每一個(gè)匹配元素的change事件中綁定一個(gè)處理函數(shù)。click(fn)在每一個(gè)匹配元素的click事件中綁定一個(gè)處理函數(shù)。點(diǎn)擊事件會(huì)在指針設(shè)備的按鈕在元素上單擊時(shí)觸發(fā)。dblclick(fn)在每一個(gè)匹配元素的dblclick事件中綁定一個(gè)處理函數(shù)。在某個(gè)元素上雙擊的時(shí)候就會(huì)觸發(fā)dblclick事件error(fn)在每一個(gè)匹配元素的error事件中綁定一個(gè)處理函數(shù)。當(dāng)頁面的JavaScript發(fā)生錯(cuò)誤時(shí)，window對象會(huì)觸發(fā)error事件focus(fn)在每一個(gè)匹配元素的focus事件中綁定一個(gè)處理函數(shù)。focus事件可以通過鼠標(biāo)點(diǎn)擊或者鍵盤上的TAB導(dǎo)航觸發(fā)keydown(fn)在每一個(gè)匹配元素的keydown事件中綁定一個(gè)處理函數(shù)。keydown事件會(huì)在鍵盤按下時(shí)觸發(fā)。keyup(fn)在每一個(gè)匹配元素的keyup事件中綁定一個(gè)處理函數(shù)。keyup事件會(huì)在鍵盤按下時(shí)觸發(fā)。keypress(fn)在每一個(gè)匹配元素的keypress事件中綁定一個(gè)處理函數(shù)。keypress事件會(huì)在敲擊按鍵時(shí)觸發(fā)。敲擊按鍵的定義為按下并抬起同一個(gè)按鍵。load(fn)在每一個(gè)匹配元素的load事件中綁定一個(gè)處理函數(shù)。如果綁定給window對象，則會(huì)在所有內(nèi)容加載后觸發(fā)，包括窗口，框架，對象和圖像。如果綁定在元素上，則當(dāng)元素的內(nèi)容加載完畢后觸發(fā)。11.5.6事件方法46jQuery事件方法說明mousedown(fn)在每一個(gè)匹配元素的mousedown事件中綁定一個(gè)處理函數(shù)。mousedown事件在鼠標(biāo)在元素上點(diǎn)擊后會(huì)觸發(fā)mouseup(fn)在每一個(gè)匹配元素的mouseup事件中綁定一個(gè)處理函數(shù)。mouseup事件會(huì)在鼠標(biāo)點(diǎn)擊對象釋放時(shí)觸發(fā)mousemove(fn)在每一個(gè)匹配元素的mousemove事件中綁定一個(gè)處理函數(shù)。mousemove事件通過鼠標(biāo)在元素上移動(dòng)來觸發(fā)。事件處理函數(shù)會(huì)被傳遞一個(gè)變量——事件對象，其.clientX和.clientY屬性代表鼠標(biāo)的坐標(biāo)mouseover(fn)在每一個(gè)匹配元素的mouseover事件中綁定一個(gè)處理函數(shù)。mouseover事件會(huì)在鼠標(biāo)移入對象時(shí)觸發(fā)mouseout(fn)在每一個(gè)匹配元素的mouseout事件中綁定一個(gè)處理函數(shù)。mouseout事件在鼠標(biāo)從元素上離開后會(huì)觸發(fā)resize(fn)在每一個(gè)匹配元素的resize事件中綁定一個(gè)處理函數(shù)。當(dāng)文檔窗口改變大小時(shí)觸發(fā)scroll(fn)在每一個(gè)匹配元素的scroll事件中綁定一個(gè)處理函數(shù)。當(dāng)滾動(dòng)條發(fā)生變化時(shí)觸發(fā)select(fn)觸發(fā)每一個(gè)匹配元素的select事件這個(gè)函數(shù)會(huì)調(diào)用執(zhí)行綁定到select事件的所有函數(shù)，包括瀏覽器的默認(rèn)行為?？梢酝ㄟ^在某個(gè)綁定的函數(shù)中返回false來防止觸發(fā)瀏覽器的默認(rèn)行為。submit(fn)在每一個(gè)匹配元素的submit事件中綁定一個(gè)處理函數(shù)。submit事件將會(huì)在表單提交時(shí)觸發(fā)unload(fn)在每一個(gè)匹配元素的unload事件中綁定一個(gè)處理函數(shù)。11.6jQuery動(dòng)畫與特效4711.6.1顯示與隱藏效果11.6.2滑動(dòng)效果11.6.3淡入淡出效果11.6.4自定義動(dòng)畫11.6.1顯示與隱藏效果48名稱參數(shù)功能說明舉例show()無顯示隱藏匹配元素。無動(dòng)畫的版本。如果選擇的元素是可見的，這個(gè)方法將不會(huì)改變?nèi)魏螙|西顯示所有段落HTML代碼：<pstyle="display:none">Hello</p>jQuery代碼：$("p").show()show(speed,[callback])speed：速度的設(shè)定"slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)callback:在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。以優(yōu)雅的動(dòng)畫顯示所有匹配的元素，并在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。以根據(jù)指定的速度動(dòng)態(tài)地改變每個(gè)匹配元素的高度、寬度和不透明度。1秒緩慢將隱藏段落顯示$("p").show(1000);400毫秒將段落顯示并在之后執(zhí)行回調(diào)函數(shù)$("p").show(400,function(){$(this).text("AnimationDone...");});hide()

隱藏顯示的元素?zé)o動(dòng)畫版隱藏操作隱藏所有段落$("p").hide()11.6.1顯示與隱藏效果49名稱參數(shù)功能說明舉例hide(speed,[callback])speed：速度的設(shè)定"slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)callback:在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。以優(yōu)雅的動(dòng)畫隱藏所有匹配的元素，并在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。以根據(jù)指定的速度動(dòng)態(tài)地改變每個(gè)匹配元素的高度、寬度和不透明度。1秒緩慢將隱藏段落顯示$("p").hide(1000);400毫秒將段落顯示并在之后執(zhí)行回調(diào)函數(shù)$("p").hide(400,function(){$(this).text("AnimationDone...");});toggle()

切換元素的可見狀態(tài)。如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。切換所有段落的可見狀態(tài)。$("p").toggle()toggle(speed,[callback])speed：速度的設(shè)定"slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)callback:在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。以優(yōu)雅的動(dòng)畫切換所有匹配的元素，并在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。

1秒緩慢地切換段落的顯示隱藏狀態(tài)$("p").toggle(1000);400毫秒將段落切換并執(zhí)行回調(diào)函數(shù)$("p").toggle(400,function(){$(this).text("AnimationDone...");});11.6.2滑動(dòng)效果50名稱參數(shù)功能說明舉例slideDown(speed,[callback])speed：速度的設(shè)定"slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)callback:在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。通過高度變化（向下增大）來動(dòng)態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。動(dòng)畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動(dòng)”的方式顯示出來。1秒緩慢將段落滑下：$("p").slideDown(1000);400毫秒將段落滑下并在之后彈出對話框$("p").slideDown(400,function(){$(this).text("AnimationDone...");});slideUp(speed,[callback])speed：速度的設(shè)定"slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)callback:在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。通過高度變