jquery 取节点-jQuery操作元素节点

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

jQuery操作元素节点

更新时间：2022-05-04 11:39:17 作者：.NET开发新手

本文介绍了jQuery操作元素节点的方式，通过示例代码讲的非常详细。对于你的学习或者工作有一定的参考价值，有需要的同学可以参考以下

目录

jQuery中的节点操作主要分为以下几种：

1. 查找节点

例子：

    
    
    
    
    
    
    
    
      $(function(){
           // 查找节点
           // 获取h2标签，并将其隐藏
           $("h2").hide();
           // 获取Li元素，并添加背景色
           $("li").css("background-color","red");
      });
    


        
热门动画排行
        

            
名侦探柯南
            
阿拉蕾
            
海贼王
        

功效：

2. 创建并插入节点 1. 创建节点

鞋工厂函数$()用于获取或创建节点jquery 取节点，句型如下：

例如：

2.插入子节点

在元素内部插入子节点，句型如下：

3.插入叔节点

叔节点插在元素外，句型如下：

例子：

    
    
    
    
    
    
    
    
      $(function(){
           // 查找节点
           // 获取h2标签，并将其隐藏
           $("h2").hide();
           // 获取Li元素，并添加背景色
           $("li").css("background-color","red");
           // 创建节点
           var $newNode=$("
火影忍者
"); // 创建含文本的li元素节点
           // 追加子节点
           $("ul").append($newNode);
           $($newNode).appendTo($("ul"));
           // 前置插入子节点 添加到第一个位置
           $("ul").prepend($newNode);
           $($newNode).prependTo($("ul"));
           // 元素之后插入同辈节点
           // 创建ul标签
           var $newheader=$("
热门电影排行
");
           $("h2").after($newheader);
           $($newheader).insertAfter($("h2"));
           // 元素之前插入同辈节点
           $("h2").before($newheader);
           $($newheader).insertBefore($("h2"));
      });
    


        
热门动画排行
        

            
名侦探柯南
            
阿拉蕾
            
海贼王
        

3.更换节点

ReplaceWith()和replaceAll()用于替换节点，例如：

例子：

    
    
    
    
    
    
    
    
      $(function(){
           // 查找节点
           // 获取h2标签，并将其隐藏
           $("h2").hide();
           // 获取Li元素，并添加背景色
           $("li").css("background-color","red");
           // 创建节点
           var $newNode=$("
火影忍者
"); // 创建含文本的li元素节点
           // 追加子节点
           $("ul").append($newNode);
           $($newNode).appendTo($("ul"));
           // 前置插入子节点 添加到第一个位置
           $("ul").prepend($newNode);
           $($newNode).prependTo($("ul"));
           // 元素之后插入同辈节点
           // 创建ul标签
           var $newheader=$("
热门电影排行
");
           $("h2").after($newheader);
           $($newheader).insertAfter($("h2"));
           // 元素之前插入同辈节点
           $("h2").before($newheader);
           $($newheader).insertBefore($("h2"));
           // 替换节点
           $("ul li:eq(1)").replaceWith($newNode);
           $($newNode).replaceAll($("ul li:eq(1)"));
      });
    


        
热门动画排行
        

            
名侦探柯南
            
阿拉蕾
            
海贼王
        

4.复制节点

clone()用于复制节点，句型如下：

注意：

例子：

    
    
    
    
    
    
    
    
      $(function(){
           // 查找节点
           // 获取h2标签，并将其隐藏
           $("h2").hide();
           // 获取Li元素，并添加背景色
           $("li").css("background-color","red");
           // 创建节点
           var $newNode=$("
火影忍者
"); // 创建含文本的li元素节点
           // 追加子节点
           $("ul").append($newNode);
           $($newNode).appendTo($("ul"));
           // 前置插入子节点 添加到第一个位置
           $("ul").prepend($newNode);
           $($newNode).prependTo($("ul"));
           // 元素之后插入同辈节点
           // 创建ul标签
           var $newheader=$("
热门电影排行
");
           $("h2").after($newheader);
           $($newheader).insertAfter($("h2"));
           // 元素之前插入同辈节点
           $("h2").before($newheader);
           $($newheader).insertBefore($("h2"));
           // 替换节点
           $("ul li:eq(1)").replaceWith($newNode);
           $($newNode).replaceAll($("ul li:eq(1)"));
           // 复制节点
           $("ul li:eq(1)").clone(true).appendTo("ul");
           // 输出元素本身html
           alert($("
").append($("ul li:eq(1)").clone(true)).html()) ;
      });
    


        
热门动画排行
        

            
名侦探柯南
            
阿拉蕾
            
海贼王
        

5.删除节点

jQuery提供了三种删除节点的方法：

例如：

例子：

    
    
    
    
    
    
    
    
      $(function(){
           // 查找节点
           // 获取h2标签，并将其隐藏
           $("h2").hide();
           // 获取Li元素，并添加背景色
           $("li").css("background-color","red");
           // 创建节点
           var $newNode=$("
火影忍者
"); // 创建含文本的li元素节点
           // 追加子节点
           $("ul").append($newNode);
           $($newNode).appendTo($("ul"));
           // 前置插入子节点 添加到第一个位置
           $("ul").prepend($newNode);
           $($newNode).prependTo($("ul"));
           // 元素之后插入同辈节点
           // 创建ul标签
           var $newheader=$("
热门电影排行
");
           $("h2").after($newheader);
           $($newheader).insertAfter($("h2"));
           // 元素之前插入同辈节点
           $("h2").before($newheader);
           $($newheader).insertBefore($("h2"));
           // 替换节点
           $("ul li:eq(1)").replaceWith($newNode);
           $($newNode).replaceAll($("ul li:eq(1)"));
           // 复制节点
           $("ul li:eq(1)").clone(true).appendTo("ul");
           // 输出元素本身html
           alert($("
").append($("ul li:eq(1)").clone(true)).html()) ;
           // 删除节点
           $("ul li:eq(1)").remove();
           $("ul li:eq(1)").detach();
           $("ul li:eq(1)").empty(); // 只清空节点内容
      });
    


        
热门动画排行
        

            
名侦探柯南
            
阿拉蕾
            
海贼王
        

这篇关于jQuery操作元素节点的文章到这里就结束了。 希望对您的学习有所帮助jquery 取节点，也希望您多多支持脚本之家。