jQuery 学习笔记之六 (jQuery DOM的操作)

最新推荐文章于 2022-09-21 20:28:40 发布
冰Ivan
最新推荐文章于 2022-09-21 20:28:40 发布
阅读量653
点赞数
文章标签： jquery javascript
本文深入探讨了DOM操作的核心概念，包括DOM核心的基本用途、如何使用DOM核心获取表单对象、构建DOM元素、属性操作、节点操作等。通过具体实例展示了如何在网页中创建、修改和删除元素，以及如何动态地添加、替换和删除节点。此外，文章还详细介绍了如何使用jQuery简化DOM操作，包括获取元素、设置属性、创建和删除节点、操作样式、文本和值、选择和遍历元素等。
DOM操作的分类

DOM
 Core 并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。

它的用途并非仅限与处理网页，也可以用来处理任何一种使用标记语言编写出来的文档。例如XML

javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法，这些都是Dom
 Core的组成部分。

使用DOM
 Core来获取表单对象的方法

 document.getElementByTagName("from");

使用DOM
 Core来获取某元素的src属性的方法：

 element.getAttribute("src");

构建DOM元素

<body>

  <p
 title="选择你最喜欢的水果">你最喜欢的水果是?</p>

  <ul>

    <li
 title='苹果'>苹果</li>

    <li
 title='橘子'>橘子</li>

    <li
 title='菠萝'>菠萝</li>

  </ul>

</body>

使用jQeruy在文档数上查找节点非常容易，可以通过在第2章介绍的jQuery选择器来完成。

   1.查找元素节点

    获取元素节点并打印出它的文本内容，jQuery代码如下:

    var $li
 = $("ul
 li:eq(1)");  
 获取<ul>里第2个<li> 节点

    var li_txt=$li.text();       
//获取第2个<li>元素节点的文本内容

    alert(li_txt);               
//打印文本内容，这里会打印出橘子

    以上代码获取了<ul>元素里第2个<li>节点，并将它的文本内容"橘子"打印出来

   2.查找属性节点

   利用jQuery
 选择器查找到需要的元素后，就可以使用attr()方法来获取它的各种属性的值.attr()方法得参数可以是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字。

   获取属性节点并打印出它的文本内容，jQuery代码如下：

   var $para
 = $("p");   
//获取<p>节点

   var p_txt=$para.attr("title"); 
//获取<p>元素节点属性title

   alert(p_txt);   
//打印title属性值

 创建节点

  在dom
 操作中，常常需要动态创建HTML内容，是文档在浏览器里面的呈现效果发生变法，并且达到各种各样的人机交互的目的。

  1.
 创建元素节点

  例如要创建两个<li>元素节点，并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。

  (1)创建两个<li>新元素。

  (2)将这两个新元素插入文档中。

   第(1)个步骤可以使用jQuery的工厂函数$()来完成。

   $(html);

   $(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

   首先创建两个<li>元素,jQuery代码如下:  

   $("ul").append($li_1);  
//添加到<ul>节点中，使之能在网页中显示

   $("ul").append($li_2);  
//可以采取链式写法:$("ul").append($li_1).append($li_2);

     注意事项：

       (1)动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。

       (2)当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。

        例如创建一个<p>
 元素，使用$("<p/>")或者("<p></p>"),但是不要使用$("<p>")或者大写的$("<P/>");

   2.创建文档节点

   var $li_1=
 $("<li>香蕉</li>"); 
//创建一个<li>
 元素，包括元素节点和文本节点，香蕉就是创建的文本节点

   var $li_2
 =$("<li>雪梨</li>"); 
//创建一个<li>
 元素，包括元素节点和文本节点，雪梨就是创建的文本节点。

   $("ul").append($li_1);         
//添加到<ul>节点中，使之能在网页中显示

   $("ul").append($li_2);         
//添加到<ul>节点中，使之能在网页中显示

   以上代码所示，创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法将他们添加到文档中就可以了。

      注意事项：

       无论$(html)中的HTML代码多么复杂，都要使用相同的方式来创建。

       例如$("<li><em>这是</em><b>一个</b><a
 href='#'>复杂的组合</a></li>");

   3.创建属性节点

    创建属性及节点与创建文本节点类似，也是直接在创建元素节点时一起创建。

    jQuery代码如下:

    var $li_1=$("<li
 title='香蕉'>香蕉</li>");//创建一个<li>元素，包含元素节点，文本节点和属性节点
 其中title='香蕉'就是创建的属性节点

    var $li_2=$("<li
 title='雪梨'>雪梨</li>");//创建一个<li>元素
 包括元素节点，文本节点和属性节点，其中title=‘雪梨’就是创建的属性节点

    $("ul").append($li_1);

    $("ul").append($li_2);
//添加到<ul>
 节点中，使之能在网页中显示

    插入节点

    动态创建HTML元素并没有世界用处，还需要将新创建的元素插入文档中，将新创建的节点插入文档最简单的办法是，让它成为这个文档的某个节点的子节点。

    使用append(),它会在元素内部追加新创建的内容。

    jQuery中还有提供了其他几种插入节点的方法。

     方法                  
 描述                                   示例 

  append()        
 向每个匹配的元素内部追加内容                 HTML代码  

                                                             <p>我想说:</p>

                                                             jQuery代码:
 $("p").append("<b>你好</b>"); 
 结果: <p>我想说:<b>你好</b></p>

  appendTo()      
 将所有匹配的元素追加到指定的元素中，

                   实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中  
 HTML 代码  <p>我想说:<p> jQuery代码： $("<b>你好</b>").appendTo("p"); 
 结果: <p>我想说：<b>你好</b></p>    

  prepend()       
 向每个匹配的元素内部前置内容    HTML代码: <p>我想说:</p > jQuery代码: $("p").prepend("<b>你好</b>");结果<p><b>你好</b>我想说:</p>

  prependTo()     
 将所有匹配的元素前置到指定的元素中，实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中。HTML 代码 <p>我想说:</p>  jQuery代码: $("<b>你好</b>").prependTo("p");
 结果<p><b>你好</b>我想说<p>

  after()         
 在每个匹配的元素之后插入内容     HTML代码 <p>我想说:<p> jQuery代码: $("p").after("<b>你好<b>");
 结果: <p>我想说:</p><b>你好</b>

  insertAfter()   
 将所有匹配的元素插入到指定元素的后面，与after()颠倒了         HTML代码<p> 我想说</p> jQuery代码：$("<b>你好</b>").insertAfter("p");
 结果<p>我想说：</p><b>你好</b>

  before()        
 将每个匹配的元素之前插入内容              HTML代码 <p>我想说:</p>  jQuery 代码：$("p").before("<b>你好</br>"); 
 结果<b>你好</b>我想说:</p>

  insertBefore()  
 将所有匹配的元素插入到指定的元素的前面，实际上，使用该方法是颠倒了常规的before的操作   $("<b>
 你好</b>").insertBefore("p");
 结果:<b>你好</b><p>我想说:</p>

  删除节点

  如果文档中某一个元素多余，那么应将其删除，jQuery提供了两种删除节点的方法，即remove()
 和empty()

  1.remove()方法

   作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式类筛选元素。

   例如删除图3-11中<ul>节点中的第2个<li>元素节点，jQuery代码如下:

   $("ul
 li:eq(1)").remove();//获取第2个<li>元素节后，将它从网页中移除

   当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除，这个方法得放回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

   下面的jQuery代码说明元素用remove()方法删除后，还是可以继续使用的。

   var $li
 = $("ul
 li:eq(1)").remove();//获取第2个<li>元素节点后，将它从网页中删除

   $li.appendTo("ul");//把刚删除的节点又重新添加到<ul>元素里

   可以直接使用appendTo()方法得特性来简化以上代码：

   $("ul
 li:eq(1)").appendTo("ul");

   //appendTo()方法也可以用来移动元素

   //移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点。

   另外remove()方法也可以通过传递参数来选择性地删除元素

   $("ul
 li").remove("li[title!='菠萝']");
//将<li>元素属性title不等于"菠萝"
 的<li>元素删除。

   2.empty()方法

   严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后台节点。

   $("ul
 li:eq(1)").empty(); 
//获取第2个<li>元素节点后，清空此元素里的内容，注意是元素里面。

   使用firebud查看橘子节点发生变化 
 <li title='橘子'/>

   3.复制节点

    复制节点也是常用的DOM操作之一，例如购入车，用户不仅可以通过单击商品下方的选择按钮购买相应的产品，也可以通过鼠标拖动商品

    并将其放到购物车中，这个商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并将其跟随鼠标移动，从而达到以下购物车的效果

    $("ul
 li").click(function(){

     $(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到<ul>元素中

   });

   //在页面中点击"菠萝"后，列表最下方出现新节点"菠萝"。

   $(this).clone(true).appendTo("body");//注意参数true

   在clone()方法传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件，因此该元素的副本也同样具备复制功能。

   替换节点

   如果要替换某个节点，jQuery提供了相应的方法，即replaceWith和
 replaceAll()

   replaceWith()方法得做哟偶那个是将所有匹配的元素都替换成指定的HTML或者DOM元素。

   例如要将网页中<p
 title="选择你最喜欢的水果">你最喜欢的水果是?</p>
 替换成<strong> 你最不喜欢的水果是?</strong> 可以使用如下jQuery代码：

     $("p").replaceWith("<strong>你最不喜欢的水果是?");

     也可以使用jQuery中另一个方法repalceAll()来实现，该方法与replaceWith()方法得作用相同，只是颠倒了replaceWith的操作。

     $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");

     注意：

       如果在替换之前，已经为元素绑定了事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。

  4.
 包裹节点

     如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，wrap()，该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。

     jQuery代码如下：

     $("strong").wrap("<b></b>");//用<b>标签把<strong>
 元素包裹起来

     得到的结果如下： 

     <b><strong
 title="选择你最喜欢的水果">
 你最喜欢的水果是?</strong></b>

     1.wrapAll()方法

     该方法将会将所有匹配的元素用一个元素包裹。它不同于wrap()方法，wrap()方法将所有的元素进行单独的包裹。

     $("strong").wrap("<b></b>");

     2.wrapinner()方法

     该方法将每一个匹配的元素的子内容(包括文本节点)
 用其他结构化的标记包裹起来，例如可以使用它来包裹<strong> 标签的子内容:jQuery代码如下：

     $("strong").wrapInner("<b></b>");

     运行代码后，发现<strong>标签内的内容被一对<b>标签包裹了。

     <strong
 title="选择你最喜欢的水果"><b>你最喜欢的水果是?</b></strong>

     属性操作

     在jQuery
 中，用attr() 方法来获取和设置元素属性，removeAtt() 方法来删除元素属性。

     1.获取属性和设置属性

       如果要获取<p>元素的属性title,那么只需要给attr()方法传递一个参数，即属性名称。

     var $para=$("p");              
//获取<p>节点

     var p_txt=$para.attr("title"); 
//获取<p>元素节点属性title

     如果要设置<p>元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数即属性名称和对应的值。

     jQuery代码如下：

     $("p").attr("title","your
 title");//设置单个的属性值

     //为同一个元素设置多个属性值

     $("p").attr({"title":"your
 title","name":"test"});//将一个
 "名值" 形式的对象设置为匹配元素的属性。

      jQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的，例如上面的attr()方法，即能设置元素属性的值，也能获取元素属性的值，类似的还有html(),text(),height(),width(),val(),css()等方法。

    2.删除属性

      有时候需要删除文档元素的特定属性，可以使用removeAttr()方法

      删除<p>元素的title属性

      $("p").removeAttr("title");

    操作样式

    获取样式和设置样式

    HTML代码如下：

    <p
class="myclass" title="选择你最喜欢的水果">
 你最喜欢的水果是?</p>

    class 也是<p>元素的属性，因此获取class 和设置class都可以使用attr()方法。

    var p_class
 = $("p").attr("class");//获取<p>元素的class

    可以使用attr()方法来设置<p>元素的class，jquery代码如下：

    $("p").attr("class","high");//设置<p>元素的class为high

    他是将原来的class替换为class，而不是在原来的基础上追加新的class

    追加样式

    jQuery提供了专门的addClass()方法来追加样式，为了使例子更为容易理解，首先在<style>标签里添加另一组样式

    <style>

    .high{

     font-weight:bold;

     color:red;

    }

    .another{

     font-style:italic;

     color:blue;

    }

   //在网页中追加class类的按钮. 

   $("input:eq(2)").click(function(){

   $("p").addClass("another");
//给<p>元素追加"another"类

   })

   attr()
 和addClass()的区别

   用途                      
 追加样式                         设置样式  

对同一个网页元素操作      
 <p>test</p>         

第一次使用方法            
 $("p").addClass("high");            
 $("p").attr("class","high");

第1次结果                 
 <p class="high">test</p> 

再次使用方法              
 $("p").addClass("another");         
 $("p").attr("class","another");

结果                      
 <p class="high
 another">
 test</p>    <p class="another">
 test</p>

3移除样式

如果单击某一个按钮时，删除class的某个值，那么可以使用addClass()方法相反的removeClass()方法来完成，它的作用是从匹配的元素中删除全部或者指定的class

如下jQuery代码来删除

 $("p").removeClass("high");//移除<p>元素中为"high"的class

 //如果要把<p>元素的两个class都删除，就要使用removeClass()

 $("p").removeClass("high").removeClass("another");

 //jquery提供了更简单的方法

 $("p").removeClass("high
 another");

 另外，还可以使用removeClass()方法得一个特性来完成同样的效果，它不带参数的时候会将
class的值全部删除.

 $("p").removeClass();

 切换样式

 $toggleBtn.toggle(function(){

   //3

 },function(){

   //4

 });

 toggle()方法此处的作用是交替执行代码3和4两个函数，如果元素原来是显示的，则隐藏它，如果隐藏的，则显示它，此时，toggle()方法主要是控制行为上的重复切换。

 判断是否含有某个样式

 hasClass可以用来判断元素中是否有某个class，如果有，则返回true，否则返回false

 $("p").hasClass("another");

 //jQuery内部实际上是调用了is()方法来完成这个功能的，该方法等价于

 $("p").is(".another")

 1.设置和获取HTML，文本和值

 html()方法

 $("P").html();//获取元素的html代码

 2.text()
 方法

 $("p").text();
//获取<p>元素的文本内容

 //text()可以对文本内容设置内容

 $("p").text("你最喜欢的水果是?");
//设置<p>元素的文本内容

 3.val()方法

 val()方法取值

 通过上面的例子可以发现val()方法不仅能设置元素的值，同时也能获取元素的值，另外val()
 方法还有另外一个用处，就是它能select(下拉列表框)，checkbox(多选框)和radio(单选框)
 相应的选项被选中，在表单操作中会经常用到。

 //使用val设置选中项

 $("#single").val("选择2号");

 //如果要使下拉列表的第2项和第3项被选中

 $("#multiple").val(["选择2号"，"选择3号"]);
//以数组的形式赋值

 使多个文本框被选中

 $(":checkbox").val(["check2","check3"]);

 $(":radio").val(["radio2"]);

 也可以使用attr()方法来实现同样的功能

 $("#single
 option:eq(1)").attr("selected",true); 
//设置属性selected

 $("[value=radio2]:radio").attr("checked",true);

1 
 children()方法 

 该方法用于取得匹配元素的子元素集合

 var $body
 = $("body")
 .children();

 var $p=$("p").children();

 var $ul
 = $("ul").children();

 alert($body.length);

 alert($p.length);

 alert($ul.length);

2.next方法

 该方法用于取得匹配元素后面紧邻的同辈元素。

 从dom树的结构可以知道<p>元素的下一个同辈节点时<ul>，因此可以通过next()
 方法来获取<ul> 元素

 var $p1
 = $("p").next();//取得紧邻<p>元素后的同辈元素

 <ul>

   <li
 title='苹果'>苹果</li>

   <li
 title='橘子'>橘子</li>

   <li
 title='菠萝'>菠萝</li>

 </ul>

 prev()方法

 该方法用于取得匹配元素前面紧邻的同辈元素。

 从DOM树的结构中可以知道<ul>元素的上一个同辈节点时<p>，因此可以通过prev()方法类获取<p>元素

 var $ul
 = $("ul").prev(); 
//取得紧邻<ul>元素前得同辈元素

 得到的结果将是:

 <p
 title="选择你最喜欢的水果">你最喜欢的水果是?</p>

 4.siblings()方法

 该方法用于取得匹配元素前后所有的同辈元素。

 在第1章导航栏的例子中有段代码如下：

  $(".has_children").click(function()
 { 

   $(this).addClass("highlight"); 
//为当前元素增加highlight类

   .children("a").show().end()

   .siblings().removeClass("highlight")

   .children("a").hide();

})