开发者学堂课程【jQuery 开发教程：jQuery_DOM 属性上】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4291
jQuery_DOM 属性上
一、概要
1、 .addClass( className )：
为每个匹配的元素添加指定的样式类名，给元素添加 class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
// 引入 jQuery
<script src="jquery-2.2.1.min.js"></script>
<style>
.pc{
color: red;
}
</style>
</head>
<body>
<p>haha</p>
<script>
$(function(){
// 添加类名
$("p").addClass("pc");
})
</script>
</body>
</html>
效果截图：
p 标签变成了红色，打开后台，会看见 p 标签被添加了一个 pc 的类。
1、 .attr( attributeName )：
获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。当它为一个参数的时候，后面仅跟一个属性名，为两个参数的时候，即为属性名对应属性值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
// 引入 jQuery
<script src="jquery-2.2.1.min.js"></script>
<style>
.pc{
color: red;
}
</style>
</head>
<body>
<p>haha</p>
<a>haha</a>
<script>
$(function(){
$("p").addClass("pc");
$("a").attr("href","http://www.baidu.com");
})
</script>
</body>
</html>
效果截图：
点击 haha ，会跳转到百度的页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-2.2.1.min.js"></script>
<style>
.pc{
color: red;
}
</style>
</head>
<body>
<p name="haha">哈哈</p>
<div></div>
<script>
$(function(){
$("a").attr("href","http://www.baidu.com");
var name=$("p").attr("name"); //haha
$("div").text(name);
})
</script>
</body>
</html>
效果截图：
2 .hasClass( className )：
确定任何一个匹配元素是否有被分配给定的（样式）类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
// 引用 jQuery
<script src="jquery-2.2.1.min.js"></script>
<style>
.pc{
color: red;
}
</style>
</head>
<body>
<p name="haha">哈哈</p>
<div></div>
<h1 class="h11 aa"></h1>
<script>
$(function(){
$("a").attr("href","http://www.baidu.com");
var name=$("p").attr("name");//haha
$("div").text(name);
console.log($("h1").hasClass("aa"));
})
</script>
</body>
</html>
效果截图：
3 .html()：
获取集合中第一个元素匹配的 HTML 内容 设置每一个匹配元素的 html 内容。没有参数时获取当前元素的内容，有参数时给当前元素添加或更改内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
// 引用 jQuery
<script src="jquery-2.2.1.min.js"></script>
<style>
.pc{
color: red;
}
</style>
</head>
<body>
<a>haha</a>
<p name="haha">哈哈</p>
<div></div>
<h1 class="h11 aa"></h1>
<script>
$(function(){
var name=$("p").attr("name");//haha
$("div").text(name);
console.log($("h1").hasClass("aa"));
$("a").html("hehe");
})
</script>
</body>
</html>
效果截图：