一：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节点的值！