一：Jquery操作DOM节点
1，查找节点
2，创建节点 append()
3,删除节点 remove()
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Jquery操作DOM节点</title>
6 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
7 <script type="text/javascript">
8 $(document).ready(function(){
9 //查找DOM节点
10 /* var li2=$("ul li:eq(1)");
11 var li2_txt=li2.text();
12 alert(li2_txt); */
13 //添加DOM节点
14 /* var li1=$("<li title='我是马化腾'>马化腾</li>");
15 var li2=$("<li title='我是李彦宏'>李彦宏</li>")
16 $("ul").append(li1);//在最后面添加
17 var li22=$("ul li:eq(1)");//在第二项之后添加
18 li2.insertAfter(li22); */
19 //删除DOM节点
20 //$("ul li:eq(1)").remove();
21 </script>
23 </head>
24 <style type="text/css">
25 .lc{
26 background-color: red;
27 }
28 .lc2{
29 background-color: blue;
30 }
31 .lc3{
32 font-weight:bold;
33 }
34
35 </style>
36 <body>
37 <p>你喜欢的名人是？</p>
38 <ul>
39 <li title="这是乔布斯"><font color="green">乔布斯</font></li>
40 <li title="这是比尔盖茨" class="lc">比尔盖茨</li>
41 <li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
42 </ul>
43 </body>
44 </html>
总结：操作DOM节点，获取是关键，添加DOM节点，使用append()或者insertAfter() 。获取DOM节点我们使用$("ul li:eq(1)")......
其他的看文档。
二：Jquery操作DOM节点属性
1，查找属性
2，设置属性
3，删除属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery操作DOM节点</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//操作DOM属性
//获取
/* var li2=$("ul li:eq(1)");
var li2_title=li2.attr("title");
alert(li2_title); */
//设置
//$("ul li:eq(1)").attr("title","你懂得");
//删除属性
/* $("ul li:eq(1)").removeAttr("title"); */
</script>
</head>
<style type="text/css">
.lc{
background-color: red;
}
.lc2{
background-color: blue;
}
.lc3{
font-weight:bold;
}
</style>
<body>
<p>你喜欢的名人是？</p>
<ul>
<li title="这是乔布斯"><font color="green">乔布斯</font></li>
<li title="这是比尔盖茨" class="lc">比尔盖茨</li>
<li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
</ul>
</body>
</html>
获取DOM节点的属性：使用的方法是$("ul li:eq(1)").attr("title");(获取title属性)；
添加属性：$("ul li:eq(1)").attr("title","你懂得");
删除属性：$("ul li:eq(1)").removeAttr("title");
关键点："attr"
三：Jquery操作DOM节点样式
1，获取样式
2，设置样式
3，追加样式
4，移除样式
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Jquery操作DOM节点</title>
6 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
7 <script type="text/javascript">
8 $(document).ready(function(){
9 //操作DOM节点样式
10 //获取DOM节点的样式
11 /* var li2=$("ul li:eq(1)");
12 var li2_class=li2.attr("class");
13 alert(li2_class); */
14 //设置样式
15 //$("ul li:eq(1)").attr("class","lc2");
16 //追加样式：
17 /* $("ul li:eq(1)").addClass("lc3"); */
18 //移除样式
19 /* $("ul li:eq(1)").removeClass("lc"); */
20
21 });
22 </script>
23
24 </head>
25 <style type="text/css">
26 .lc{
27 background-color: red;
28 }
29 .lc2{
30 background-color: blue;
31 }
32 .lc3{
33 font-weight:bold;
34 }
35
36 </style>
37 <body>
38 <p>你喜欢的名人是？</p>
39 <ul>
40 <li title="这是乔布斯"><font color="green">乔布斯</font></li>
41 <li title="这是比尔盖茨" class="lc">比尔盖茨</li>
42 <li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
43 </ul>
44 </body>
45 </html>
总结：设置样式 使用key-value形式attr（"class","lc2"）;
追加方式：
addClass("lc3");
移除样式：
removeClass("lc");
四：设置和获取HTML,文本和值
1，获取html，设置html
2，获取文本，设置文本
3，获取值，设置值
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Jquery操作DOM节点</title>
6 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
7 <script type="text/javascript">
8 $(document).ready(function(){
9 //获取和设置HTML 文本 值
10 //获取HTML
11 /* var li1_html=$("ul li:eq(0)").html();
12 alert(li1_html); */
13 //设置HTML
14 //$("ul li:eq(0)").html("<font color=red>哈哈哈哈</font>")
15 //获取文本
16 /* var li1_text= $("ul li:eq(0)").text();
17 alert(li1_text); */
18 //设置文本
19 /* $("ul li:eq(0)").text("嗯嗯"); */
20 //获取值
21 //我们使用input 写俩js设置值
22 });
23 function getUserName(){
24 var userName=$("#userName").val();
25 alert(userName);
26 }
27 function setUserName(){
28 $("#userName").val("你懂得");
29 }
30 </script>
31
32 </head>
33 <style type="text/css">
34 .lc{
35 background-color: red;
36 }
37 .lc2{
38 background-color: blue;
39 }
40 .lc3{
41 font-weight:bold;
42 }
43
44 </style>
45 <body>
46 <p>你喜欢的名人是？</p>
47 <ul>
48 <li title="这是乔布斯"><font color="green">乔布斯</font></li>
49 <li title="这是比尔盖茨" class="lc">比尔盖茨</li>
50 <li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
51 </ul>
52 <input type="text" id="userName" name="userName"/>
53 <input type="button" onclick="getUserName()" value="获取设置值"/>
54 <input type="button" onclick="setUserName()" value="设置值"/>
55 </body>
56 </html>
总结： 获取， 设置
HTML $("ul li:eq(1)").html() $("ul li:eq(1)").html("<font color=red>啊哈哈</font>")
文本 $("ul li:eq(1)").text() $("ul li:eq(1)").text("嗯嗯嗯") ;
值 onclick("getUserName()"); onclick("setUserName()"); 均是使用function方法
五：遍历节点操作
1，获取所有子节点 children()
2，获取邻近的下一个兄弟节点 next()
3，获取邻近的上一个兄弟节点 prev()
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Jquery操作DOM节点</title>
6 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
7 <script type="text/javascript">
8 $(document).ready(function(){
9 /* 遍历节点操作 */
10 //遍历所有子节点
11 /* var b=$("body").children();
12 alert(b.length);
13 var u=$("ul").children();
14 alert(u.length);
15 for(var i=0;i<u.length;i++){
16 alert(u[i].innerHTML);//原生的js没有被jquery包装过！
17 alert($(u[i]).html());
18 } */
19 //相邻节点
20 /* var n1=$("ul li:eq(0)").next();//next()
21 alert(n1.html());
22 var n2=$("ul li:eq(1)").prev();//prev()
23 alert(n2.html()); */
24 });
25 function getUserName(){
26 var userName=$("#userName").val();
27 alert(userName);
28 }
29 function setUserName(){
30 $("#userName").val("你懂得");
31 }
32 </script>
33
34 </head>
35 <style type="text/css">
36 .lc{
37 background-color: red;
38 }
39 .lc2{
40 background-color: blue;
41 }
42 .lc3{
43 font-weight:bold;
44 }
45
46 </style>
47 <body>
48 <p>你喜欢的名人是？</p>
49 <ul>
50 <li title="这是乔布斯"><font color="green">乔布斯</font></li>
51 <li title="这是比尔盖茨" class="lc">比尔盖茨</li>
52 <li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
53 </ul>
54
55 <input type="text" id="userName" name="userName"/>
56 <input type="button" onclick="getUserName()" value="获取设置值"/>
57 <input type="button" onclick="setUserName()" value="设置值"/>
58 <p id="jq" style="color:red">Jquery吊炸天！</p>
59 </body>
60 </html>
总结：对于节点的操作往往是获取孩子节点。
输出前面的兄弟节点，输出后面的兄弟节点。
方法：var b=$("body").children();
然后利用b的方法b.next（）或者b.prev()
alert(u[i].innerHTML);//原生的js没有被jquery包装过！ alert($(u[i]).html());
六：Jquery操作DOM节点CSS
1、获取DOM节点CSS样式
2、设置DOM节点CSS样式
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Jquery操作DOM节点</title>
6 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
7 <script type="text/javascript">
8 $(document).ready(function(){
9 //CSS-DOM节点
10 /* var c=$("#jq").css("color");
11 alert(c); */
12 //设置CSS-DOM节点
13 // $("#jq").css("color","blue");
14 });
15 function getUserName(){
16 var userName=$("#userName").val();
17 alert(userName);
18 }
19 function setUserName(){
20 $("#userName").val("你懂得");
21 }
22 </script>
23
24 </head>
25 <style type="text/css">
26 .lc{
27 background-color: red;
28 }
29 .lc2{
30 background-color: blue;
31 }
32 .lc3{
33 font-weight:bold;
34 }
35
36 </style>
37 <body>
38 <p>你喜欢的名人是？</p>
39 <ul>
40 <li title="这是乔布斯"><font color="green">乔布斯</font></li>
41 <li title="这是比尔盖茨" class="lc">比尔盖茨</li>
42 <li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
43 </ul>
44
45 <input type="text" id="userName" name="userName"/>
46 <input type="button" onclick="getUserName()" value="获取设置值"/>
47 <input type="button" onclick="setUserName()" value="设置值"/>
48 <p id="jq" style="color:red">Jquery吊炸天！</p>
49 </body>
50 </html>采用键值对的形式（key-value形式）设置CSS-DOM节点的值！
来源：https://www.cnblogs.com/zyxsblogs/p/10078528.html