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

秒速五厘米 2024-04-19 11:00 78阅读 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>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

## 二、属性操作 ##

### 方法： ###

通用属性操作：
    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>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

## 三、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>

### 运行结果： ###

![2019091720015397.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5910b9d62e20469294daeb9bd9f2cd95.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/72b459abe7f649d39f8d9a9e01e967c8.jpg
[2019091720015397.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/600c848c49a44ce9b4a8e8fc765e5a9c.jpg