jquery节点的操作创建删除复制

清疚 2022-07-14 00:40 201阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    
    </head>
    <body>
        <ul></ul>
        <button>添加li</button>
        <ul>
            <li>我是土著li</li>
        </ul>
        <script src="jquery-1.11.1.js"></script>
        <script>
    
    
    //-------------------------------创建节点----------------------------//
        //1.类似于js中的document.getElement.creatElement("li");
            console.log($("<li class='aaa'>我是li标签</li>>"));
    
        //2.类似于js中的innerhtml属性，因为此属性识别标签；
            $("ul").html("<li>我是html方法创建出来的li标签</li>");
    
    
    //-------------------------------添加节点-----------------------------//
        //创建一个新的Jquery对象li
        var jqNewLi = $("<li>我是jquery创建出来li。用的是append方法添加</li>");
            //在盒子的最末尾添加一个元素。
                //append();
                 $("ul").append(jqNewLi);//把心创建的li添加到ul的最末尾中；
    
            //还有一种写法 
                jqNewLi.appendTo($("ul"));
    
            //在盒子的最前面添加
                //prepend
                $("ul").prepend(jqNewLi);
    
            //添加到兄弟元素的前面
                //before
            $("li").before(jqNewLi);
            //添加到兄弟节点的后面
                //after
            $("li").after(jqNewLi);
    
    
    //--------------------------------删除节点---------------------------------//
            //方法1：.html("");
                // $("ul").html("");
    
            //方法2：.empty();
                //$("ul").empty();
    
            //方法3：删除指定的li。  ---  自杀！
                //$("li:eq(0)").remove();
    
    //--------------------------------复制节点--------------------------------//
            //复制节点：  clone();
                //var newUl  = $(".box ul").clone();
            //把新复制的节点添加到.box类名中
                //$(".box").append(newUl);

var chils= s.childNodes;  //得到s的全部子节点
    var par=s.parentNode;   //得到s的父节点
    var ns=s.nextSbiling;   //获得s的下一个兄弟节点
    var ps=s.previousSbiling;  //得到s的上一个兄弟节点
    var fc=s.firstChild;   //获得s的第一个子节点
    var lc=s.lastChile;   //获得s的最后一个子节点
    
    
    
    
    jQuery.parent(expr)           //找父元素
    jQuery.parents(expr)          //找到所有祖先元素，不限于父元素
    jQuery.children(expr)        //查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙
    jQuery.contents()            //查找下面的所有内容，包括节点和文本。
    jQuery.prev()                //查找上一个兄弟节点，不是所有的兄弟节点
    jQuery.prevAll()             //查找所有之前的兄弟节点
    jQuery.next()                //查找下一个兄弟节点，不是所有的兄弟节点
    jQuery.nextAll()             //查找所有之后的兄弟节点
    jQuery.siblings()            //查找兄弟节点，不分前后
    jQuery.find(expr)            //跟jQuery.filter(expr)完全不一样，jQuery.filter(expr)是从初始的
        </script>
    </body>
    </html>