jquery中DOM节点操作（三）

最新推荐文章于 2021-12-09 21:34:10 发布

bwf_erg

最新推荐文章于 2021-12-09 21:34:10 发布

阅读量181

点赞数

文章标签： DOM 样式操作属性操作

本文链接：https://blog.csdn.net/bwf_erg/article/details/53612548

版权

一、样式操作

1.获取和设置样式：attr()

2. 添加样式：addClass()

3. 移除样式：removeClass()

4. 切换样式：toggleClass()

5.是否使用样式：hasClass（）

<!DOCTYPE html>

<html>

<head>

.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>

二、属性操作

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