柚子快報邀請碼778899分享：jQuery

http://yzkb.51969.com/

第八章使用jQuery操作Dom

設(shè)置和獲取樣式

css(name,value) ; 設(shè)置單個

css({name:value, name:value,name:value…}) ;設(shè)置多個

css(name); 獲取屬性值

追加和移除樣式

追加addClass():

$(selector).addClass(class); 加一個樣式

$(selector).addClass(class1 class2 … classN);加多個樣式

移除removeCalss();

$(selector).removeClass("class") ; ?

$(selector).removeClass("class1 class2 … classN ") ;

?

判斷是否含指定樣式

$(selector). hasClass(class);

HTML代碼操作html()

$("div.left").html(); ? 獲取元素中的html代碼

$("div.left").html("

標簽內(nèi)容操作text()

$("div.left").text();獲取元素中的文本內(nèi)容

$("div.left").text("

屬性值操作val()

$(this).val();獲取元素的value屬性值

$(this).val(value);設(shè)置元素的value屬性值

利用工廠函數(shù)創(chuàng)建節(jié)點元素

var $newNode=$("

var $newNode1=$("

var $newNode2=$("

插入節(jié)點

元素內(nèi)部插入子節(jié)點

語法功能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");

元素外部插入同輩節(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");

刪除節(jié)點

remove()：刪除整個節(jié)點

empty()：清空節(jié)點內(nèi)容

detach()；刪除整個節(jié)點，保留元素的綁定事件、附加的數(shù)據(jù)

替換節(jié)點replaceWith()和replaceAll()

var $newNode1=$("

$(".gameList li:eq(2)").replaceWith($newNode1);

$($newNode1).replaceAll(".gameList li:eq(2)");

復(fù)制節(jié)點

$(selector).clone([includeEvents]) --參數(shù)true或false, true復(fù)制事件處理，false時反之

$(".gameList li:eq(1)").click(function(){

$(this).clone(true).appendTo(".gameList");

})

$(".gameList li:eq(2)").click(function(){

$(this).clone(false).appendTo(".gameList");

})

獲取和設(shè)置元素屬性

$(selector).attr([name]) ;獲取屬性值

$(selector).attr({[name1:value1]…[nameN:valueN]}) ;設(shè)置多個屬性的值

$(".contain img").attr({width:"200",height:"80"});

刪除元素屬性

$(selector).removeAttr(name) ;

$(".contain img").removeAttr("alt");

遍歷子元素

children()用來獲得元素中的所有子元素

$(selector).children([expr]);

var $section =$("section").children();

alert($section.length);

遍歷同輩元素

語法功能next([expr])用于獲取緊鄰匹配元素之后的元素 $("li:eq(1)").next().addClass("orange");prev([expr])用于獲取緊鄰匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange");slibings([expr])用于獲取位于匹配元素前面和后面的所有同輩元素 $("li:eq(1)").siblings().addClass("orange");

遍歷前輩元素

parent()：獲取元素的父級元素

parents()：元素的祖先元素

$("li:eq(1)").parent().addClass("orange");

$("li:eq(1)").parents().addClass("orange");

其他遍歷方法

each( )：規(guī)定為每個匹配元素規(guī)定運行的**函數(shù)**

index--選擇器的位置 element--當前的元素

$(selector).each(function(index,element)) ;

$("img").click(function(){

$("li").each(function(){

var str=$(this).text()+"
";

$("section").append(str);

})

});

end( )：結(jié)束當前鏈條中的最近的篩選操作，并將匹配元素集還原為之前的狀態(tài)

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});

$(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5");

$(".gameList li:last").css("border","none");

CSS-DOM操作

語法功能css()設(shè)置或返回匹配元素的樣式屬性height([value])設(shè)置或返回匹配元素的高度width([value])設(shè)置或返回匹配元素的寬度offset([value])返回以像素為單位的top和left坐標。僅對可見元素有效offsetParent( )返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被設(shè)置為relative、absolute或fixed的元素position( )返回第一個匹配元素相對于父元素的位置scrollLeft([position])參數(shù)可選。設(shè)置或返回匹配元素相對滾動條左側(cè)的偏移scrollTop([position])參數(shù)可選。設(shè)置或返回匹配元素相對滾動條頂

柚子快報邀請碼778899分享：jQuery

http://yzkb.51969.com/

推薦鏈接