jQuery添加删除DOM元素方法详解 - 星鸿娱乐平台【授权指定首页】

玩法介绍当前位置:星鸿娱乐 > 玩法介绍 > >

jQuery添加删除DOM元素方法详解

  

[jQuery,添加,删除,DOM元素]jQuery添加删除DOM元素方法详解

  

本文实例分析了jQuery添加删除DOM元素的方法。分享给大家供大家参考,具体如下:  

  

介绍  

  

DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面。

  

  

1、DOM Core  

  

DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML。

  
  例如:document,getElementsByTagName("form");//使用DOM Core来获取表单对象的方法。

  

  

2、HTML-DOM  

  

在使用Javascript和DOM为HTML文件编写脚本时,有许多属于HTML-DOM的属性,HTML-DOM的出现甚至比DOM Core还要早,他提供了一些更简明的记号来描述各种HTML元素的属性。

  
  例如: 代码如下:

document.forms //HTML-DOM提供了一个forms对象。
  

  

PS:可以看出,获取对象、属性即可以用DOM Core来实现民,也可以用HTML-DOM实现。

  

  

3、CSS-DOM  

  

CSS-DOM是针对CSS的操作,在javascript中,CSS-DOM主要的作用是获取和设置style对象的各种属性,由此达到网页呈现出各种不同的效果.

  

  

例如: 代码如下:

element.style.color="red";//设置某元素的字体颜色的方法。
  

  

常用方法  

  

1.查找元素节点  
   代码如下:

var $li = $("ul li:eq(0)");//获取ul标记下的第一个li,也可以写成 $("#ulID li:eq(0)");
  
  2.查找元素属性  

  

利用jquery的attr()方法来获取元素的各种属性的值,attr()方法的参数可以是一个,也可以是两个。

  

  

当参数是一个时,则是要查询的属性名称。

  

  

当参数是两个时,则可以设置属性的值。

  

  
  
  alert($("#id").attr("title")); //输出元素的title属性.一个参数  $("#id").attr("title","改变title值"); //改变元素的title属性值.二个参数  
  
  

3.添加元素节点  

  

$(html) 简单说明一下$(html)方法会根据传入的html标记字符串创建一个dom对象,并将这个dom对象包装成一个jquery对象返回,总之就是把标记所有html代码都放到$()工厂里面就行了!

  

  

例:  

  
  
  var $htmlLi = $(" 
  • 香蕉
  • "); //创建DOM对象  var $ul = $("ul"); //获取UL对象  $ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表  
      
      

    下面列出部分插入节点的方法  

      

                                                                            星鸿娱乐注册                          
      

    方法  

      
      

    描述  

      
      

    示例  

      
      

    Append()  

      
      

    向每个匹配的元素内追加内容  

      
      

    HTML代码  

      

        

        

      JQuery代码  

        

      $(“ul”).append(“

    • AA
    • ”);  

        

      结果  

        

          

          

      • AA
      •   

          

        

        

        

        
        

      appendTo()  

        
        

      该方法和Append()相反,a.Append(b)是将b追加到a中,而appendTo()是将b追求到a  

        
        

      HTML代码  

        

          

          

        JQuery代码  

          

        $ (“

      • AA
      • ”).appendTo (“ul”).;  

          

        结果  

          

            

            

        • AA
        •   

            

          

          

          

          
          

        Prepend()  

          
          

        向每个匹配的元素内部前置内容  

          
          

        HTML代码  

          

        哈哈

          

          

        JQuery代码  

          

        $(“p”).prepend(“ABC”);  

          

        结果  

          

        ABC哈哈

          

          
          

        prependTo()  

          
          

        该方法和Prepend()相反,a. Prepend (b)是将b前置到a中,而prependTo ()是将b前置到a  

          
          

        HTML代码  

          

        哈哈

          

          

        JQuery代码  

          

        $(“ABC”).prependTo.(“p”);  

          

        结果  

          

        ABC哈哈

          

          
          

        After()  

          
          

        在每个匹配的元素之后插入内容,是之后  

          
          

        HTML代码  

          

        AAA

          

          

        JQuery代码  

          

        $(“p”).After(“cc”);  

          

        结果  

          

        AAA

        cc  

          
          

        insertAfter()  

          
          

        After()相反  

          
          

        HTML代码  

          

        AAA

          

          

        JQuery代码  

          

        $ (“cc”).After(“p”);  

          

        结果  

          

        AAA

        cc  

          
          

        Before()  

          
          

        在每个匹配的元素之前插入内容  

          
          

        HTML代码  

          

        AAA

          

          

        JQuery代码  

          

        $(“p”). Before (“cc”);  

          

        结果  

          

        cc

        AAA

          

          
          

        insertBefore()  

          
          

        Before()相反  

          
          

        HTML代码  

          

        AAA

          

          

        JQuery代码  

          

        $ (“cc”). insertBefore (“p”);  

          

        结果  

          

        cc

        AAA

          

          
          

          

          

          

        好了,不要斋看,自己动手试试吧:)  

          

        4.删除元素节点  

          

        由于我们需要经常动态去改变DOM元素,因此Jquery提供了两种删除节点的方法,即remove()和empty();  

          

        4.1 remove()方法  

          
          
          $("p").remove();// 我们可以获取到要删除的元素,然后调用remove()方法  $("ul li:eq(0)").remove().appendTo("ul");// 删除ul下面的第一个li标记,然后再把删除的li标记重新加到ul里面,remove()方法返回删除元素的引用,这时你可以继续使用  $("ul li").remove("li[title!=ABC]");//remove可以接受通过参数来选择性的删除符合条件的元素;  
          
          

        4.2 empty()方法  

          

        严格来讲,empty()方法并不是删除元素,而是清空  

          

        例:  

          

        HTML代码:  

          
          
          
            
        • AAA
        •   
          
          
          

        JQuery代码:  
           代码如下:

        $("ul li:eq(0)").empty();
          

          

        结果  

          
          
          
            
        •   
          
          
          

        记住,只会清空内容,不会请空属性;  

          

        更多关于jQuery操作DOM元素相关内容感兴趣的读者可查看本站专题:《jQuery操作DOM节点方法总结》  

          

        希望本文所述对大家jQuery程序设计有所帮助。

          

        (责任编辑:admin)

        上一篇:node.js中的fs.writeFile方法使用说明

        下一篇:微信小程序 简单教程实例详解

        推荐内容

        客户服务热线

        010-400-12345

        在线客服