基础DOM操作
设置元素及内容：
我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素
这个时候， 我们就可以对这些元素进行 DOM 操作
那么， 最常用的操作就是对元素内容的获取和修改
设置元素及内容 API
那么，现在本人来展示下上述方法的使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1 id="myh">aaaa</h1>
<h1 id="myh2">bbbb</h1>
<input type="text" id="" value="abc" />
</body>
<script type="text/javascript">
//追加
$('#myh').text($('#myh').text()+"这是一行标签");
$('#myh2').html("<p>这是文本</p>");//相当于原生JS 的 innerHTML
var name=$('input').val();
alert(name);
</script>
</html>
现在，本人来展示下运行结果：
设置元素及内容 展示
元素的属性操作：
除了对元素内容进行设置和获取，
通过 jQuery 也可以对元素本身的属性进行操作，
包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性：
元素的属性操作 API
那么，现在本人来展示下上述方法的使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.myh4{
color:blue;
}
.hehe{
font-size: 100px;
}
</style>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1 id="myh" align="center">aaaa</h1>
<h1 id="myh2">bbbb</h1>
<h1 id="myh3">bbbb</h1>
<h1 id="myh4">cccccc</h1>
</body>
<script type="text/javascript">
//设置或获取属性的值
$('#myh').attr('align','right').attr('style','color:red;font-size:50px');
var json={
'align':'center',
'style':'color:red;font-size:50px'
}
$('#myh2').attr(json);
$('#myh2').removeAttr("style");
//css()给元素设置样式的方法，可以连缀使用
$('#myh3').css({
color:'yellow',
// 注意css属性名如果有 -连接，把-去掉,把 -后面的第一个字母变大写
fontSize:'200px'
});
</script>
</html>
现在，本人来展示下运行结果：
元素的属性操作 展示
元素样式操作包括：
直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种操作方法
元素样式操作：
元素样式操作 API
那么，现在本人来展示下上述方法的使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js"></script>
<style type="text/css">
.myClass1 {
background-color: aqua;
}
.myClass2 {
background-color: greenyellow;
}
</style>
</head>
<body>
<ul>
<li id="myLi1">我是第1个li</li>
<li id="myLi2">我是第2个li</li>
<li id="myLi3">我是第3个li</li>
<li id="myLi4">我是第4个li</li>
</ul>
</body>
<script>
$('#myLi1').addClass('myClass1');
$('#myLi2').addClass('myClass1 myClass2');
$('#myLi3').addClass('myClass1');
$('#myLi2').removeClass('myClass1');
$('#myLi3').toggleClass('myClass1 myClass2');
</script>
</html>
现在，本人来展示下运行结果：
元素样式操作 展示
CSS方法：
CSS API
那么，现在本人来展示下上述方法的使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js"></script>
<style type="text/css">
#myDiv1 {
background-color: aqua;
}
#myDiv2 {
background-color: red;
}
#myDiv3 {
background-color: chocolate;
}
</style>
</head>
<body>
<div id="myDiv1">我是第1个div</div>
<div id="myDiv2">我是第2个div</div>
<div id="myDiv3">我是第3个div</div>
</body>
<script>
$('div').height(function (index, value) {
//index 是索引，value 是原本值
return value + 50*index;
});
</script>
</html>
现在，本人来展示下运行结果：
CSS方法 展示
那么，本篇博文的知识点在这里就讲解完毕了。
(请观看本人博文 —— 《jQuery 专栏总集篇》)
