jquery中DOM節點操做（三）

時間 2019-11-11

標籤 jquery dom 節點欄目 JQuery 简体版

原文原文鏈接

1、樣式操做javascript

1.獲取和設置樣式：attr()css

2. 添加樣式：addClass()html

3. 移除樣式：removeClass()java

4. 切換樣式：toggleClass()jquery

5.是否使用樣式：hasClass（）函數

<!DOCTYPE html>code

<html>htm

<head>blog

<title></title>ip

.myClass{

color: red;

}

.li1{

color: red;

}

.li2{

background-color: green;

}

.high{

color: green;

}

.another{

font-size: 30px;

}

</style>

$(function(){

// 獲取和設置樣式

$("input:eq(0)").click(function(){

var res=$("p").attr("class");

console.log(res);

$("p").attr("class","high");

});

// 追加樣式

$("input:eq(1)").click(function(){

$("p").addClass("another");

});

// 移除樣式

$("input:eq(2)").click(function(){

$("p").removeClass();

$("li").removeClass("li1");

});

// 切換樣式

$("input:eq(3)").click(function(){

$("p").toggleClass("high");

});

// 是否使用某種樣式

$("input:eq(4)").click(function(){

var res=$("p").hasClass("another");

console.log(res);

});

</script>

</head>

<body>

<ul>

</ul>

</body>

</html>

2、屬性操做

1.獲取和設置屬性

attr()

prop（）

兩者區別

對於布爾類型的屬性。如 checked, selected 或者 disabled 使用prop()，其餘的使用 attr()。使用attr()，若是被選中(或禁用)就返回checked、selected或disabled，不然(即元素節點沒有該屬性)返回undefined。使用prop()函數，若是被選中(或禁用)就返回true，不然(即元素節點沒有該屬性)返回false。

2.刪除屬性

removeAttr()

removeProp（）

<!DOCTYPE html>

<head>

<title>Document</title>

$(function(){

// 獲取和設置屬性

$("#btn1").click(function(){

console.log($("p").attr("title"));

console.log($("p").prop("title"));

$("p").attr("id","p1");