jQuery的DOM操作-阿里云开发者社区

查找节点
- 查找元素节点
  - var $usernameElement = $("#username");
  - alert("jquery "+$usernameElement.val());
查找属性节点
- jQuery查找到需要的元素节点后，使用attr()方法来获取它的各种属性的值。
- $usernameElement.attr("value");
查找文本节点
- jQuery查找到需要的元素节点后，使用text()方法来获取它的文本内容。
- $usernameElement.text();

原生的dom 操作：3种方法
怎么去记忆jquery dom 操作，对比元素的dom 操作
jquery 的第一个，如何查找节点
三种节点：
1：元素节点
2：文本节点
3：属性节点

节点与元素的区别
元素：html 的页面的标签内容，元素（标签）的属性，元素的文本内容
节点：dom 将html 页面的内容分成了：元素节点，属性节点，文本节点
用元素解析html ，只有元素，而属性与文本都是元素的内容
而变成节点之后：元素，节点，文本属于并列的内容

创建节点

创建元素节点

　　　　　　使用 jQuery 的工厂函数 $(HTML) 。该工厂函数会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回。
当创建单个元素时, 需注意闭合标签。
var $option = $("<option></option>");

创建文本节点
- 创建元素节点后，使用text()方法来设置其节点的文本内容。

　　　　$option.text("北京");

- 创建元素节点时，直接将其节点的文本内容插入其中。

　　　　var $option = $("<option>北京</option>");

创建属性节点
- 创建元素节点后，使用attr()方法来设置其节点的属性。

　　　　$option.attr("value","北京");

- 创建元素节点时，直接将其节点的属性插入其中。

　　　　var $option = $("<option value="北京">北京</option>");

插入节点

内部插入节点

　　　　append(content) :向每个匹配的元素的内部的结尾处追加内容
appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
prepend(content):向每个匹配的元素的内部的开始处插入内容
prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处

外部插入节点

　　　　after(content) :在每个匹配的元素之后插入内容
before(content):在每个匹配的元素之前插入内容
insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面

删除节点

remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用。
empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点)。

复制节点
clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
clone(true): 复制元素的同时也复制元素中的的事件

<button>保存</button>
<p>段落</p>

 $("button").click(function(){
   alert("点击按钮");
 });
  
  //克隆节点，不克隆事件
  $("button").clone().appendTo("p");
  
  //克隆节点，克隆事件
  $("button").clone(true).appendTo("p"

替换节点
replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
replaceAll(): 颠倒了的 replaceWith() 方法.
注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失

//<p>段落</p>
//方式一
$("p").replaceWith("<button>登陆</button>");
//方式二
$("<button>登陆</button>").replaceAll("p");

属性操作
attr(): 获取属性和设置属性。
当为该方法传递一个参数时, 即为某元素的获取指定属性。
当为该方法传递两个参数时, 即为某元素设置指定属性的值。
jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等。
removeAttr(“属性名”): 删除指定元素的指定属性

样式操作

获取 class 和设置 class ：class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成。
追加样式：addClass()
移除样式：removeClass() --- 从匹配的元素中删除全部或指定的 class
切换样式：toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它。
判断是否含有某个样式：hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false。

遍历节点

取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.
取得匹配元素后面紧邻的同辈元素下一个元素:next();
取得匹配元素前面紧邻的同辈元素上一个元素:prev()
取得匹配元素前后所有的同辈元素: siblings()
在jQuery中还有很多遍历节点的方法，具体参看API帮助文档。

包裹节点
wrap()

<strong title="jQuery">jQuery</strong>
<strong title="jQuery">jQuery</strong>
//jQuery代码如下：
$("strong").wrap("<b></b>");
//得到的结果如下
<b><strong title="jQuery">jQuery</strong></b>
<b><strong title="jQuery">jQuery</strong></b>

wrapAll()

<strong title="jQuery">jQuery</strong>
<strong title="jQuery">jQuery</strong>
//jQuery代码如下：
$("strong").wrapAll("<b></b>");

//得到的结果如下
<b>
<strong title="jQuery">jQuery</strong>
<strong title="jQuery">jQuery</strong>
</b>

wrapInner()

<strong title="jQuery">jQuery</strong>
//jQuery代码如下：
$("strong"). wrapInner("<b></b>");

//得到的结果如下
<strong title="jQuery"><b>jQuery</b></strong>

01_查找节点

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>01_查找节点.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6         <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
 7     </head>
 8     <body>
 9          <ul>
10               <li id="bj">dsaf</li>
11              <li id="tj" name="tianjin">天津</li>
12          </ul>
13     </body>
14     <script type="text/javascript">
15             /**
16              * 1: 元素节点 //选择器
17              * 2： 属性节点
18              * 3：文本节点.
19              */
20              //属性节点的查找
21 //             alert($("#tj").attr("name"));
22              //text();
23 //             alert($("#tj").text());
24 //           html()
25             $("#tj").html("cstd");
26             //修改属性节点:
27             $("#tj").attr("name","nanjin")
28             alert($("#tj").attr("name"));
29 
30     </script>
31    
32 </html>

02_创建节点

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>02_创建节点.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6         <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
 7     </head>
 8     <body>
 9          <ul id="city">
10               <li id="bj" name="beijing">北京</li>
11          </ul>
12     </body>
13     <script type="text/javascript">
14 //            /通过jquery dom 创建<li id="tj" name="tianjin">天津</li>        
15             
16             var $li=$("<li></li>"); //元素节点 创建
17                 $li.attr("id","tj"); //属性节点  创建
18                 $li.attr("name","tianjin"); //文本节点创建
19                 $li.text("天津");
20             //往city 节点的末尾添加元素
21             $("#city").append($li);
22     </script>
23 
24 </html>

03_内部插入节点

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>03_内部插入节点.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
 7     </head>
 8      
 9     <body>
10          <ul id="city">
11               <li id="bj" name="beijing">北京
12              </li>
13              
14              <li id="cq" name="chongqing">
15                  重庆
16              </li>
17          </ul>
18           <ul id="love">
19               <li id="fk" name="fankong">
20                 反恐
21                 </li>
22              <li id="xj" name="xingji">
23                 星际 </li>
24          </ul>
25         
26         <div id="foo1">
27             Hello1</div> 
28     </body>
29 <script type="text/javascript">    
30         /**
31          * 四种添加方式：向每个匹配的元素的内部的结尾处追加内容
32          * 
33          */
34         var $li=$("<li id='zhumadian'>驻马店</li>")
35         //append  向每个匹配的元素的内部的结尾处追加内容
36 //        $("#xj").append($li);
37 
38         //appendTo 将每个匹配的元素追加到指定的元素中的内部结尾处
39 //         $("#xj").appendTo($("#cq"))
40 
41 
42         //向每个匹配的元素的内部的开始处插入内容 prepend
43 //            $("#foo1").prepend($li);
44         //将每个匹配的元素插入到指定的元素内部的开始处
45 //        $("#foo1").prependTo($("#xj"));
46     
47 </script>
48 
49 </html>

04_外部插入节点

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>04_外部插入节点.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
 7     </head>
 8     <body>
 9          <ul id="city">
10               <li id="bj" name="beijing">北京</li>
11              <li id="tj" name="tianjin">天津</li>
12              <li id="cq" name="chongqing">重庆</li>
13          </ul>
14          <p  id="p3">
15             I would like to say: p3
16          </p>
17          <p  id="p2">I would like to say: p2</p>
18          <p  id="p1">I would like to say: p1</p>
19     </body>
20 <script type="text/javascript">
21             //外部插入节点
22             //after(content) :在每个匹配的元素之后插入内容
23 //               var  $div=$("<div>屌丝</div>")
24 //            $("#p2").after($div);
25             //before(content):在每个匹配的元素之前插入内容\
26              var  $div=$("<div>屌丝</div>")
27              $("#p2").before($div);
28             //insertAfter(content):把所有匹配的元素插入到另一个指定的元素元素集合的后面
29              $("p").insertAfter($("#tj"));
30             //insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
31              $("p").insertBefore($("#tj"));
32 </script>
33 </html>

05_删除节点

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>05_删除节点.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
 7     </head>
 8      
 9     <body>
10          <ul id="city">
11               <li id="bj" name="beijing">北京<p>海淀区</p></li>
12              <li id="tj" name="tianjin">天津<p>河西区</p></li>
13              <li id="cq" name="chongqing">重庆</li>
14          </ul>
15         <p class="hello">Hello</p> how are <p>you?</p> 
16     </body>
17 <script type="text/javascript">
18             
19             //删除节点..
20             //$("#cq").remove();
21             
22             //清空节点..
23             $("#city").empty();
24 </script>
25    
26 </html>

06_复制节点

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>06_复制节点.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6         <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
 7     </head>
 8     <body>
 9         <button>保存</button><br>    
10         <p>段落</p>
11     </body>
12     <script type="text/javascript">
13         //button增加事件
14         $("button").click(function(){
15              var $clonep=$("p").clone();
16              $("body").append($clonep);
17         });
18     </script>
19 </html>

07_替换节点

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>07_替换节点.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
 7     </head>
 8     <html>
 9         <p>段落</p>
10         <p>段落</p>
11         <p>段落</p>
12         
13         <button>保存</button>
14     </html>
15 <script type="text/javascript">
16         // 将所有匹配的元素都替换成指定的 HTML 或 DOM 元素
17         var $p=$("<div>itcast</div>")
18         
19         //$("button").replaceWith($p);
20         
21         //把button 替换 获取到p 元素
22         $("button").replaceAll($("p"))
23 </script>
24 </html>

08_样式操作

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3   <head>
  4     <title>08_样式操作.html</title>
  5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6         <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
  7         <style type="text/css">
  8            .one{
  9                 width: 200px;
 10                 height: 140px;
 11                 margin: 40px;
 12                 background: red;
 13                 border: #000 1px solid;
 14                 float:left;
 15                 font-size: 17px;
 16                 font-family:Roman;
 17             }
 18         
 19              div,span{
 20                 width: 140px;
 21                 height: 140px;
 22                 margin: 20px;
 23                 background: #9999CC;
 24                 border: #000 1px solid;
 25                 float:left;
 26                 font-size: 17px;
 27                 font-family:Roman;
 28             }
 29             
 30             div.mini{
 31                 width: 30px;
 32                 height: 30px;
 33                 background: #CC66FF;
 34                 border: #000 1px solid;
 35                 font-size: 12px;
 36                 font-family:Roman;
 37             }
 38             
 39             .itcastMove{
 40                 
 41                 width:400px;
 42                 height:500px;
 43                 
 44             }
 45      </style>
 46         
 47         
 48     </head>
 49     <body>
 50          <input type="button" value="采用属性增加样式"  id="b1"/>
 51          <input type="button" value=" addClass"  id="b2"/>
 52          <input type="button" value="removeClass"  id="b3"/>
 53          <input type="button" value=" 切换样式"  id="b4"/>
 54          <input type="button" value=" hasClass"  id="b5"/>
 55         
 56  
 57          <h1>天气冷了</h1>
 58          <h2>天气又冷了</h2>
 59          
 60        
 61         
 62         <br>
 63         <div id="mover">
 64                动画
 65         </div>
 66         <br>
 67         <span id="itcastit" class="spanone">  
 68           span  
 69           <div></div>
 70           
 71         </span>
 72         
 73     </body>
 74 <style type="text/css">
 75     .spanone1{
 76         font-size:40px;
 77     }
 78     
 79 </style>
 80     
 81 <script type="text/javascript">
 82 //<input type="button" value="采用属性增加样式"  id="b1"/>
 83     $("#b1").click(function(){
 84         $("#mover").css("font-size","30px");
 85             
 86     });
 87     
 88 //<input type="button" value="addClass"  id="b2"/>
 89     $("#b2").click(function(){
 90         //因为我们的样式分三种主要的选择器 id,标签，class    
 91         //
 92         $("#itcastit").addClass("spanone1")
 93     //    addClass 批量操作样式
 94     //  css         一次操作一个样式..
 95         
 96         
 97     });
 98 
 99 //<input type="button" value="removeClass"  id="b3"/>
100     $("#b3").click(function(){
101         //删除样式..
102         /**
103          * 1：如果没有指定样式，则会删除所有的样式(class)
104          * 2：有参数，删除指定的样式 (class)
105          * 
106          */
107         $("#itcastit").removeClass();
108         
109         
110     });
111 
112 //<input type="button" value=" 切换样式"  id="b4"/>
113     $("#b4").click(function(){
114                 //show() hide()
115                 /**
116                  * 1:如果指定了参数，在原来的基础上添加一个class 第二次点击，把之前添加的class 删除掉..
117                  * 2：如果没有指定参数，则会删除掉原来的class,删掉了样式，再次调用toggleClass 不会添加原来的class 
118                  */
119                 //显示，隐藏的意思
120                 //隐藏，显示
121                 //调用这个方法，它首先会判断当前元素是否为隐藏状态，如果为隐藏状态，则调用show(),如果为显示状态，则调用hide 隐藏
122 //                $("#itcastit").toggle();
123                 $("#itcastit").toggleClass("spanone1");
124                 
125     });
126 
127 //<input type="button" value=" hasClass"  id="b5"/>
128     $("#b5").click(function(){
129         //hasClass():判断某个元素是否含有某个指定样式
130 //        $("")
131         var flag=$("#itcastit").hasClass("spanone1");
132         alert(flag);
133     });
134 </script>
135 </html>

09_遍历节点

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>09_遍历节点.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6         <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
 7     </head>
 8      
 9     <body>
10          <ul id="city">
11               <li id="bj" name="beijing">北京
12              </li>
13              <li id="tj" name="tianjin">天津</li>
14              <li id="nj" name="nanjing">南京</li>
15          </ul>
16     </body>
17     <script type="text/javascript">
18         //该方法只考虑子元素而不考虑任何后代元素.
19 //        alert($("#city").children().length);
20         //匹配到元素的下一个同辈元素
21 //        var nanj=$("#tj").next().text();
22 //        alert(nanj);
23         
24 
25 //        取得匹配元素前面紧邻的同辈元素上一个元素:prev()
26 //        var bj=$("#tj").prev().text();
27 //        alert(bj);
28 
29         //取得匹配元素前后所有的同辈元素
30         $("#tj").siblings().each(function(index,doc){
31             //dom 获取
32 //                var domattr=doc.getAttribute("name");
33 //                alert(domattr);
34 
35             //jquery 获取...
36         })
37     </script>
38 </html>

10_包裹节点

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>10_包裹节点.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
 7     </head>
 8     <body>
 9         <strong title="jQuery"><b>jQuery</b></strong>
10         <strong title="jQuery"><b>jQuery</b></strong>
11     </body>
12     <script type="text/javascript">
13         //jQuery代码如下：
14         //对匹配到的元素一个一个的进行包裹..
15     //    $("strong").wrap("<b></b>");
16         //把匹配到的内容用指定的标签进行包裹...
17 //        $("strong").wrapAll("<b></b>");
18          $("strong").wrapInner("<b></b>");
19     </script>
20 </html>

本文转自SummerChill博客园博客，原文链接：http://www.cnblogs.com/DreamDrive/p/5780273.html，如需转载请自行联系原作者

jQuery的DOM操作

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料