傳智網(wǎng)絡(luò)營銷-第十三天jqueryjquery第二課

輕松學(xué)習(xí)jquery第二課

jqueryDOM操作主講：張鵬

郵箱：目標(biāo)jqueryDOM操作jqueryCSS操作Jquery動畫JQuery的Dom操作1、使用html()方法讀取或者設(shè)置元素的innerHTML： alert($("#btn1").html()); $("#btn1").html("hello");2、使用text()方法讀取或者設(shè)置元素的innerText： alert($("#btn1").text()); $("#btn1").text("hello");3、使用attr()方法讀取或者設(shè)置元素的屬性，對于JQuery沒有封裝的屬性（所有瀏覽器沒有差異的屬性）用attr進行操作。

alert($(“#img1").attr(“src")); $(“#img1”).attr(“alt”,“網(wǎng)易");4、使用removeAttr(“src")刪除屬性。刪除的屬性在源代碼中看不到，這是和清空屬性的區(qū)別。“查看源文件”只能看服務(wù)器上下載下來的那份創(chuàng)建節(jié)點創(chuàng)建節(jié)點:使用jQuery的工廠函數(shù)$():$(html);會根據(jù)傳入的html標(biāo)記字符串創(chuàng)建一個DOM對象,并把這個DOM對象包裝成一個jQuery對象返回.注意:動態(tài)創(chuàng)建的新元素節(jié)點不會被自動添加到文檔中,而是需要使用其他方法將其插入到文檔中;當(dāng)創(chuàng)建單個元素時,需注意閉合標(biāo)簽和使用標(biāo)準(zhǔn)的XHTML格式.例如創(chuàng)建一個<p>元素,可以使用$(“<p/>”)或$(“<p></p>”),但不能使用$(“<p>”)或$(“</P>”)創(chuàng)建文本節(jié)點就是在創(chuàng)建元素節(jié)點時直接把文本內(nèi)容寫出來;創(chuàng)建屬性節(jié)點也是在創(chuàng)建元素節(jié)點時一起創(chuàng)建創(chuàng)建新節(jié)點案例在該節(jié)點下添加新的節(jié)點<liid="tj"name="tianjin">天津</li>內(nèi)部插入節(jié)點動態(tài)創(chuàng)建HTML元素并沒有實際用處,還需要將新創(chuàng)建的節(jié)點插入到文檔中,即成為文檔中某個節(jié)點的子節(jié)點

*append(content):向每個匹配的元素的內(nèi)部的結(jié)尾處追加內(nèi)容*appendTo(content):將每個匹配的元素追加到指定的元素中的內(nèi)部結(jié)尾處*prepend(content):向每個匹配的元素的內(nèi)部的開始處插入內(nèi)容*prependTo(content):將每個匹配的元素插入到指定的元素內(nèi)部的開始處外部插入節(jié)點*after(content):在每個匹配的元素之后插入內(nèi)容*before(content):在每個匹配的元素之前插入內(nèi)容*insertAfter(content):把所有匹配的元素插入到另一個、指定的元素元素集合的后面*insertBefore(content):把所有匹配的元素插入到另一個、指定的元素元素集合的前面以上方法不但能將新創(chuàng)建的DOM元素插入到文檔中,也能對原有的DOM元素進行移動. var$one_li=$("ulli:eq(0)"); var$two_li=$("ulli:eq(1)"); $two_li.insertBefore($one_li);刪除節(jié)點remove():從DOM中刪除所有匹配的元素,傳入的參數(shù)用于根據(jù)jQuery表達式來篩選元素.當(dāng)某個節(jié)點用remove()方法刪除后,該節(jié)點所包含的所有后代節(jié)點將被同時刪除.這個方法的返回值是一個指向已被刪除的節(jié)點的引用.empty():清空節(jié)點–清空元素中的所有后代節(jié)點復(fù)制節(jié)點clone():克隆匹配的DOM元素,返回值為克隆后的副本.但此時復(fù)制的新節(jié)點不具有任何行為.clone(true):復(fù)制元素的同時也復(fù)制元素中的的事件

<button>保存</button><p>段落</p>

//克隆節(jié)點，不克隆事件

$("button").clone().appendTo("p");

//克隆節(jié)點，克隆事件

$("button").clone(true).appendTo("p");替換節(jié)點replaceWith():將所有匹配的元素都替換為指定的HTML或DOM元素replaceAll():顛倒了的replaceWith()方法.注意:若在替換之前,已經(jīng)在元素上綁定了事件,替換后原先綁定的事件會與原先的元素一起消失//<p>段落</p>//方式一$("p").replaceWith("<button>登陸</button>");//方式二$("<button>登陸</button>").replaceAll("p");屬性操作attr():獲取屬性和設(shè)置屬性當(dāng)為該方法傳遞一個參數(shù)時,即為某元素的獲取指定屬性當(dāng)為該方法傳遞兩個參數(shù)時,即為某元素設(shè)置指定屬性的值jQuery中有很多方法都是一個函數(shù)實現(xiàn)獲取和設(shè)置.如:attr(),html(),text(),val(),height(),width(),css()等.removeAttr():刪除指定元素的指定屬性$(“div”).html(“<p>奧運接受了</p>");$(“div”).html();樣式操作獲取class和設(shè)置class:class是元素的一個屬性,所以獲取class和設(shè)置class都可以使用attr()方法來完成.追加樣式:addClass()移除樣式:removeClass()從匹配的元素中刪除全部或指定的class切換樣式:toggleClass()控制樣式上的重復(fù)切換.如果類名存在則刪除它,如果類名不存在則添加它.判斷是否含有某個樣式:hasClass()判斷元素中是否含有某個class,如果有,則返回true;否則返回false設(shè)置和獲取HTML,文本和值讀取和設(shè)置某個元素中的HTML內(nèi)容:html().該方法可以用于XHTML,但不能用于XML文檔讀取和設(shè)置某個元素中的文本內(nèi)容:text().

該方法既可以用于XHTML也可以用于XML文檔.讀取和設(shè)置某個元素中的值:val()

該方法類似JavaScript中的value屬性.對于文本框,下拉列表框,單選框該方法可返回元素的值(多選框只能返回第一個值).如果為多選下拉列表框,則返回一個包含所有選擇值的數(shù)組val()練習(xí)(課堂練習(xí))提示：javaScript中數(shù)組表示法[“a”,“b”]常用的遍歷節(jié)點方法取得匹配元素的所有子元素組成的集合:children().該方法只考慮子元素而不考慮任何后代元素.取得匹配元素后面緊鄰的同輩元素的集合:next();取得匹配元素前面緊鄰的同輩元素的集合:prev()取得匹配元素前后所有的同輩元素:siblings()<inputtype="button"value="查找所有子元素"id="b2"/><inputtype="button"value="獲取后面的同輩元素"id="b3"/><inputtype="button"value="獲取前面的同輩元素"id="b4"/>CSS-DOM操作獲取和設(shè)置元素的樣式屬性:css()獲取和設(shè)置元素透明度:opacity屬性注:IE6,IE7不支持此屬性,請使用Firefox1.5,或Opera9瀏覽

opacity:0.1獲取和設(shè)置元素高度,寬度:height(),width().在設(shè)置值時,若只傳遞數(shù)字,則默認(rèn)單位是px.如需要使用其他單位則需傳遞一個字符串,例如$(“p:first”).height(“2em”);獲取元素在當(dāng)前視窗中的相對位移:offset().其返回對象包含了兩個屬性:top,left.該方法只對可見元素有效em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸事件JQuery中的事件綁定：$(“#btn”).bind(“click”,function(){})，每次都這么調(diào)用太麻煩，所以jQuery可以用$(“#btn”).click(function(){})來進行簡化。合成事件hover，hover(enterfn,leavefn)，當(dāng)鼠標(biāo)放在元素上時調(diào)用enterfn方法，當(dāng)鼠標(biāo)離開元素的時候調(diào)用leavefn方法如果想獲得事件相關(guān)的信息，只要給響應(yīng)的匿名函數(shù)增加一個參數(shù)：e，e就是事件對象。 $(document).mousemove(function(e){ $("span").css({ "top":(e.pageY+20)+"px", "left":(e.pageX+20)+"px" }).text("X="+e.pageX+",Y="+e.pageY); });鼠標(biāo)獲得發(fā)生事件時鼠標(biāo)的位置$(document).mousemove(function(e){document.title=e.pageX+","+e.pageY;});在mousemove、click等事件的匿名響應(yīng)函數(shù)中如果指定一個參數(shù)e，那么就可以從e讀取發(fā)生事件時的一些信息，比如對mousemove等鼠標(biāo)事件來說，就可以讀取e.pageX、e.pageY來獲得發(fā)生事件時鼠標(biāo)在頁面的坐標(biāo)。動畫show()、hide()方法會顯示、隱藏元素。用toggle()方法在顯示、隱藏之間切換

$(“.btn1").click(function(){$("div").show();});$(“.btn2").click(function(){$("div").hide();});如果show、hide方法不帶參數(shù)則是立即顯示、立即隱藏，如果指定速度參數(shù)則會用指定時間進行動態(tài)顯示、隱藏，單位為毫秒，也可以使用三個內(nèi)置的速度：fast（200毫秒）、normal（400毫秒）、slow（600毫秒），jQuery動畫函數(shù)中需要速度的地方一般也可以使用這個三個值。toggle、slideDown、slideUp隊列操作*當(dāng)多個動畫效果操作中包含非動畫操作時，需要將非動畫操作加入動畫隊列才能按順序執(zhí)行

$("div").animate({left:"500px",width:"300px",opacity:1},300