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

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

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

??? ? ? ? demo:點擊不同 li? 顯示不同的圖片? ? ??

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

? ?引申：

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

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

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

?

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

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

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

? ?2.包裹：

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

? 三? 增加和刪除??

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

? ? ? ? ?$li=$("<li>內容</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”)? 插在后面
? ? ? ???父節點.prepend（子節點）? ?父節點.append（子節點）
? ? ? ???子節點.prependto（父節點）?子節點.appendto（父節點）? ? ?

? ? 2.兄弟元素之間插入
? ? ? ??舊節點.after（新節點），新節點.insertAfter（舊節點）

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

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

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

$("b").clone() 復制一個b標簽 隨便可以用來插入別的地方

?

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

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

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

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

?

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

?

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

? ?5.復制 節點?

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

?

?

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

?? ? ? 非定位元素 獲取坐標

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

?

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

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

? ? ? 注意 $.position().left 這個才是獲取 css中left的值

?

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

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

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

?

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

?

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

?

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

?

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

??? 4. 來回切換class

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

? ? 點擊4次 切換一次

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

?

?

1. hasClass（“class”） 判斷是否有這個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") } })

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。