E025Web学习笔记-JQuery（三）：DOM操作

訾博ZiBo

发布于 2025-01-06 14:44:52

6300

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

一、内容操作

方法：

1、html()：获取/设置元素的标签体内容；
2、text()：获取/设置元素的标签体纯文本内容；
3、val()：获取/设置元素的value属性值；

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div>
        <span id="s1">
            大哥
            <span>大哥哥的小弟弟</span>
        </span>
        <span id="s2">
            二哥
            <span>二哥哥的小弟弟</span>
        </span>
        <span>三哥</span>
        <input id="btn" type="button" value="按钮"/>
    </div>
</body>
<script type="text/javascript">
    // html()方法
    var $s1 = $("#s1");
    document.write("原始内容为："+$s1.html()+"<br/>");
    $s1.html("大哥哥");
    document.write("更改后内容为："+$s1.html()+"<br/>");
    //text()方法
    var $s2 = $("#s2");
    document.write("原始内容为："+$s2.text()+"<br/>");
    $s2.text("二哥哥");
    document.write("更改后内容为："+$s2.text()+"<br/>");
    //val()方法
    var $btn = $("#btn");
    document.write("原始内容为："+$btn.val()+"<br/>");
    $btn.val("新按钮");
    document.write("更改后内容为："+$btn.val()+"<br/>");
</script>
</html>

运行结果：

二、属性操作

方法：

通用属性操作：
1、attr()：获取/设置元素的属性；
2、removeAttr()：删除属性；
3、prop()：获取/设置元素的属性；
4、removeProp()：删除属性；

attr与prop的区别：
1、如果操作的是元素的固有属性，则建议使用prop；
2、如果操作的是元素的自定义的属性，则建议使用attr；

对class属性操作：
1、addClass()：添加class属性值；
2、removeClass()：删除class属性值；
3、toggleClass()：切换class属性——如果存在就删除，否则，就添加；

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div>
        <span id="s1">span1</span>
        <span id="s2" class="c2">span2</span>
        <span id="s3">span3</span>
    </div>
</body>
<script type="text/javascript">
    //1、attr()：获取/设置元素的属性；
    var s1 = $("#s1");
    //获取元素的属性；
    document.write("原始属性值为："+s1.prop("id")+"<br/>");
    //设置元素的属性；
    s1.prop("id","s11");
    var s11 = $("#s11");
    document.write("修改后属性值为："+s11.prop("id")+"<br/>");
    //2、removeAttr()：删除属性；
    s1.removeProp("id");
    //3、添加class属性
    s1.addClass("c1");
    //通过class获取
    var $c1 = $(".c1");
    document.write($c1.text()+"<br/>");
    //4、删除class属性
    $c1.removeClass();
    //5、切换class：如果存在就删除，否则，就添加
    var $s3 = $("#s3");
    $s3.toggleClass("c3");
    document.write($(".c3").text());
</script>
</html>

运行结果：

三、CRUD操作

1、append()：父元素将子元素追加到末尾；
-- 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾；
2、prepend：父元素将子元素追加到开头；
-- 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在开头；

3、appendTo()：
-- 对象1.appendTo(对象2)：将对象1添加到对象2内部，并且在末尾；
4、prependTo：父元素将子元素追加到开头；
-- 对象1.appendTo(对象2)：将对象2添加到对象1元素内部，并且在开头；

5、after()：添加元素到元素后面；
-- 对象1.after(对象2)：将对象2添加到对象1后面，对象1和对象2是同级的兄弟关系；
6、before()：添加元素到元素前面；
-- 对象1.after(对象2)：将对象2添加到对象1前面，对象1和对象2是同级的兄弟关系；

7、insertAfter()：添加元素到元素后面；
-- 对象1.insertAfter(对象2)：将对象1添加到对象2后面，对象1和对象2是同级的兄弟关系；
8、insertBefore()：添加元素到元素前面；
-- 对象1.insertBefore(对象2)：将对象1添加到对象2前面，对象1和对象2是同级的兄弟关系；

9、remove()：移除元素
-- 对象.remove()：将对象删除；
10、empty()：清除元素的所有后代元素；
-- 对象.empty()：将元素的所有后代元素全部清空，但是保留当前对象及其属性节点；

代码演示（太简单了，只演示一个）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div>
        <span id="s1">大哥哥</span>
        <span id="s2">二哥哥</span>
        <span id="s3">三哥哥</span>
    </div>
</body>
<script type="text/javascript">
    var spanElement = document.createElement("span");
    spanElement.setAttribute("id","s4");
    spanElement.innerHTML = "四哥哥";
    // spanElement.innerText = "四哥哥";
    $("div").append(spanElement);
</script>
</html>