jquery中DOM节点操作(三)
2016-12-13 19:22
281 查看
一、样式操作
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>
相关文章推荐
- JqueryDOM操作-创建节点
- Jquery操作DOM节点
- jQuery基础教程之DOM操作-遍历节点-prevUntil()方法
- 【JS--DOM-节点操作3】-jQuery 里的节点操作 (未完待续)
- jQueryDom操作之外部插入节点
- jQuery基础教程之DOM操作-遍历节点-filter()方法
- JqueryDOM操作-jquery查找属性节点
- jQuery移动和复制dom节点实用DOM操作案例
- jQuery基础教程之DOM操作-遍历节点-siblings()方法
- jQueryDom操作之内部插入节点
- JqueryDOM操作-替换节点
- jQuery基础教程之DOM操作-遍历节点-prev()方法
- jQuery基础教程之DOM操作-节点操作函数(二)
- jquery DOM操作_创建节点
- JqueryDOM操作-查找节点
- Jquery操作DOM节点
- jQuery基础教程之DOM操作-遍历节点-parent()方法
- jQuery基础教程之DOM操作-遍历节点-parents()方法
- js和jquery对dom节点的操作(创建/追加)
- js和jquery对dom节点的操作(创建/追加)