jQuery-dom操作

最新推荐文章于 2022-11-10 14:42:46 发布

CODE IN JULY

最新推荐文章于 2022-11-10 14:42:46 发布

阅读量360

点赞数

分类专栏：前端学习文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_45436241/article/details/109495469

版权

这篇博客详细介绍了jQuery如何进行DOM操作，包括jQuery对象与原生对象的区别，如何增加、删除、复制和替换节点，以及筛选、遍历节点的方法。此外，还讲解了定位和偏移的使用，以及操作文本的各种函数。

摘要由CSDN通过智能技术生成

文章目录

1.jQuery对象与原生对象

原生对象：只能调用原生属性和方法

jQuery对象：只能调用jq对象中的属性和方法

原生对象 ===> jq对象 
        语法： $(原生对象)
jq对象  ===> 原生对象
        语法： jq对象.get(0) 或者 jq对象[0]
注意； 原生对象是jq对象索引为0上的值

this : 原生对象

$(this): jq对象

2.jQuery对Dom的操作

2.1.增加节点

1. 在父级元素中所有子节点之前或之后追加
        之后： append()  appendTo()
        之前： prepend() prependTo()

2. 在指定的兄弟节点之前之后追加
        之后： after()  insertAfter()
        之前： before() insertBefore()

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="F:\jsLib\jquery-3.5.1\jquery-3.5.1.js"></script>
        <body>
            <div id="parent">
                <p>第1个节点</p>
                <p id="two">第2个节点</p>
                <p>第3个节点</p>
                <p>第4个节点</p>
            </div>                 
        <script> 
         /* 需求： 在parent中增加一个不存在的子节点 */
        $("<p>new node-1</p>").appendTo($("#parent"));//把new node-1添加到parent节点后面
        $("#parent").append($("<span>new node-2</span>"));//在parent节点后追加new node-2
        //在指定兄弟节点之后
        $("#two").after($("<span>new node-3</span>"));
        $("<span>new node-4</span>").insertAfter($("#two"));
        </script>
    </head>
</html>

2.2.删除节点

删除所有子节点： jq对象.empty()

删除自身： jq对象.remove() 或者 jq对象.detach();

remove() : 返回被删除的元素，删除的元素不保留行为(事件)

detach() : 返回被删除的元素，删除的元素保留行为(事件)

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="F:\jsLib\jquery-3.5.1\jquery-3.5.1.js"></script>
    </head>
    <body>
        <button>删除元素</button>
        <div id="box1">
        <p>这是锻炼</p>
        </div>
        <div id="box2"></div>

    </body>
    <script> 
    /* 需求1： 给box1中p标签添加事件 */
    $("#box1 p").click(() => alert("ok..."));
    /* 需求2： 点击删除按钮，删除p并追加到box2中 */
    $("button").click(() => {
    
        //const $pEle = $("#box1 p").remove();
        const $pele = $("#box1 p").detach();
        $pele.appendTo($("#box2"));
    })
    </script>
</html>

2.3.复制节点

jq对象.clone() : 复制节点，不复制行为

jq对象.clone(true) : 复制节点，复制行为

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="F:\jsLib\jquery-3.5.1\jquery-3.5.1.js"></script>
    </head>
    <body>
        <button>复制元素</button>
        <div id="box1">
        <p>这是锻炼</p>
        </div>