Query 课时17：JQuery DOM属性
- 概要
- 1、addClass(className)：为每个匹配元素添加指定的样式类名
- 2、attr（attrbuteName）：只有一个参数时，获取匹配的元素集合中的第一个元素的属性值；有两个参数时设置每一个匹配元素的一个或多个属性
- 3、hasClass(className):确定任何一个元素是否有给定到某个（样式）类
- 4、.html() 当没有参数时为获取当前的内容，两个参数时为添加页面内容
- 5、prop()
- 6、removerattr()
- 7、removeClass()
- 8、removeProp() 移除由 prop() 方法设置的属性。
- Prop()与attr的区别
- 9、toggleClass()，用法跟addClass()相似
- addClass(),.removeClass(),.toggleClass()的区别
- 10、val()
概要
1、addClass(className)：为每个匹配元素添加指定的样式类名
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<style>
.pc{
color:red;
}
</style>
</head>
<body>
<p>haha</p>
</body>
<script>
$(function(){
//添加样式
$("p").addClass("pc");
})
</script>
</html>
2、attr（attrbuteName）：只有一个参数时，获取匹配的元素集合中的第一个元素的属性值；有两个参数时设置每一个匹配元素的一个或多个属性
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<style>
.pc{
color:red;
}
</style>
</head>
<body>
<a></a>
</body>
<script>
$(function(){
$("a").attr("href","http://www.baidu.com");
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<style>
.pc{
color:red;
}
</style>
</head>
<body>
<p name="haha">哈哈</p>
<div>
<!-- 提取p的属性打印到div里 -->
</div>
</body>
<script>
$(function(){
var name=$("p").attr("name");
$("div").text(name);
})
</script>
</html>
3、hasClass(className):确定任何一个元素是否有给定到某个（样式）类
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<style>
.h11{
color:red;
}
</style>
</head>
<body>
<h1 class="h11">哈哈哈</h1>
</body>
<script>
$(function(){
console.log($("h1").hasClass("h11")); //无为false，有为true
})
</script>
</html>
4、.html() 当没有参数时为获取当前的内容，两个参数时为添加页面内容
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<style>
.h11{
color:red;
}
</style>
</head>
<body>
<a href="">aaaa</a>
<h1 class="h11">哈哈哈</h1>
</body>
<script>
$(function(){
//当没有参数时为获取当前的内容
console.log($("a").html());
//改变当前页面内容
$("h1").html("hehe");
})
</script>
</html>
5、prop()
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
<input type="checkBox" value="选择">
</body>
<script>
$(function(){
//获取属性值
console.log($("input").prop("value"));
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<style>
.h11{
color:red;
}
</style>
</head>
<body>
<input type="text" value="选择">
</body>
<script>
$(function(){
//获取属性值
console.log($("input").prop("value"));
//当有两个参数是，是改变属性值
$("input").prop("value","改变");
})
</script>
</html>
6、removerattr()
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
<a href="xxx">hahha</a>
</body>
<script>
$(function(){
//移除a的href属性
$("a").removeAttr("href");
})
</script>
</html>
7、removeClass()
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<style>
a1{
color:red;
}
</style>
</head>
<body>
<a class="a1">hahha</a>
</body>
<script>
$(function(){
//移除a1的样式
$("a").removeClass("a1");
})
</script>
</html>
8、removeProp() 移除由 prop() 方法设置的属性。
Prop()与attr的区别
Prop()与attr的区别-参考链接
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
9、toggleClass()，用法跟addClass()相似
addClass(),.removeClass(),.toggleClass()的区别
.addClass(“className”)方法是用来给指定元素增加类名，也就是说给指定的元素追加样式；可以同时添加多个类名，空格符隔开
.removeClass(“className”)方法是用来给指定的元素移除类名，也就是说给指定元素移除样式；可以同时移除多个类名，空格符隔开
.toggleClass(“className”)方法是用来给指定的元素添加或者移除类名（如果类名存在则移除，不存在则增加）
10、val()
获取匹配的元素集合中第一个元素的当前值，设置匹配的元素，集合中每个元素的值。
主要是取表单元素的值 textare、input、select
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<style>
</style>
</head>
<body>
<input type="text" value="some text">
</body>
<script>
$(function(){
console.log($("input").val());
})
</script>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
