开发者社区> 技术小哥哥> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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操作
每个HTML元素都可以转换为一个DOM对象,而每个DOM对象都有一组属性,通过这些属性可以设置HTML元素的外观和特性。在标准 JavaScript 中,可以使用document.getElementsById (“对象ID”)方法获取对应的DOM对象。在jQuery中,可以通过选择器选中多个HTML元素,再使用get()方法获取其中某个HTML元素对应的对象
36 0
【JQuery框架】超详细DOM操作看这一篇就够了!
【JQuery框架】超详细DOM操作看这一篇就够了!
79 0
jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
43 0
js_jQuery【下拉菜单联动dom操作】
js_jQuery【下拉菜单联动dom操作】
31 0
第75天:jQuery中DOM操作
一、基础操作 1.html() 使用html()方法读取或者设置元素的innerHTML。 就是相当于javascript里头的innerHTML。 2.text() 使用text()方法读取或者设置元素的innerText。
997 0
jQuery DOM操作
对节点的操作 查找节点 查找节点可以直接利用jQuery选择器来完成,非常便利。 插入节点 jQuery提供了8种插入节点的方法。   序号 方法 描述 实例 1 append() 向每个匹配的元素内部追加内容。
761 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1017 0
2010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载