jQuery中的dom元素操作

/*操作元素的屬性   attr  prop*/

//1.獲取或設定元素的屬性值 attr
console.log($("input[type=button]").attr("value")); //attr（「」）乙個值時為獲取
$("input[type=button]").attr("value","web前端"); //attr（「」）兩個值時為設定
console.log( $("input[type=button]").attr("value"));
//prop相同 prop無法設定width,height
console.log($("input[type=button]").prop("value"));
$("input[type=button]").prop("value","web前端");
console.log( $("input[type=button]").prop("value"));
//2.一次性設定多個屬性值 (不能一次性獲取多個)
$("input[type=button]").attr();
//3.設定自定義屬性 以及刪除
$("input[type=button]").removeattr("data-src"); //刪除元素的自定義屬性
console.log($("input[type=button]").attr("data-src"));
$("input[type=button]").removeattr("id"); //刪除元素的自帶屬性
console.log($("input[type=button]"));
//$("input[type=button]").removeprop("data-src"); //可刪除元素的自定義屬性，但其行內樣式還存在
//$("input[type=button]").removeprop("id"); //prop無法刪除元素的自帶屬性
box.click(function());
//4.元素內容的操作
/*注：innerhtml與innertext的區別：前者包含當前元素內的所有東西，包括標籤，空格，回車；後者僅包含當前元素的文字值*/
var d=document.getelementbyid("block");
d.innertext="熱死啦！";
console.log(d.innerhtml);
console.log(d.innertext);
//html與text 與上述情況相同
console.log($("#block").html()); //困！
console.log($("#block").text()); // 困！
$("#block").html("熱");
$("#block").text("熱");
//5.操作表單元素的值 val() 獲取或設定表單元素的value值
$("#txt").val("12345"); //設定
console.log($("#txt").val()); //獲取
//6.操作dom元素的css 獲取或設定元素的樣式
$("#txt").css("background-color","pink"); //#090a0a 輸出後為rgb值，寫判斷是否等於時需換算
$("#txt").css();
//顏色輸出後為rgb值，寫判斷是否等於時需換算 換算方法
var color = $("#txt").css("bordercolor");
var col = (function (c) )(color);
console.log(col);
//7.類名稱的新增 addclass()
$("#btn").addclass("btn1"); //新增乙個類名稱
$("#btn").addclass("btn2 btn3"); //新增多個類名稱
$("#btn").removeclass("btn2 btn3"); //移除多個類名稱
$("#btn").removeclass(); //移除全部類名稱
$("#btn").toggleclass("btn-data"); //切換類名稱 自動判斷當前元素有沒有該屬性，有的話刪除，沒有則新增
操作子父節點的問題
console.log($("ul").children()[0]); //ul中的子元素 [0]第乙個子元素
console.log($("ul>li").first()); //第乙個li
console.log($("ul>li").last()); //最後乙個li
console.log($("ul>li").eq(1)); //索引為1的li
console.log($("ul>li").first().siblings(".lilist")); //第乙個li的同胞元素
console.log($("ul>li").eq(2).prev()); //索引2的前乙個
console.log($("ul>li").eq(2).prevall("li")); //索引2前面的所有 li
console.log($("ul>li").eq(1).next()); //索引1的後乙個
console.log($("ul>li").eq(1).next("span")); //索引1的後面所有span
console.log($("ul>li").filter(".lilist")); //過濾元素 只選擇class=lilist的元素
console.log($("ul>li").eq(0).is(".lilist")); //索引0號位是誰 輸出值為true false
//9.頁面尺寸問題
console.log($("body").width());//504 可視區域
console.log($("body").innerwidth());//584 包括邊框和內間距 padding
console.log($("body").outerwidth());//674 包括內間距

一、在jquery中建立dom元素

var str=$("123");

$(".block").prepend(str); //在當前元素的內容之前追加

str.prependto($(".block"));

//當前div的索引

//div中的頁面內容

var txt=html;

var str=$(""+txt+"");

return str; //返回str每個div中都有乙個span 即有n個div就有n個span

});//2.外部插入

$(".block").after(str); //在當前元素的內容之後追加

str.insertafter($(".block"));

$(".block").before(str); //在當前元素的內容之前追加

str.insertbefore($(".block"));

三、複製節點

$("#btn").click(function ());

var btnc=$("#btn").clone(false); //不帶引數或引數為false時只複製按鈕元素,
var btnc=$("#btn").clone(true); //引數為true時複製按鈕元素+行為+事件

$("button").each(function(index));

$(this).prop("data-user",false);
}else);
$(this).prop("data-user",true);}})
})

$(".block").wrap("");         //用h標籤包裹class=block的div，乙個div外包乙個h

$(".block").unwrap(); //移除被包裹元素的父級元素
$(".block").wrapall(""); //用h標籤包裹class=block的div，n個div包乙個h
$(".block").wrapinner(""); //用h標籤包裹class=block的div的子元素

$(".btn").each(function(index)

console.log("你好！")
})});
$(".btn").each(function(index,ele));*/
$(ele).click(function());
ele.click(function())
});

JQuery 操作DOM元素

使用attr 方法控制元素的屬性 使用attr 屬性名 是獲取該屬性的值。使用attr 屬性名 屬性值 是設定屬性的值 html text 方法控制元素的文字 包含樣式 使用html 時是獲取元素的html文字 包括樣式 如果文字是斜體的，獲取到的也是斜體的 使用html 哈哈哈 時是將元素的htm...

jQuery的元素（DOM）操作

假設頁面上有一些元素如下 box 1 p 2 p 3 p div box div box div box div box div body 引入外部的jquery資源 jquery.js script 1.建立元素 2.插入元素 box 被div插入了 box div 把div插入到 box 中，這...

jQuery 訪問DOM元素操作

一 操作元素屬性 1.獲取元素的屬性 attr prop 例1 css樣式 使用如下 attr可以獲取其width input type button attr width 200px console.log input type button attr width 200px prop不可以獲取其...