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

最新推荐文章于 2021-11-24 23:55:15 发布

约德尔蒙

最新推荐文章于 2021-11-24 23:55:15 发布

阅读量604

点赞数

分类专栏： JQuery（以及源码解读）

本文链接：https://blog.csdn.net/gyq04551/article/details/53262504

版权

JQuery（以及源码解读）专栏收录该内容

23 篇文章 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>

约德尔蒙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery节点的操作创建删除复制

添加li 我是土著li //-------------------------------创建节点----------------------------// //1.类似于js中的document.getElement.creatElement("li"); console.log($("我是li标签>"));
复制链接

扫一扫