您的位置：首页 > Web前端 > JQuery

jquery中DOM节点操作（三）

2016-12-13 00:00 309 查看

一、样式操作

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

2. 添加样式：addClass()

3. 移除样式：removeClass()

4. 切换样式：toggleClass()

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

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

.myClass{

color: red;

}

.li1{

color: red;

}

.li2{

background-color: green;

}

.high{

color: green;

}

.another{

font-size: 30px;

}

</style>

<script src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

$(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>

<input type="button" value="获取和设置class类"/>

<input type="button" value="追加class类"/>

<input type="button" value="移除class类"/>

<input type="button" value="重复切换class类"/>

<input type="button" value="判断元素是否含有某个class类"/>

<p class="myClass" title="爱好">个人爱好</p>

<ul>

<li class="li1">读书</li>

<li class="li2">爬山</li>

<li>跑步</li>

</ul>

</body>

</html>

二、属性操作

1.获取和设置属性

attr()

prop（）

二者区别

对于布尔类型的属性。如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。使用attr()，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。使用prop()函数，如果被选中(或禁用)就返回true，否则(即元素节点没有该属性)返回false。

2.删除属性

removeAttr()

removeProp（）

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

$(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>

<button id="btn2">删除属性</button>

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

<input type="checkbox" >jquery

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

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

相关文章推荐

新的分享

章节导航