注意：一下操作只有針對(duì)jQuery對(duì)象才有用。

? ?一.獲取和設(shè)置DOM屬性
? ? ? 1. $("li").attr("class") 獲取li的class屬性 只能獲取第一個(gè)
? ? ? ? ? ??解決方法 用map遍歷? index下標(biāo)? ele是對(duì)用dom 下面可以用this代替
? ? ? ? ? ? ? ? ??$("li").map(function (index,ele) {
? ? ? ? ? ? ? ? ? ? ?console.log($(ele).attr("class"));
? ? ? ? ? ? ? ? ?})

? ? ? 2.設(shè)置屬性 【$(this).index() 獲取索引】
? ? ? ? ? $("li").attr("class","classname")或者
? ? ? ? ? ??$("li").attr({
? ? ? ? ? ? ? ? ? ? ? ? ? "class":"classname",
? ? ? ? ? ? ? ? ? ? ? ? ? "id":"box"
? ? ? ? ? ? ? ? ? ? ? ? ? ? })

??? ? ? ? demo:點(diǎn)擊不同 li? 顯示不同的圖片? ? ??

? ? ? ? ? ? $("li").click(function () {
? ? ? ? ? ? ? ? ? ? ??? ?var index=$(this).index()+1? ? ? ? ? ?兩種方法都可以?
? ? ? ??? ? ? ? ? ? ? ? ? var index=$("li").index($(this))+1? ? ? ?這個(gè)可以用來接收li的索引值
? ? ? ? ? ? ? ?$(".gg img").attr("src","http://m.jjchfcyy.cn/zt2/zt"+index+".jpg") })

? ?引申：

???固有屬性：id class src href? title type alt value?
???.attr支持固有和自定義? ，
? ?.prop 只支持固有（判斷checkbox動(dòng)態(tài)返回true和false）

???<input type="checkbox" checked="checked">

? ? console.log($("input:checkbox").prop("checked"))? 返回true

?

? 二 html 代碼 文本 值? ?【改和查】

? ?1.? ?text() -?取值和賦值都是一組，超級(jí)重要，要修改請深入修改 面對(duì)誰修改
? ? ? ? ? ? ? ? ?$(".kk").text("文本")? 括號(hào)沒參數(shù)就是取值

? ? ? ? html() - 取值和賦值（帶html標(biāo)記）[碰到對(duì)象的話 取值第一個(gè)]
? ? ? ? ?val() - 設(shè)置或返回表單字段的值? ?$("input").val()

? ?2.包裹：

? ? ??$("ul").wrap("<div class='wrap'></div>");? 把所有的ul 用div分別包起來
? ? ??$(".cc").unwrap();? ? 把這個(gè)cc的父級(jí)去掉?
? ? ? $(".cc").wrapAll("<div></div>");? ??所有的.cc 包一起? ? ? ? ? ??
? ? ??$(".dd").wrapInner("<div></div>");? ? 把.dd的內(nèi)容用div包起來
?

? 三? 增加和刪除??

??? ?1. 父子之間插入

? ? ? ? ?$li=$("<li>內(nèi)容</li>")
? ? ? ? var son=$("<img src="+"https://www.baidu.com/img/baidu_jgylogo3.gif"+">")? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? $(".father").prepend(son) 插在前面?? ? $(".father").append(son)? 插在后面
? ? ? ??$(son).prependto(".father") 插在前面?? ? $(son).appendto(“.father”)? 插在后面
? ? ? ???父節(jié)點(diǎn).prepend（子節(jié)點(diǎn)）? ?父節(jié)點(diǎn).append（子節(jié)點(diǎn)）
? ? ? ???子節(jié)點(diǎn).prependto（父節(jié)點(diǎn)）?子節(jié)點(diǎn).appendto（父節(jié)點(diǎn)）? ? ?

? ? 2.兄弟元素之間插入
? ? ? ??舊節(jié)點(diǎn).after（新節(jié)點(diǎn)），新節(jié)點(diǎn).insertAfter（舊節(jié)點(diǎn)）

? ? ? ? ?$(".p2").after($("<span/>"))? .p2的后面放span 這么理解

? ? ? ? ??$("<span/>").insertAfter($(".p2"))? ?把span放到 p2的后面? [insert 是插入的動(dòng)作]

? ? ? ? ?before也是如此? ? ? ? ?

$("b").clone() 復(fù)制一個(gè)b標(biāo)簽 隨便可以用來插入別的地方

?

? ?3.? 元素刪除
? ? ? ? ?$(".father img").remove();?誰調(diào)用.remove() 就刪誰? ? ? ? ??

? ? ? ? ?$a=$(".p2").remove(); 刪完之后 用$a來接收，

? ? ? ? ? $(".ab").remove(".dd")? ?同時(shí)滿足 class ab和dd的元素刪除

? ? ? ? ?$a.insertAfter(".p3"); 把接收的東西插入到p3

?

? ? ? ???$(".p4").empty(); 這個(gè)是清空p4下所有的節(jié)點(diǎn)和文字，兒子孫子什么的都清空 只留下p4

?

? ?4.替換
? ??$(".dd").replaceWith("<span class="+"dd"+">155</span>") 把前面的替換為后面的
? ??$("<span class="+"dd"+">155</span>").replaceAll(".dd")? ? ??
? ? 舊節(jié)點(diǎn).replaceWith（新節(jié)點(diǎn)）? 新節(jié)點(diǎn).replaceAll（舊節(jié)點(diǎn)）

? ?5.復(fù)制 節(jié)點(diǎn)?

? ?????$("ul li").click(function () {
? ? ? ? ? $(this).clone().appendTo("ul");})

?

?

六 常用css的屬性? ??【改和查】
???1.$("img").offset().left 和top? ???可以獲取 也可以改變??這個(gè)是相對(duì)視口? ? ??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ?$("img").offset({?left:600,top:300})??

?? ? ? 非定位元素 獲取坐標(biāo)

? ? ? ?$("img").offset().left+" "+$("img").offset().top;?可以制作跟隨鼠標(biāo)的效果? ? ??

?

???2.$("img").position()? ? ? ? ? ? ? 只可以獲取 不能設(shè)置

? ? ??有定位之后 在空中一般用這個(gè) 位置變動(dòng)
? ? ?$("img").position().left+" "+$("img").position().top;

? ? ? 注意 $.position().left 這個(gè)才是獲取 css中l(wèi)eft的值

?

????3.$("img").height(500)? ? 這個(gè)是給高度設(shè)置500 ，不設(shè)置參數(shù)就是獲取高度

??? ??$("img").css("width")? ?和這個(gè)一樣 這個(gè)返回的帶px? css帶單位? ??

? ? ? ?width（）content，
　　innerWidth（）content+padding，
　　outerWidth() content+padding+border，
　　outerWidth(true) content+padding+border+margin，

?

? ? ? $(window).scroll(fun)

?

? ? ?$(window).scrollTop()獲取屏幕滾動(dòng)的高度

?

? ? ? $(window).height()獲取屏幕可視區(qū)域的高

?

? ? ?$(document).height() 獲取文檔的高度 滾動(dòng)條也包含

??? 4. 來回切換class

$("button").click(function(){$("p").toggleClass("main"); });

? ? 點(diǎn)擊4次 切換一次

? ???var count = 0;
? ??$(document).ready(function(){
? ??$("button").click(function(){
? ??$("p").toggleClass("main", count++ % 4== 0);
? ??});
? ??});

?

?

1. hasClass（“class”） 判斷是否有這個(gè)class
2. addClass（“class”）增加， removeClass（“class”）刪除，toggleClass（“cc”）有就刪cc，沒有增加cc。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

$("li").click(function () { $(this).toggleClass("bb") }) ? ? $("li").click(function () { if ($(this).hasClass("bb")) { ??$(this).removeClass("bb") ? }else{ ???$(this).addClass("bb") } }) ? ? ? ? $("li").click(function () { if ($(this).attr("class")=="aa") { ??$(this).addClass("bb") }else{ ?$(this).removeClass("bb") } })

總結(jié)

以上是生活随笔為你收集整理的JQuery 总结（4） DOM操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。