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");

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

$("p").attr("name","p标签");

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

$("p").prop("id","p2");

$("p").prop("name","p标签");

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

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

// 区别

console.log($("input").attr("checked"));

console.log($("input").prop("checked"));

});

// 删除属性

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

// $("p").removeAttr("title");

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

$("p").removeProp("title");

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

$("p").prop("name","test");

$("p").removeProp("name");

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

});

</script>

</head>

<body>

<button id="btn1">获取和设置属性</button>

<p title="段落">我是一个段落</p>

<input type="checkbox" >jquery

</body>

</html>