Jquery操作DOM

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