jQuery 屬性和CSS

HTML代碼：

<div id="div1">div1<p>1</p><p>2</p><p>3</p>
</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

　

attr()

設置節點的屬性

$("#div1").attr("class","cls");

?

取到節點的屬性

console.log($("#div1").attr("id"));

?

傳入對象，以鍵值對的形式同時設置多對屬性

$("#div1").attr({//"class":"cls1",
"class":$("#div1").attr("class","cls1"),"name":"name1","style":"font-size:24px;color:blue;"
});

?

?

刪除節點屬性

$("#div1").removeAttr("class");

?

?

【prop和attr一樣，都可以對節點屬性進行讀取和設置 】

二者的不同：

1.在讀取 屬性名="屬性值" 的屬性值時，attr將返回屬性值和undefined；

而prop返回true或false 也就是說，attr要取的屬性，必須是在標簽上已經寫明的屬性，否則無法取到

console.log($("input:eq(0)").attr("checked"));
console.log($("input:eq(0)")).prop("type");

　　

?

在原有class的基礎上，新增class名

$("#div1").addClass("cls2");

?

刪除指定的class名稱，其余未刪除的class名，依然保留

$("#div1").removeClass("cls2");

?

?

切換class，如果有指定class就刪除，沒有就新增

$("button:eq(0)").click(function(){$("#div1").toggleClass("div1");
});

?

?

html() 取到或設置節點中的html代碼；

console.log($("#div1").html("<p>111</p>").html());

　　

text() 取到或設置節點中的文本；

console.log($("#div1").text("<p>111</p>").text());

　　

.val() 取到或設置表單元素的value值。

console.log($("input").val("<p>111</p>").val());

　　

.css() 給節點添加css樣式，屬于行級樣式表權限。

$("#div1").css("color","green");

　　

?

同時給一個節點添加多對css樣式。

$("#div1").css({"color":"green","font-size":"14px"
});

　　

?

通過回調函數返回值，修改css的樣式。

$("button:eq(0)").click(function(){var id = setInterval(function(){$("#div1").css({"width":function(index,value){var v = parseFloat(value) + 1;if(v>600){clearInterval(id);}return v+"px";}});},10);
});                

　　

?

取到或者設置節點的 寬高。只包含width/height

console.log($("#div1").height(400));
console.log($("#div1").width("400px"));

?

取到 節點 的寬度+padding。 不包含border和margin

console.log($("#div1").innerHeight());
console.log($("#div1").innerWidth());

?

?

不傳參數， 表示 寬高+padding+border

傳入true，表示 寬高+padding+border+margin

console.log($("#div1").outerHeight());
console.log($("#div1").outerWidth(true));

?

?

返回一個節點，相對于瀏覽器左上角的偏移量。

返回一個對象{top:20,left20}

此方法，測量時，會將margin算作偏移量的距離。

console.log($("#div1").offset());

?

?

返回一個節點，相對于父容器的偏移量。

?

?

注意： ① 使用此方法，要求父元素必須是定位元素。 如果父元素不是定位元素，則依然是相對于瀏覽器左上角進行測量。

② 次方法，測量偏移時，將不考慮margin。 而會將margin視為當前容器的一部分。

console.log($("#div1").position());

?

?

scrollTop： 設置或取到指定節點的滾動條的位置。

console.log($("#div1").scrollTop(100));