jQuery的DOM操作

 html操作 

1 // html()
2 // 获取 -- 北京节点的HTML代码
3 console.log($("#bj").html());
4 // 设置(重置内容,不是追加或累加) -- 天津节点设置区的内容
5 $("#tj").html("天津<ul><li>塘沽区</li></ul>");

 文本操作 -- text()

1 //text()
2 //获取
3 console.log($("#nj").text());
4 // 设置
5 $("#nj").text("isChanged");

  值操作 -- val()

1 // val()
2 // 获取
3 console.log($("#user").val());
4 // 设置
5 $("#user").val("isChanged again");

  属性操作 -- attr()

 1 // attr()
 2 // 获取
 3 console.log($("#bj").attr("name"));
 4 // 设置
 5 $("#bj").attr("name", "北京")
 6 console.log($("#bj").attr("name"));
 7 
 8 // 删除                
 9 $("#bj").removeAttr("name");
10 console.log($("#bj").attr("name"));        //undefined

以上例子的html页面代码如下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>01_DOM</title>
 6     <script src="js库/jquery-1.11.3.js"></script>
 7 </head>
 8 <body>
 9     <input type="text" id="user" value="请输入用户名">
10     <ul>
11         <li id="bj" name="beijing">北京
12             <ul>
13                 <li>海淀区</li>
14                 <li>朝阳区</li>
15                 <li>东城区</li>
16             </ul>
17         </li>
18         <li id="tj">天津</li>
19         <li id="nj">南京</li>
20     </ul>
21 </body>
22 </html>

  样式操作 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>04_jQuery操作样式</title>
 6     <script src="js库/jquery-1.11.3.js"></script>
 7     <style>
 8         div{
 9             width: 300px;
10             height: 300px;
11             border: 1px solid #fff;
12             background-color: #bfb;
13         }
14         .mini{
15             width: 100px;
16             height: 100px;
17             border: 1px solid #fff;
18             background-color: #fbb;
19         }
20         .one{
21             width: 400px;
22             height: 400px;
23             border: 1px solid #fff;
24             background-color: #bbf;
25         }
26     </style>
27 </head>
28 <body>
29     <input type="button" id="btn1" value="attr方法">
30     <input type="button" id="btn2" value="addClass方法">
31     <input type="button" id="btn3" value="removeClass方法">
32     <input type="button" id="btn4" value="toggleClass方法">
33     <input type="button" id="btn5" value="hasClass方法">
34     <input type="button" id="btn6" value="css方法1">
35     <input type="button" id="btn7" value="css方法2">
36     <div></div>
37     <div></div>
38 
39     <script>
40     $("#btn1").click(function(){
41         // 设置 -- attr() - 覆盖之前所有的样式
42         $("div:first").attr("class", "mini");
43     });
44     $("#btn2").click(function(){
45         // 追加 -- addClass() - 在之前的样式基础上累加样式
46         $("div:first").addClass("one");
47     });
48     $("#btn3").click(function(){
49         // 删除 -- removeClass()
50         /*
51             removeClass()方法
52             * 不传参 -- 删除所有样式
53             * 传参 -- 删除指定样式
54          */
55         $("div:first").removeClass();
56     });
57     $("#btn4").click(function(){
58         // 切换 -- toggleClass() - 在没有样式与指定样式之间切换
59         $("div:first").toggleClass("mini");
60     });
61     $("#btn5").click(function(){
62         // 判断 -- hasClass()        
63         alert($("div:first").hasClass("mini"));
64     });
65     $("#btn6").click(function(){
66         // CSS    
67         $("div:first").css({
68             width: 150,
69             height: 150,
70             background: "#ffb"
71         });
72     });
73     $("#btn7").click(function(){
74     // CSS    
75         $("div:first").css("width", "150").css("height", "150").css("background", "#ffb")
76     });
77     </script>
78 
79 </body>
80 </html>

遍历节点

获取父元素

parent( )方法可以获取指定元素的父元素。

  • parent()方法,不传递任何参数,是获取指定元素的父元素。
  • parent(selector)方法,是获取指定元素的符合selector选择器的父元素。
var $parent = $("li:first").parent();    //第一个<li>元素的父元素

获取子元素

children( )方法可以获取指定元素的子元素。

  • children()方法,不传递任何参数,可以获取指定元素的所有子元素。
  • children(selector)方法,是获取指定元素的符合selector选择器的子元素。

获取兄弟元素

  • next( )方法是获取指定元素的下一个兄弟元素。
    • next()方法,不传递任何参数,是获取指定元素的下一个兄弟元素。
    • next(selector)方法,是获取指定元素符合selector选择器的下一个兄弟元素。
  • prev( )方法是获取指定元素的上一个兄弟元素。
    • prev( )方法,不传递任何参数,是获取指定元素的上一个兄弟元素。
    • prev(selector)方法,是获取指定元素符合selector选择器的上一个兄弟元素。
  • siblings( )方法是获取指定元素的所有兄弟元素。
    • siblings( )方法,不传递任何参数,是获取指定元素的所有兄弟元素。
    • siblings(selector)方法,是获取指定元素符合selector选择器的所有兄弟元素。

查找指定后代元素

find(selector)方法,可以查找指定元素的符合selector选择器的后代元素。

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <title>05_jQuery遍历节点</title>
 6   <script src="js库/jquery-1.11.3.js"></script>
 7  </head>
 8  <body>
 9   <ul id="city">
10     <li id="bj" name="beijing">北京
11         <ul>
12             <li>海淀区</li>
13             <li>朝阳区</li>
14             <li>东城区</li>
15         </ul>
16     </li>
17     <li id="tj">天津</li>
18     <li id="nj">南京</li>
19   </ul>
20 
21   <script>
22     // 1. 获取北京节点的父元素
23     console.log($("#bj").parent().attr("id"));
24 
25     // 2. 获取北京节点的祖先元素
26     console.log($("#bj").parents());
27 
28     // 3. 获取id为city的所有子元素
29     console.log($("#city").children());
30 
31     // 4. 兄弟元素
32     console.log($("#tj").prev().attr("id"));
33     console.log($("#bj").next().attr("id"));
34     console.log($("#bj").siblings());
35 
36     // 5. 查找id为city元素内所有li元素的个数
37     console.log($("#city").find("li").length);
38 
39   </script>
40  </body>
41 </html>

其他操作

 

创建操作

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jQuery创建元素</title>
 6       <script src="js库/jquery-1.11.3.js"></script>
 7 </head>
 8 <body>
 9     <ul id="game">
10         <li>反恐精英</li>
11         <li>实况足球</li>
12         <li>魔兽世界</li>
13     </ul>
14     <script>
15         $("#game").append($("<li id='hj'>红色警戒</li>"));
16         $("#game").append($("<p>hello</p>"));
17     </script>
18 </body>
19 </html>

插入操作

  • 内部插入
    • append( )方法,将append( )后面的元素插入在append( )前面指定元素的后面。
    • prepend( )方法,将prepend( )后面的元素插入在prepend( )前面指定元素的前面。
    • appendTo( )方法,将appendTo( )前面的元素插入在appendTo( )后面的元素的后面。
    • prependTo( )方法,将prependTo( )前面的元素插入在prependTo( )后面的元素的前面。
  • 外部插入
    • before( )方法,将before( )后面的元素插入在before( )前面的指定元素的前面。
    • after( )方法,将after( )后面的元素插入在after( )前面的指定元素的后面。
    • insertBefore( )方法,将insertBefore( )前面的元素插入在insertBefore( )后面的指定元素的前面。
    • insertAfter( )方法,将insertAfter( )前面的元素插入在insertAfter( )后面的指定元素的后面。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jQuery插入</title>
 6       <script src="js库/jquery-1.11.3.js"></script>
 7 </head>
 8 <body>
 9 
10     <ul id="city">
11         <li>北京</li>
12         <li id="tj">天津</li>
13         <li>南京</li>
14     </ul>
15 
16     <ul id="game">
17         <li>反恐精英</li>
18         <li id="sk">实况足球</li>
19         <li>魔兽世界</li>
20     </ul>
21 
22     <script>    
23         // 操作天津和实况足球
24         // 内部插入
25         // $("#tj").append($("#sk"));   
26         // $("#tj").appendTo($("#sk"));
27         // $("#tj").prepend($("#sk"));
28      // $("#tj").prependTo($("#sk"));       
29         // 外部插入
30         // $("#tj").after($("#sk"));
31         // $("#tj").before($("#sk"));
32         // $("#tj").insertAfter($("#sk"));
33         $("#tj").insertBefore($("#sk"));    
34         
35     </script>
36 
37 </body>
38 </html>

删除操作

jQuery中的删除操作分别为remove( )方法和empty( )方法。

  • remove( )方法,删除自身元素及所有后代元素。
  • empty( )方法,删除所有后代元素,但保留自身元素。该方法适合完成清空操作。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jQuery删除</title>
 6       <script src="js库/jquery-1.11.3.js"></script>
 7 </head>
 8 <body>
 9 
10     <ul id="game">
11         <li id="cs">反恐精英
12             <ul>
13                 <li></li>
14                 <li></li>
15             </ul>
16         </li>
17         <li id="sk">实况足球
18             <ul>
19                 <li>中国</li>
20                 <li>日本</li>
21             </ul>
22         </li>
23         <li>魔兽世界</li>
24     </ul>
25 
26     <script>    
27         // $("#cs").remove();    //删除了id为cs的元素及其所有后代元素
28         $("#sk").empty();        //删除id为sk的所有后代子元素,保留了自身节点(清空)
29     </script>
30 
31 </body>
32 </html>

替换操作

jQuery中的替换操作分别为replaceWith( )方法和replaceAll( )方法。

  • replaceWith( )方法,该方法前面的元素是被替换元素。
  • replaceAll( )方法,就是颠倒了的repalceWith( )方法。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jQuery替换</title>
 6       <script src="js库/jquery-1.11.3.js"></script>
 7 </head>
 8 <body>
 9 
10     <button>按钮</button>
11 
12     <p>段落一</p>
13     <p>段落二</p>
14     <p>段落三</p>
15     <p>段落四</p>
16 
17     <script>    
18         // 被替换元素.replaceWith("替换元素")
19         // $("button").replaceWith($("<p>这又是一个段落</p>"));
20         // 替换元素.replaceAll("被替换元素")
21         $("<input value='hello'>").replaceAll($("p"));
22     </script>
23 
24 </body>
25 </html>