jQuery开发之DOM操作二

页面导航:首页 > 网络编程 > JavaScript > jQuery开发之DOM操作二

jQuery开发之DOM操作二

来源: 作者: 时间:2016-01-23 10:23 【

接上篇文章3,插入节点 插入节点的方法如下图: 4,删除节点 (1) remove()方法 作用是从DOM中删除所有匹配的元素。示例代码如下:var $li =$( ul li:eq(1) ) remove();

接上篇文章

3,插入节点
插入节点的方法如下图:
这里写图片描述
这里写图片描述

4,删除节点<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPiA8YnI+CigxKSByZW1vdmUoKbe9t6ggPGJyPgrX99PDyse000RPTdbQyb6z/cv509DGpcXktcTUqsvYoaPKvsD9tPrC68jnz8KjujwvcD4KCgoKPHByZSBjbGFzcz0="brush:java;">var $li =$("ul li:eq(1)").remove(); //获取第二个

  • 节点后,将它从网页中删除。

    注意:当某个节点用remove()删除后,该节点包含的所有后代节点将同时被删除。这个方法的返回值是一个指向被删除节点的引用,因此可以在以后继续使用这些元素。

    (2) detach()方法
    detach() 和remove()方法一样,也是从DOM中去掉匹配的元素,但需要注意的是,这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件,附加的数据都会保留下来。
    示例代码如下:

     var $li =$("ul li:eq(1)").detach();  //获取第二个
  • 节点后,将它从网页中删除。
  • (3) empty()方法
    严格来说empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点。
    示例代码如下:

    var $li = $("ul li:eq(1)").empty();  //获取第二个
  • 节点后,清空元素里的内容。
  • 5,复制节点

    
    
    
    
    <a href='http://www.js-code.com/CSS/' target='_blank'><u>css</u></a> ajax 
    <script type ="text/javascript" src ="jquery.js" ></script>
    
    <script type ="text/javascript">
    $(document).ready(function(){
        $("ul li:eq(2)").click(function(){
            $(this).clone().appendTo("ul");  //复制当前单击的节点,并将它追加到
      元素中。 }); }); </script>

      选择最喜欢的水果

      • 苹果
      • 橘子
      • 菠萝

    6,节点替换
    如果要替换某个节点,jQuery提供了相应的方法,即replaceWith()和replaceAll();
    replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML活着DOM元素。
    示例代码如下:

    
    
    
    
    jQuery test 
    <script type ="text/javascript" src ="jquery.js" ></script>
    
    <script type ="text/javascript">
    $(document).ready(function(){
        $("p").replaceWith("你最不喜欢的水果是?")
    });
    
    </script>
    
    
    

    选择最喜欢的水果

    • 苹果
    • 橘子
    • 菠萝

    运行结果如下:
    这里写图片描述

    replaceAll()方法的示例代码如下:

    
    
    
    
    jQuery test 
    <script type ="text/javascript" src ="jquery.js" ></script>
    
    <script type ="text/javascript">
    $(document).ready(function(){
        $("
  • 荔枝
  • ").replaceAll("li") }); </script>

    选择最喜欢的水果

    • 苹果
    • 橘子
    • 菠萝

    运行结果如下:

    这里写图片描述

    7,包裹节点
    (1) wrap()方法
    jQuery代码示例如下:

    $("strong").wrap("

    "); //用
    标签将元素包裹起来

    运行结果如下:


    something

    (2) wrapAll()方法
    该方法会将所有匹配的元素用一个元素来包裹,它不同于wrap()方法,wrap() 方法是将所有的元素进行包裹。
    jQuery示例代码如下:

    $("strong").wrapAll("

    ");

    运行结果如下:


    你最喜欢的水果 你最不喜欢的水果

    (3) wrapInner()方法
    该方法将每一个匹配的元素的字内容包括(文本节点) 用其结构化的标记包裹起来。jQuery示例代码如下:

    $("strong").wrapInner("

    ");

    运行结果如下:


    最喜欢的水果
  • Tags:

    相关文章

      文章评论

      
      <