Web前端開發(fā)技術(shù)（jQuery+Ajax）（慕課版）全套課件_第1頁
Web前端開發(fā)技術(shù)（jQuery+Ajax）（慕課版）全套課件_第2頁
Web前端開發(fā)技術(shù)（jQuery+Ajax）（慕課版）全套課件_第3頁
Web前端開發(fā)技術(shù)（jQuery+Ajax）（慕課版）全套課件_第4頁
Web前端開發(fā)技術(shù)（jQuery+Ajax）（慕課版）全套課件_第5頁
已閱讀5頁，還剩256頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第一章jQuery入門03課件-BTC-Jquery-01-第一章jQuery入門.pptx03課件-BTC-Jquery-01-第二章jQuery基礎(chǔ)語法.pptx03課件-BTC-Jquery-01-第三章jQuery選擇器.pptx03課件-BTC-Jquery-01-第四章使用jQuery操作DOM.pptx03課件-BTC-Jquery-01-第五章jQuery中的事件.ppt03課件-BTC-Jquery-01-第六章jQuery中的動畫.ppt03課件-BTC-Jquery-01-第七章Ajax技術(shù).pptx03課件-BTC-Jquery-01-第八章jQuery中的Ajax應用.ppt03課件-BTC-Jquery-01-第九章JSON的使用.ppt03課件-BTC-Jquery-01-第十章綜合案例.pptx本講目標JavaScript框架簡介jQuery優(yōu)勢jQuery版本對比jQuery開發(fā)環(huán)境安裝開發(fā)第一個jQuery應用程序JavaScript簡介JavaScript進行開發(fā)中存在很多的弊端JavaScript對于不同廠商的瀏覽器中不能夠進行兼容性的開發(fā)，甚至對于同一廠商不同版本的瀏覽器都無法兼容。這是使用JavaScript的一大弊端。對于開發(fā)人員而言，JavaScript復雜的文檔對象模型加重了代碼的繁瑣程度，都成為JavaScript阻礙Web開發(fā)的重要弊端。JavaScript框架簡介隨著JavaScript、CSS、Ajax等技術(shù)的不斷進步，越來越多的開發(fā)者將一個又一個豐富多彩的程序功能進行封裝，供其他人可以調(diào)用這些封裝好的程序組件（框架）當前流行的JavaScript庫有:jQuery優(yōu)勢jQuery特點jQuery理念：寫的更少，做得更多（Writeless,Domore）jQuery極大地簡化了JavaScript編程支持各種主流瀏覽器，包括IE6以上，F(xiàn)ireFox2以上，Safari2以上和Opera9以上的版本。5jQuery特點以強大的CSS選擇器為基礎(chǔ)，幾乎所有的操作都先使用選擇器查找DOM對象，然后對其進行各種操作。6jQuery特點jQuery特點屏蔽瀏覽器差異，對DOM的操作提供了方便的擴展，易用的事件處理API和動畫API。強大的插件機制。社區(qū)活躍，文檔非常齊全，全部配有示例。學習容易，易用性很高。不污染頂級變量完善的文檔jQuery的文檔非常豐富，不管是英文文檔，還是中文文檔。開源jQuery是一個開源的產(chǎn)品，任何人可以自由的使用并提出改進意見。7jQuery優(yōu)勢jQuery的版本發(fā)展經(jīng)歷了jQuery1.X和jQuery2.X，目前最新的版本是jQuery3.3.1，目前市面上對于jQuery1.X和jQuery2.X的使用仍存在jQuery1.X：目前使用最廣泛的一個版本，可以兼容更多的瀏覽器，功能更加完善。jQuery2.X：不再支持IE6/7/8，如果在IE9/10版本中使用“兼容性視圖”模式也將會受到影響。相對比于jQuery1.X，jQuery2.X內(nèi)核發(fā)生了變化。8jQuery版本對比jQuery核心團隊負責人TimmyWillison發(fā)布了一篇關(guān)于jQuery3.3.0的博客，其中提到“一般來說，jQuery并不打算添加新的內(nèi)容了。我們傾向于關(guān)注我們可以移除哪些東西，而不是我們可以添加哪些東西”。也就是說以后jQuery新版本重點是棄用了哪些功能，而不是新增特性。9jQuery新版本簡介Web前端技術(shù)學習路線圖10學習jQuery前的知識儲備HTMLAJAXCSSJavaScriptXMLJQUERY等框架技術(shù)誰在使用JQuery誰在使用Jquery/Sites_Using_jQuery11jQuery的使用下載：提供了最新的jQuery框架下載。共有兩個版本的jQuery可供下載：一份是精簡過的，另一份是未壓縮的（供調(diào)試或閱讀）。通常只需下載最小的jQuery包（Minified）即可。目前最新的版本jquery-1.10.2.js文件只有267KBjQuery的引用<scriptsrc="jquery-1.10.2.js"></script>將jQuery框架文件導入后，就可以使用jQuery的選擇器和各種函數(shù)功能了。Jquery庫的替代Google和Microsoft對jQuery的支持都很好。如果您不愿意在自己的計算機上存放jQuery庫，那么可以從Google或Microsoft加載CDNjQuery核心文件。使用Google的CDN：使用Microsoft的CDN

Jquery開發(fā)工具的安裝在開發(fā)中，借助得力的工具可以事半功倍。Web前端開發(fā)涉及多種工具，作為初學者來說，選擇DreamWeaver就足夠了。16第一個jQuery程序<scriptsrc="jquery-1.10.2.js"></script><script>$(document).ready(function(){ alert("HelloWorld!");});</script>引入jQuery等待DOM文檔載入后執(zhí)行類似于window.onload彈出一個對話框jQuery開發(fā)工具和插件Dreamweaver為了使Dreamweaver支持自動提示

需要到http://xtnd.us/dreamweaver/jquery下載一個插件：jQuery_API.mxp（如有需要見：“jquery例子集合”文件夾中jQuery_API.mxp）在DW中選擇“命令”-“擴展管理”-“安裝擴展”EclipsejQueryWTP插件

/jquerywtp下載Spket插件：下載參考資料可參考的資料總結(jié)JavaScript框架簡介JQuery優(yōu)勢jQuery版本對比jQuery開發(fā)環(huán)境安裝開發(fā)第一個JQuery應用程序謝謝!第二章jQuery基礎(chǔ)語法本章內(nèi)容jQuery基礎(chǔ)語法jQuery代碼風格jQuery對象與DOM對象jQuery的語法結(jié)構(gòu)<head>

<scripttype="text/javascript"src="js/jquery-1.11.1.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){ alert("HelloWorld!"); });

</script>

</head>1、jQuery代碼存放于<script></script>標記對

<script></script>對的位置可以在<head></head>標記對中，也可以在<body></body>標記對中，也可以在<body></body>標記對后，位置任意2、引入jQuery庫文件jQuery的語法結(jié)構(gòu)3、基礎(chǔ)語法是：$(selector).action()美元符號定義jQuery（又稱工廠函數(shù)）選擇器（selector）“查詢”和“查找”HTML元素action()執(zhí)行對元素的操作示例$(this).hide() //隱藏當前元素$("p").hide() //隱藏所有段落$("p.test").hide() //隱藏所有class="test"的段落$("#test").hide() //隱藏第id="test"的元素鏈式風格對于同一對象不超過3個操作，可直接寫一行對同一對象的操作較多，建議每行寫一個操作25jQuery代碼風格$("has_children").click(function(){

$(this) .addClass("highLight") .children("a").show().end()

.siblings().removeClass("highLight")

.children("a").hide();

});26jQuery代碼注釋<scripttype="text/javascript">

$(function(){

$("#table">tbody>tr:has(td:has(:checkbox:enabled))").css("background","red");

});

</script><scripttype="text/javascript">

$(function(){

//在一個id為table的表格的tbody元素中，如果每行的一列中的checkbox沒有被禁用，

//則把這一行的背景色設(shè)為紅色$("#table">tbody>tr:has(td:has(:checkbox:enabled))").css("background","red");

});

</script>添加必要注釋$(document).ready()：類似window.onload

定義文檔加載完后執(zhí)行的函數(shù)27文檔就緒函數(shù)<head><scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){ alert("HelloWorld!");});</script></head>這是為了防止文檔在完全加載（就緒）之前運行jQuery代碼。如果在文檔沒有完全加載之前就運行函數(shù)，操作可能失敗。文檔就緒函數(shù)window.onload與$(document).ready()的對比window.onload$(document).ready()執(zhí)行

時機必須等網(wǎng)頁中所有內(nèi)容加載完后（包括圖片）才能執(zhí)行網(wǎng)頁中所有DOM結(jié)構(gòu)繪制完后就執(zhí)行編寫

個數(shù)不能編寫多個

window.onload=function(){};

window.onload=function(){};此時第二個覆蓋第一個能同時編寫多個

$(document).ready(function(){});$(document).ready(function(){});兩個函數(shù)都執(zhí)行簡化

寫法無$()DOM對象：HTML的文檔對象模型中的元素對象。可通過javascript的以下方法獲取jQuery對象：經(jīng)jQuery包裝后的DOM對象兩者擁有的方法不同29jQuery對象與DOM對象document.getElementById("test")document.getElementsByTagName("p")$("#test")$("p")jQuery對象與DOM對象相互轉(zhuǎn)換jQuery對象轉(zhuǎn)成DOM對象var$test=$("#test");vartest=$test[0]; //jQuery對象是一個數(shù)組，可通過索引得到DOM對象或vartest=$test.get(0); //用jQuery提供的get(index)方法得到DOM對象vartest=document.getElementById("test");var$test=$(test); //用jQuery的工廠方法解決jQuery與其它庫的沖突jQuery在其它庫之后導入jQuery.noConflict();讓出$使用權(quán)然后用jQuery而不用$jQuery在其它庫之前導入直接用jQuery而不用$，同時，可以使用$()方法作為其它庫的快捷方式總結(jié)jQuery基礎(chǔ)語法

jQuery與DOM對象DOM對象：HTML的文檔對象模型中的元素對象?？赏ㄟ^javascript的以下方法獲取jQuery對象：經(jīng)jQuery包裝后的DOM對象兩者擁有的方法不同謝謝!第三章jQuery選擇器(一)知識點回顧jQuery基礎(chǔ)語法jQuery編程風格jQuery與DOM對象本講目標JQuery選擇器簡介基本選擇器層次選擇器過濾選擇器表單選擇器jQuery選擇器簡介在頁面中為某個元素添加屬性或事件時，必須先準確地找到該元素。那jQuery選擇器就是來幫我們實現(xiàn)這一重要的功能的。選擇器是jQuery的根基,在jQuery中,對事件處理,遍歷DOM和Ajax操作都依賴于選擇器。JavaScript選取元素jQuery選取元素<scripttype="text/javascript"> window.onload=function(){ if(document.getElementById("two")) { document.getElementById("two").style.color="red"; } } </script><scripttype="text/javascript"> $(function(){ $(function(){ $("#two").css("color","red"); }); }); </script>jQuery選擇器簡介jQuery選擇器的優(yōu)點:簡潔的寫法完善的事件處理機制jQuery選擇器返回的永遠是數(shù)組對象，即使沒有找到也會返回一個空數(shù)組jQuery選擇器簡介jQuery選擇器的優(yōu)勢：兼容性好代碼更簡單。完善的檢測機制。Jquery選擇器選擇器的分類基本選擇器基本選擇器是jQuery中最常用的選擇器,也是最簡單的選擇器,它通過元素id,class和標記名來查找DOM元素注意：使用各種jQuery選擇器所返回的對象為

jQuery對象,這個jQuery對象為一個集合對象，即使返回的元素僅有一個也屬于集合，因此不能直接調(diào)用DOM定義的方法?；具x擇器示例練習改變id為idOne的元素的背景色為紅色改變所有div元素的背景色為紅色

改變class為clsTwo的元素的背景色為紅色改變id為idOne和class屬性為clsTwo的元素的背景色為紅色$("#idOne").css("backgroundColor","red");$("div").css("backgroundColor","red");$(".clsTwo").css("backgroundColor","red");$("#idOne,.clsTwo").css("backgroundColor","red");層次選擇器如果想通過DOM元素之間的層次關(guān)系來獲取特定元素,例如后代元素,子元素,相鄰元素,兄弟元素等,則需要使用層次選擇器注意:(“prev~div”)選擇器只能選擇“#prev”

元素后面的同輩元素;而jQuery中的方法siblings()

與前后位置無關(guān),只要是同輩節(jié)點就可以選取層次選擇器示例選擇id為divOne的元素里的所有后代div元素選擇id為divOne的元素里的所有子元素div元素選擇id為divOne的元素后緊接的div元素選擇id為divOne的元素后所有兄弟元素div$("#divOnediv").css("backgroundColor","red");$("#divOne>div").css("backgroundColor","red");$("#divOne+div").css("backgroundColor","red");$("#divOne~div").css("backgroundColor","red");層次選擇器示例需要注意的問題后代元素與子元素的區(qū)別后代元素：包括直接子元素和更深嵌套的后代元素。子元素：指的是直接子元素，不包括更深層嵌套的后代元素。等價方法$(“prev+next”)等價于方法$(“prev”).next(“next”);選取prev元素之后緊接著的一個next元素。$(“prev~sublings”)等價于方法$(“prev”).nextAll(“siblings”),選取prev元素之后的所有同級的同輩元素。$(“prev”).siblings(“next”)方法與前后位置無關(guān),只要是同輩節(jié)點就可以選取。過濾選擇器過濾選擇器主要是通過特定的過濾規(guī)則來篩選出所需的DOM元素,該選擇器都以“:”開頭按照不同的過濾規(guī)則,過濾選擇器又可分為基本過濾,內(nèi)容過濾,可見性過濾,屬性過濾,子元素過濾和表單對象屬性過濾選擇器.基本過濾選擇器基本過濾選擇器示例實例演示頁面中添加了多個<h>標題標簽和<li>標簽，通過對這些標簽背景色的設(shè)置來了解下基本過濾選擇器的使用。內(nèi)容過濾選擇器內(nèi)容過濾選擇器的過濾規(guī)則主要體現(xiàn)在它所包含的子元素和文本內(nèi)容上內(nèi)容過濾選擇器實例5：頁面中添加了多個<div>標簽，通過對這些標簽背景色的設(shè)置來了解下內(nèi)容過濾選擇器的使用可見性過濾選擇器可見性過濾選擇器是根據(jù)元素的可見和不可見狀態(tài)來選擇相應的元素可見選擇器:hidden不僅包含樣式屬性display為none的元素,也包含文本隱藏域(<inputtype=“hidden”>)和visible:hidden之類的元素可見性過濾選擇器實例6：頁面中添加了兩個div標簽，其中一個設(shè)置為隱藏,通過對這些標簽背景色的設(shè)置來了解下可見性過濾選擇器的使用。屬性過濾選擇器屬性過濾選擇器的過濾規(guī)則是通過元素的屬性來獲取相應的元素可見性過濾選擇器實例7：頁面中添加了多個div標簽，通過對這些標簽背景色的設(shè)置來了解下屬性過濾選擇器的使用。子元素過濾選擇器nth-child()選擇器詳解如下：(1):nth-child(even/odd):能選取每個父元素下的索引值為偶(奇)數(shù)的元素（隔行變色效果）(2):nth-child(2):能選取每個父元素下的索引值為2的元素(3):nth-child(3n):能選取每個父元素下的索引值是3的倍數(shù)的元素(4):nth-child(3n+1):能選取每個父元素下的索引值是3n+1的元素子元素過濾選擇器實例8：頁面中添加了多個div標簽，通過對這些標簽背景色的設(shè)置來了解下子元素過濾選擇器的使用。表單對象屬性過濾選擇器此選擇器主要對所選擇的表單元素進行過濾表單選擇器表單選擇器實例9：完成如下圖所示頁面效果，點擊提交按鈕后，彈出表單元素信息?？偨Y(jié)基本選擇器層次選擇器過濾選擇器表單選擇器謝謝!第四章使用jQuery操作DOM本章目標jQuery操作DOM簡介jQuery操作DOM節(jié)點

新建、添加、刪除、修改、查找jQuery的其他操作63/38jQuery操作DOM簡介64/38簡單總結(jié)下DOM其實就是一棵樹，如下圖那么jQuery操作DOM主要是針對類似上面這樣結(jié)構(gòu)的樹進行操作，這里我們可以把JQuery中的DOM操作主要分為：新建、添加、刪除、修改、查找這幾種jQuery操作DOM簡介65/38JQuery中的DOM操作新建、添加、刪除、修改、查找其他操作—屬性操作、樣式操作、設(shè)置和獲取元素（HTML,文本和值）、遍歷節(jié)點等操作jQuery操作DOM節(jié)點—新建66/38jQuery操作DOM節(jié)點—添加67/38語法功能append(content)$(A).append(B)表示將B追加到A中如：$("ul").append($newNode1);appendTo(content)$(A).appendTo(B)表示把A追加到B中如：$newNode1.appendTo("ul");prepend(content)$(A).prepend(B)表示將B前置插入到A中如：$("ul").prepend($newNode1);prependTo(content)$(A).prependTo(B)表示將A前置插入到B中如：$newNode1.prependTo("ul");1、元素內(nèi)部插入子節(jié)點jQuery操作DOM節(jié)點—添加68/382、元素外部插入同輩節(jié)點語法功能after(content)$(A).after(B)表示將B插入到A之后如：$("ul").after($newNode1);insertAfter(content)$(A).insertAfter(B)表示將A插入到B之后如：$newNode1.insertAfter("ul");before(content)$(A).before(B)表示將B插入至A之前如：$("ul").before($newNode1);insertBefore(content)$(A).insertBefore(B)表示將A插入到B之前如：$newNode1.insertBefore("ul");jQuery操作DOM節(jié)點—添加69/383、除了可以插入新建的節(jié)點之外,還可以選擇已有節(jié)點,插入到別的地方,以完成節(jié)點的移動操作。實例1：添加節(jié)點。jQuery操作DOM節(jié)點—刪除70/38jQuery提供了三種刪除節(jié)點的方法remove()：刪除整個節(jié)點detach()：刪除整個節(jié)點，保留元素的綁定事件、附加的數(shù)據(jù)empty()：清空節(jié)點內(nèi)容jQuery操作DOM節(jié)點—刪除71/38remove()方法會返回被刪除節(jié)點的jQuery對象.可以把這個對象插入到其他的地方，所以也可以用這種方法來移動節(jié)點。實例2：移動節(jié)點。jQuery操作DOM節(jié)點—刪除72/38detach()方法與remove()方法功能相似，但是detach()方法刪除整個節(jié)點后，會保留元素的綁定事件、附加的數(shù)據(jù)。實例3：detach()方法的使用。jQuery操作DOM節(jié)點—刪除73/38empty()方法刪除匹配元素集合中的所有子節(jié)點,清空內(nèi)容.但是元素本身還存在。//emptychildren$("ul").empty();//emptycontent$("ulli:eq(3)").empty();empty()方法會刪除<ul>中的所有子節(jié)點。jQuery操作DOM節(jié)點—修改74/38修改文檔中的元素節(jié)點可以使用多種方法:復制節(jié)點替換節(jié)點包裹節(jié)點jQuery操作DOM節(jié)點—修改75/38復制節(jié)點在頁面中，有時需要將某個元素節(jié)點復制到另外一個節(jié)點，如購物網(wǎng)站中購物車的設(shè)計。在傳統(tǒng)的JavaScript中，需要編寫較為復雜的代碼，而在jQuery中，可以通過方法clone()輕松實現(xiàn)，該方法經(jīng)常用到的語法格式如下：//該方法僅是復制元素本身，被復制后的新元素不具有任何元素行為。參數(shù)默認為false。$(element).clone();//不僅復制匹配的DOM元素，而且將該元素的全部行為也進行復制。$(element).clone(true);實例4：每次點擊<li>都復制同樣的元素并添加在<ul>末尾。jQuery操作DOM節(jié)點—修改76/38替換節(jié)點replaceAll():用指定的HTML內(nèi)容或元素替換被選元素。

語法:$(content).replaceAll(selector)replaceWith():用新內(nèi)容替換所匹配到的元素。語法:$(selector).replaceWith(content)其中的content可以是HTML代碼,可以是新元素,也可以是已經(jīng)存在的元素。實例5：替換節(jié)點演示。jQuery操作DOM節(jié)點—修改77/38包裹節(jié)點語法格式參數(shù)說明$(element).wrap()把匹配的元素用指定的內(nèi)容或元素包裹起來。$(element).wrapAll()把所有匹配的元素用指定的內(nèi)容或元素包裹起來,這里會將所有匹配的元素移動到一起,合成一組,只包裹一個parent。$(element).wrapInner()將每一個匹配元素的內(nèi)容用指定的內(nèi)容或元素包裹起來。實例6：包裹節(jié)點方法演示。jQuery操作DOM節(jié)點—查找78/38查找節(jié)點非常容易，使用選擇器就能輕松完成各種查找工作。這也是我們在第三章中介紹的內(nèi)容。例：查找元素節(jié)點p返回p內(nèi)的文本內(nèi)容$("p").text();例：查找元素節(jié)點p的屬性返回屬性名稱對應的屬性值$("p").attr("title"),返回p的屬性title的值。jQuery其他操作79/38屬性操作樣式操作設(shè)置和獲取元素（HTML,文本和值）遍歷節(jié)點等操作jQuery其他操作80/38//獲取元素屬性值attr()//設(shè)置元素屬性值attr(attributeName,value)屬性操作其中，獲取元素屬性值attr()方法返回類型是String，讀取不存在的屬性會返回undefined。

設(shè)置元素屬性值的方法中參數(shù)attributeName表示屬性的名稱，value表示屬性的值。jQuery其他操作81/38如果要設(shè)置多個屬性，也可以通過attr()方法實現(xiàn)，其語法格式如下所示：attr({attributeName0:value0,attributeName1:value1})實例7：使用attr()方法獲取元素屬性值。（注意.each()方法的使用）實例8：attr（）方法設(shè)置元素屬性實例9：寫入一個不存在的屬性名。實例10：通過attr()方法設(shè)置多個屬性值。實例12：removeAttr()方法的使用。屬性操作jQuery其他操作—樣式操作82/38在頁面中，元素樣式的操作包含：直接設(shè)置樣式、追加和移除、樣式切換幾部分。（1）直接設(shè)置樣式值其中name為樣式名稱，value為樣式值。還可以通過css()方法同時設(shè)置多個樣式值。css(name,value)或css({name:value,name:value,name:value…})jQuery其他操作—樣式操作83/38$("img").css({"border":"5px

solidred","opacity":"0.5",

height:"100px",

width:"200px"});});（1）直接設(shè)置樣式值jQuery其他操作—樣式操作84/38（2）追加和移除樣式

其中addClass()方法是向匹配的元素增加指定的類名(一個或多個)。注意對于元素來說,class屬性可以有多個值.該方法不會移除已經(jīng)存在的值,而是在原有的基礎(chǔ)上追加一個或多個class屬性。

移除樣式語法格式如下：removeClass()方法從被選元素移除一個或多個類.如需移除若干類,用空格來分隔類名。如果沒有傳參數(shù),該方法將會移除被選元素的所有類。addClass(class)或addClass(class1class2…classN)removeClass(“style2”)或removeClass("style1style2")jQuery其他操作—樣式操作85/38實例：二級導航特效。 $(function(){ $("li").mouseover(function(){ $(this).addClass("emClass"); }); $("li").mouseout(function(){ $(this).removeClass("emClass"); });

});jQuery其他操作—樣式操作86/38（3）樣式切換toggleClass()方法模擬了addClass()與removeClass()實現(xiàn)樣式切換的過程。方法對被選元素的一個或多個類進行切換(設(shè)置或移除)。該方法檢查每個元素中的指定類,如果存在則刪除,如果不存在則添加。toggleClass(class)jQuery其他操作—樣式操作87/38

$(function(){ $("li").mouseover(function(){ //$(this).addClass("emClass"); $(this).toggleClass("emClass"); }); $("li").mouseout(function(){ //$(this).removeClass("emClass"); $(this).toggleClass("emClass"); }); });實例：toggleClass()方法實現(xiàn)二級導航特效jQuery其他操作—Css-Dom的其他操作88/38除上述元素的CSS相關(guān)屬性的設(shè)置與獲取外，還有其他獲取和設(shè)置元素高度、寬度、相對位置等的樣式操作方法，如表語法功能css()設(shè)置或返回匹配元素的樣式屬性height([value])設(shè)置或返回匹配元素的高度width([value])設(shè)置或返回匹配元素的寬度offset([value])返回以像素為單位的top和left坐標。此方法僅對可見元素有效這里不詳細舉例介紹，大家可以參考jQuery官網(wǎng)（/category/css/）幫助文檔進行學習jQuery其他操作—設(shè)置和獲取元素html()和text()的區(qū)別如下：89/38語法參數(shù)功能html()無參數(shù)用于獲取第一個匹配元素的HTML內(nèi)容或文本內(nèi)容html(content)content參數(shù)為元素的HTML內(nèi)容用于設(shè)置所有匹配元素的HTML內(nèi)容或文本內(nèi)容text()無參數(shù)用于獲取所有匹配元素的文本內(nèi)容text(content)content參數(shù)為元素的文本內(nèi)容用于設(shè)置所有匹配元素的文本內(nèi)容jQuery其他操作—設(shè)置和獲取元素實例：html()方、text()方法的使用。90/38$("p").html()$("p").text()jQuery其他操作—值91/38在jQuery中，要獲取或設(shè)置元素的值可以通過val()方法實現(xiàn)，其語法格式如下所示：如果不帶參數(shù)，是獲取某元素的值；帶參數(shù)的話即使設(shè)置元素的值val()或者val(val)jQuery其他操作—值92/38實例：通過val()方法獲取文本框和多選項的值。$("select").val()$("input").val()jQuery其他操作—遍歷節(jié)點93/38（1）each()方法

語法：

函數(shù)function()為每個匹配元素規(guī)定運行的函數(shù),其中index標識選擇器的index位置，元素的序號（從0開始）。element表示當前的元素（也可使用"this"選擇器）。如果需要訪問元素中的屬性，可以借助形參index，配合this關(guān)鍵字來實現(xiàn)元素屬性的設(shè)置或獲取。$(selector).each(function(index,element))jQuery其他操作—遍歷節(jié)點94/38(1)each()方法<ul><li>花開堪折直須折</li><li>莫待無花空折枝</li></ul>$(function(){ $("li").each(function(index){console.log(index+":"+$(this).text());}); jQuery其他操作—遍歷節(jié)點95/38(2)其他遍歷方法除了上面的each()方法外，節(jié)點遍歷的方法還包括子元素遍歷、同輩元素遍歷、前輩元素遍歷等方法，具體參照表語法功能.children([selector])獲得匹配元素集合中每個元素的所有子元素。但不包含子元素的子元素。.prev([selector])用于獲取緊鄰匹配元素之前的元素.next（[selector]）獲取匹配元素集中每個元素的緊隨其后的兄弟。如果提供了選擇器，則僅當它與該選擇器匹配時，它才會檢索下一個兄弟。.prev（[selector]）取匹配元素集中每個元素的前一個兄弟。如果提供了選擇器，則僅當它與該選擇器匹配時，它才會檢索前一個兄弟。.siblings（[selector]）獲取匹配元素集中每個元素的兄弟元素，可選擇由選擇器過濾。.parents（[selector]）獲取當前匹配元素集中每個元素的祖先，可選擇通過選擇器進行過濾。.parent（[selector]）獲取當前匹配元素集中每個元素的父元素，可選擇由選擇器過濾,注意此處獲取的是每個元素的父元素，與.parents（[selector]）不同之處。在此處不一一列舉了，請查看jQuery官網(wǎng)（/category/traversing/tree-traversal/）上的api幫助文檔進行學習?？偨Y(jié)本章節(jié)主要分兩大部分內(nèi)容來介紹jQuery對DOM的操作。第一部分為jQuery對DOM節(jié)點的操作：增、刪、改、查；第二部分為jQuery對DOM樣式內(nèi)容的操作。在這里需要熟練掌握這兩大部分內(nèi)容，重點是這兩部分方法的靈活使用。96/38謝謝！第五章JQuery中的事件本章內(nèi)容事件簡介頁面載入事件jQuery綁定事件事件冒泡事件對象（常用屬性、案例）事件簡介正如大家所了解的頁面在加載時候，會觸發(fā)Load事件。當用戶單擊某個按鈕時候，會觸發(fā)該按鈕的click事件，通過這些事件實現(xiàn)各種功能或某些操作。事件在元素對象和功能代碼中起著重要的橋在學習jQuery中的事件之前可以先回顧下JavaScript中的事件。梁作用

頁面載入事件Window.onload()$(document).ready()執(zhí)行時機必須等待網(wǎng)頁中所有的內(nèi)容(包括圖片)都加載完畢后才執(zhí)行網(wǎng)頁中所有的DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，并不需要所有的DOM元素都加載完

在常規(guī)的JavaScript代碼中，通常使用Window.onload()方法在jQuery中，使用的是$(document).ready()方法。$(document).ready()方法是事件模塊中最重要的一個函數(shù)，可以極大的提高Web應用程序的響應速度。jQuery就是用$(document).ready()方法來替代傳統(tǒng)的JavaScript的window.onload方法Window.onload()和$(document).ready()的執(zhí)行時機jQuery綁定事件—常見事件監(jiān)聽方式HTML標簽內(nèi)聯(lián)事件用JavaScript實現(xiàn)事件監(jiān)聽jQuery綁定事件—常見事件監(jiān)聽方式用jQuery實現(xiàn)事件監(jiān)聽比較常見的一種便捷的事件監(jiān)聽方法截至jQuery3.0已被棄用。自jQuery1.7以來被.on()方法所取代即第三種事件監(jiān)聽方法從jQuery1.7開始,所有的事件綁定方法最后都是調(diào)用.on()方法來實現(xiàn)的第四種和第五種方法,監(jiān)聽的是body上所有button元素的click事件。jQuery綁定事件—使用on方法綁定事件on（）方法的常見語法格式如下：$(selector).on(event,[data],function)參數(shù)說明：event：必需。添加到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。data:

可選。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。function:

必需。規(guī)定事件發(fā)生時運行的函數(shù)。jQuery綁定事件—使用on方法綁定事件on（）方法的常見語法格式如下：$(selector).on(event,[data],function)on()方法提供了幾個比較有用的功能：簡單事件綁定將多個事件綁定到一個事件處理程序jQuery綁定事件—使用on方法綁定事件將多個事件和多個處理程序綁定到選定的元素在事件處理程序中使用有關(guān)事件的詳細信息將自定義數(shù)據(jù)傳遞到事件對象jQuery綁定事件—使用one方法綁定事件參數(shù)說明：event：必需。規(guī)定添加到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。data:

可選。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。function:

必需。規(guī)定事件發(fā)生時運行的函數(shù)。jQuery綁定事件—使用one方法綁定事件$("div").one("click",{hll:"helloworld!"},function(event){alert(event.data.hll);});});下面通過實例來看下one()方法的使用，我們可以對以上實例稍作修改，修改代碼如下所示。jQuery綁定事件—解除事件綁定jQuery綁定事件—解除事件綁定off()不帶參數(shù)調(diào)用會刪除附加到元素的所有處理程序。通過提供事件名稱，命名空間，選擇器或處理函數(shù)名稱的組合，可以在元素上刪除特定事件處理程序。實例：為div框解除事件綁定。$("div").off("click");單擊“解除綁定”按鈕后，提示“div的click事件綁定已解除”然后再次點擊綠色div框，我們看到?jīng)]有彈出提示框，div的click事件綁定已解除了。jQuery綁定事件—模擬用戶操作jQuery綁定事件—模擬用戶操作實例：頁面中添加兩個button按鈕,點擊“hello”按鈕時候，彈出提示框“helloworld!”,再實現(xiàn)通過點擊“triggerhello”按鈕觸發(fā)“hello”按鈕的click事件。jQuery綁定事件—模擬用戶操作trigger()方法在觸發(fā)事件的同時，還可以傳遞參數(shù)，我們可以對以上實例進行修改，代碼如下所示：jQuery綁定事件—模擬用戶操作jQuery綁定事件—模擬用戶操作jQuery綁定事件—模擬用戶操作jQuery綁定事件—常見事件分類jQuery能夠綁定的事件方法，我們可以大致分為以下幾類：文檔加載事件、瀏覽器事件、鍵盤事件、鼠標事件、表格事件。文檔加載事件鍵盤事件

注意：以上方法都可以使用on()方法來實現(xiàn)，舉例說明：keydown()方法只是on("keydown",handler)一種簡寫，因此可以使用off("keydown")解除綁定。其他鍵盤事件方法與keydown()方法類似。jQuery綁定事件—常見事件分類jQuery能夠綁定的事件方法，我們可以大致分為以下幾類：文檔加載事件、瀏覽器事件、鍵盤事件、鼠標事件、表格事件。3.鼠標事件方法說明click()鼠標單擊時觸發(fā)dblclick()鼠標雙擊時觸發(fā)mousedown()鼠標的按鍵按下時觸發(fā)mouseup()鼠標的按鍵松開時觸發(fā)mouseenter()鼠標進入時觸發(fā)mouseleave()鼠標指針移出元素時觸發(fā)mousemove()鼠標在DOM內(nèi)部移動時觸發(fā)mouseover()鼠標經(jīng)過元素時觸發(fā)contextmenu()鼠標的右鍵打開上下文菜單時觸發(fā)hover()鼠標進入和退出時觸發(fā)兩個函數(shù)，相當于mouseenter加上mouseleavejQuery綁定事件—常見事件分類jQuery能夠綁定的事件方法，我們可以大致分為以下幾類：文檔加載事件、瀏覽器事件、鍵盤事件、鼠標事件、表格事件。4.表格事件方法說明focus()當元素獲得焦點時（當通過鼠標點擊選中元素或通過

tab鍵定位到元素時）觸發(fā)blur()當元素失去焦點時觸發(fā)change()當<input>、<select>或<textarea>的內(nèi)容改變時（僅適用于表單字段）觸發(fā)；submit()當<form>表單提交時觸發(fā)；select()當<textarea>或文本類型的<input>元素中的文本被選擇時，會發(fā)生觸發(fā)。jQuery綁定事件—常見事件分類jQuery能夠綁定的事件方法，我們可以大致分為以下幾類：文檔加載事件、瀏覽器事件、鍵盤事件、鼠標事件、表格事件。5.瀏覽器事件方法說明resize()每當更改瀏覽器窗口的大小時會觸發(fā)scroll()只要元素的滾動位置發(fā)生變化，就會觸發(fā)。鼠標單擊或拖動滾動條，在元素內(nèi)拖動，按箭頭鍵或使用鼠標滾輪可能會導致此事件。事件冒泡對于大多數(shù)事件，只要頁面上出現(xiàn)某些內(nèi)容（如單擊某個元素），事件就會從它發(fā)生的元素移動到其父元素，然后移動到父元素的父元素，依此類推，直到它到達根元素（window）為止，即這一過程我們稱為事件冒泡，事件冒泡觸發(fā)的順序是從最下面往上觸發(fā)，即從DOM樹的葉子到根。事件冒泡實例：頁面有三個嵌套的div框，分別添加click事件。事件冒泡事件冒泡怎樣阻止事件冒泡呢？這里我們使用事件對象event提供的方法stopPropagation()或者使用“returnfalse”這兩種方式阻止事件冒泡。事件對象事件對象對象event的常用屬性事件對象對象event的常用屬性事件對象對象event的常用方法方法說明event.preventDefault()

阻止默認行為，可以用

event.isDefaultPrevented()

來確定preventDefault是否被調(diào)用過了event.stopPropagation()

阻止事件冒泡，事件是可以冒泡的，為防止事件冒泡到DOM樹上，不觸發(fā)任何前輩元素上的事件處理函數(shù)，可以用

event.isPropagationStopped()

來確定stopPropagation是否被調(diào)用過了event.isDefaultPrevented()

判斷下阻止默認行為的事件是否發(fā)生過event.isPropagationStopped()判斷下是否阻止過事件的冒泡總 結(jié)本章主要介紹了jQuery中的事件，首先需要掌握頁面載入事件及了解其執(zhí)行時機；其次通過大量實例介紹了事件綁定方式、事件綁定方法、解除事件綁定方法以及模擬用戶操作，并根據(jù)當前最新版的jQuery庫對事件綁定方法進行介紹；最后介紹了與事件有關(guān)的事件冒泡現(xiàn)象、事件對象的常用屬性及方法。這三方面內(nèi)容是jQuery事件的基礎(chǔ)重點，需要大家牢牢掌握。謝謝！130第六章JQuery中的動畫本章內(nèi)容jQuery基本動畫效果jQuery常用動畫效果jQuery自定義動畫效果基本動畫效果語法功能show([speed,[easing],[fn]])顯示隱藏的匹配元素。如果選擇的元素是可見的，這個方法將不會改變?nèi)魏螙|西。無論這個元素是通過hide()方法隱藏的還是在CSS里設(shè)置了display:none;，這個方法都將有效。hide([speed,[easing],[fn]])隱藏顯示的元素.如果選擇的元素是隱藏的，這個方法將不會改變?nèi)魏螙|西。toggle([speed],[easing],[fn])用于綁定兩個或多個事件處理器函數(shù)，以響應被選元素的輪流的

click事件。如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。Show()方法和Hide()方法Show()方法的用法 語法:$(”element”).show();

速度參數(shù)：(1)$(“element”).show(“slow”)；//默認時間為600毫秒

(2)$(“element”).show(“normal”)；//默認時間為400毫秒

(3)$(“element”).show(“fast”)；//默認時間為200毫秒

(4)$(“element”).show(數(shù)字)；//任意數(shù)字，單位為毫秒注意：參數(shù)雙引號的使用Hide()方法的用法語法;$(“element”).hide();Show()方法和Hidden()方法的作用：顯示和隱藏等同于element.css(“display”,”none”)等同于element.css(“display”,”block/inline”)查看相關(guān)代碼Show()方法和Hide()方法綜合列子

<htmlxmlns="/1999/xhtml"><head><title></title><scriptsrc="js/jquery-1.4.1-vsdoc.js"type="text/javascript"></script><scripttype="text/javascript">$(document).ready(function(){$("#panelh5.head").toggle(function(){$(this).next("div.content").hide();},function(){$(this).next("div.content").show();});});</script>

</head><body><divid="panel"><h5class=“head”>查看書籍</h5><divclass="content"><imgsrc="images/BookCovers/9787900635280.jpg"/></div></div></body></html>查看代碼效果Show()方法和Hide()方法運行效果：查看圖書請點擊Toggle()方法Toggle()方法

如果元素是可見的，則切換為隱藏的；如果元素是隱藏，則切換為可見的。相當于jQuery代碼

slideToggle()方法slideToggle()方法這個方法只是調(diào)整元素的高度相當于jQuery代碼常用動畫效果語法功能slideDown([speed],[easing],[fn])通過高度變化（向下增大）來動態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個回調(diào)函數(shù)。slideUp([speed,[easing],[fn]])通過高度變化（向上減?。﹣韯討B(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個回調(diào)函數(shù)。slideToggle([speed],[easing],[fn])通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發(fā)一個回調(diào)函數(shù)。

fadeIn([speed],[easing],[fn])通過不透明度的變化來實現(xiàn)所有匹配元素的淡入效果，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。

fadeOut([speed],[easing],[fn])通過不透明度的變化來實現(xiàn)所有匹配元素的淡出效果，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。

fadeTo([[speed],opacity,[easing],[fn]])把所有匹配元素的不透明度以漸進方式調(diào)整到指定的不透明度，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。

fadeToggle([speed,[easing],[fn]])通過不透明度的變化來開關(guān)所有匹配元素的淡入和淡出效果，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。

jQuery中為我們提供了兩種動畫顯示方法：slideUp()方法和slideDown()方法、slideUp()方法和slideDown()方法都只會改變元素的高度。但當某一個元素的Display屬性為none時調(diào)用slideDown()方法、這個元素就會由上至下延伸顯示、而調(diào)用slideUp時則剛好相反——由下到上縮短隱藏。實例代碼如下：切換元素的狀態(tài)、點擊時實現(xiàn)slideUp()方法和slided()方法的互換值得注意的是：在jQuery中任何動畫都有三種速度參數(shù)(“slow(0.6s)”,”normal(0.4s)”,”fast(0.2s)”)可以設(shè)置。當使用關(guān)鍵字的時候要加上引號例：show(“fast”)，而使用數(shù)字時間作為參數(shù)是則不用加例：show(600)slideUp()、slideDown()fideIn()、fideOut()作用：改變元素的不透明度fadeIn()方法：降低元素的不透明度fadeOut()方法：提高元素的不透明度隨著互聯(lián)網(wǎng)的高速發(fā)展、上面的動畫顯示方法已經(jīng)不能夠滿足我們的使用需求了我們又應該怎么辦呢？不用擔心、jQuery跟我們提供了自定義動畫方法--animate()animate()方法的語法如下：Animate(params,speed,callback);實例代碼如下：一個包含樣式屬性及值的映射，例：｛property1:”value1”,property2”value2”｝速度參數(shù)，可選！在動畫完成時執(zhí)行的函數(shù)，可選！設(shè)置元素從左向右滾動！設(shè)置滾動的寬度設(shè)置滾動的時間！自定義動畫效果animate()累加、累減動畫：用于在之前移動的位置上實現(xiàn)像素的累加或者累減用法：在之前是設(shè)置的參數(shù)前加上”+=”或者”-=”就表示累加或者累減實例如下：多重動畫：用于當單個的動畫顯示已經(jīng)不能夠滿足我們頁面的需求時，同時執(zhí)行多個動畫。來達到我們期望的效果。（1）同時執(zhí)行多個動畫、實例如下：自定義動畫效果animate()實現(xiàn)動畫的累加！由左至右滾動500像素高度增加200像素設(shè)置滾動時間為3S自定義動畫方法animate()(2)按照順序執(zhí)行多個動畫、及按照一定的順序先執(zhí)行某一個動畫、接著再執(zhí)行另一個動畫。達到這個目的也很簡單、只需要把代碼拆開就行了。實例如下：由左至右滾動500px向右滾動500px之后高度再增加200px自定義動畫animate()

以上講解的都是比較簡單的動畫效果，下面為大家介紹比較復雜的動畫效果——綜合動畫實例如下：設(shè)置層的透明度設(shè)置淡出速度動畫回調(diào)函數(shù)

如果想在最后一步切換元素的CSS樣式，而不是隱藏元素如果按照常規(guī)的方式，將fadeOut（“slow”）改為css（“border”，“5pxsolidblue”）不能得到我們預期的效果。但是只要把css（）方法寫在最后一個動畫的回調(diào)函數(shù)里即可。顯示的CSS樣式

思考：

怎么辦？動畫回調(diào)函數(shù)Warning!

可以用回調(diào)函數(shù)（callback）對非動畫方法實現(xiàn)排隊。callback回調(diào)函數(shù)適用于jQuery所有動畫效果的方法，例如slideDown（）方法的回調(diào)函數(shù)這段代碼表示id=“element”的元素將在0.4秒內(nèi)（正常速度）向下完全展開，當動畫完成后，執(zhí)行回調(diào)函數(shù)體內(nèi)的代碼。停止動畫語法：

stop（[clearQuery][,gotoEnd]）Stop()立即停止當前正在進行的動畫Stop(true)程序會把當前元素接下來尚未執(zhí)行完的動畫隊列都清空Stop(true,true)停止當前動畫并直接到達當前動畫的末 狀態(tài)，并清空動畫隊列Stop(false,true)讓.當前動畫直接到達末狀態(tài)stop（）里面的參數(shù)都是可選的為Boolean（true或false）

Stop()方法

判斷元素是否處于動畫狀態(tài)使用效果注意事項解決方法當用戶快速在某個元素尚執(zhí)行animate()動畫時，就會出現(xiàn)動畫積累在使用animate()方法的時候，要避免動畫積累而導致的動畫與用戶的行為不一致。判斷元素是否正處于動畫狀態(tài)，如果元素不處于動畫狀態(tài)，才為元素添加新的動畫，否則不添加。Warn：這個判斷方法在animate()動畫中經(jīng)常被用到Animate()具體實現(xiàn)代碼如下：Animate()其它動畫方法除了上面我們提到的動畫方法，jQuery中還有3個專門用于交互的動畫方法。Toggle(speed,[callback]）slideToggle(speed,[callback])fadeTo(speed,[callback])

可以切換元素的可見狀態(tài)

通過高度變化來切換匹配元素的可見性可以把元素的不透明度以漸進方式調(diào)整到指定位置fadeTo()方法fadeTo()方法

這個動畫只調(diào)整元素的不透明度，即匹配的元素的高度和寬度不會發(fā)生變化當“標題”鏈接被點擊后，“內(nèi)容”會漸漸地調(diào)整到指定的不透明圖（20%）動畫方法概括

方法名

說明Hide()和show()同時修改多個樣式屬性即高度、寬度和不透明度fadeIn()和fadeOut()只改變不透明度slideUp()和slideDown()只改變高度fadeTo()只改變不透明度Toggle()用來代替hide()和show()方法，所以會同時修改多個樣式屬性即高度、寬度和不透明度sideToggle()用來代替slideUp()和slideDown方法、所以只能改變高度animate()屬于自定義動畫的方法，以上各種動畫方法實質(zhì)內(nèi)部都調(diào)用來animate()方法。此外，直接使用animate()方法還能自定義其他的樣式屬性，例如：“l(fā)eft”,”marginLeft”,”scrollTop”等從基本動畫方法hide()和show()到fadeIn()和fadeOut(),然后到slideUp()和slideDown(),再到自定義動畫方法animate(),最后到交互動畫方法toggle()、slideToggle()和fadeTo().總結(jié)概括如下：

特別注意animate()方法特別注意animate()方法,可以使用它來代替其他所有的動畫方法。用animate()方法代替show()方法$(“p”).animate({height:”show”,width:”show”,opacity:”show”},400)等價于$(“p”).show(400);

用animate()方法代替fadeIn()方法

$(“p”).animate({opacity:”show}，400)等價于$(“p”).fadeIn(400);用animate方法代替slideDown()方法$(“p”).animate({height:”show”},400)等價于$(“p”).slideDown(400);用animate()方法代替fadeTo()方法$(“p”).animate({opacity:”0.6”},400)等價于$(“p”).fadeTo(400，0.6);動畫隊列(1)一組元素的動畫效果1、當在一個animate()方法中應用多個屬性時，動畫是同時發(fā)生的。2、當以鏈式的寫法應用動畫方法時，動畫是按照順序發(fā)生的。

(2)多組元素上的動畫效果1、默認情況下，動畫都是同時發(fā)生的。2、當以回調(diào)的形式應用動畫方式時，動畫是按照回調(diào)順序發(fā)生的。另外，在動畫方法中，要注意其他非動畫方法會插隊，例如css()方法要使非動畫方法也按照順序執(zhí)行，需要把這些方法寫在動畫方法的回調(diào)函數(shù)中。案例研究用戶單擊左上角的左右箭頭，來控制視頻展示的左右滾動。當單擊向右箭頭時，下面的展示視頻會向左滾動隱藏，同時新的視頻展示會以滾動方式顯示出來。在模擬這個效果之前，需要明確那些事必須要做的！當視頻展示內(nèi)容處于最后一個版面的時候，如果再向后，則應該跳轉(zhuǎn)到第一個版面當視頻展示內(nèi)容處于第一個版面的時候，如果再向前，就應該跳轉(zhuǎn)到最后一個版面。左上角的圓點應該與動畫一起切換，代表當前所處的版面。視頻展示效果圖案例研究

首先把頁面結(jié)構(gòu)設(shè)計好 結(jié)構(gòu)分為：三層，一個總層，兩個頁面層 代碼如下：

<divclass="v_show"> <divclass="v_caption"> //頭部標題，按鈕等

</div> <divclass="v_content"> //視頻內(nèi)容展示區(qū)域

</div> </div>案例研究最終實際的HTML頁面代碼如下：<divclass="v_caption"><h2class="cartoon"title="卡通動漫">卡通動漫</h2><divclass="highlight_tip"><spanclass="current">*</span><span>*</span><span>*</span><span>*</span></div><divclass="change_btn"><spanclass="prev"><imgsrc="image/top.gif"alt="上一頁"/></span><spanclass="next"><imgsrc="image/end.gif"alt="下一頁"/></span></div><em><ahref="#">更多</a></em></div>案例研究<divclass="v_content"><divclass="v_content_list"><ul><li><ahref="#"><imgsrc="image/1.jpg"alt="海邊"/></a><h4><ahref="#">海邊</a></h4><span>播放<em>57,865</em></span></li>

中間的li元素省略

<li><ahref="#"><imgsrc="image/8.jpg"alt="心"/></a><h4><ahref="#">心</a></h4><span>播放<em>58,865</em></span></li></ul></div></div>案例研究實現(xiàn)滑動的jQuery代碼如下：$(function(){varpage=1;vari=4;//每版放4張圖片

$("spa

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論