006，Jquery的Dom操作

最新推荐文章于 2024-04-24 10:00:20 发布

V哥学It

最新推荐文章于 2024-04-24 10:00:20 发布

阅读量281

点赞数 2

分类专栏： Jquery小白入门到精通文章标签： jquery js javascript javaweb dom

本文链接：https://blog.csdn.net/weixin_39032063/article/details/116401622

版权

Jquery小白入门到精通专栏收录该内容

15 篇文章 4 订阅

订阅专栏

Jquery Dom操作

V哥官网：http://www.vgxit.com

本博客对应视频教程：http://www.vgxit.com/course/19

1，内容相关操作

1，标签体内容：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>父子元素，兄弟元素</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            //获取html内容的案例
            function getHtml() {
                alert($("#mydiv").html());
            }
            //设置Html内容的案例
            function setHtml() {
                $("#mydiv").html("<p style='color: blue;'>哈哈哈</p>");
            }
        </script>
    </head>
    <body>
        <button onclick="getHtml();">获取Html内容</button>
        <button onclick="setHtml();">设置Html内容</button>
        <div id="mydiv">
            <p style="color: red;">我是一段Html内容</p>
        </div>
    </body>
</html>

2，标签体纯文本内容：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>纯文本内容的获取</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            //获取html内容的案例
            function getText() {
                alert($("#mydiv").text());
            }
            //设置Html内容的案例
            function setText() {
                $("#mydiv").text("哈哈哈");
            }
        </script>
    </head>
    <body>
        <button onclick="getText();">获取Html内容</button>
        <button onclick="setText();">设置Html内容</button>
        <div id="mydiv">
            <p style="color: red;">我是一段Html内容</p>
        </div>
    </body>
</html>

3，元素value属性值：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>纯文本内容的获取</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            //获取html内容的案例
            function getValue() {
                alert($("#myInput").val());
            }
            //设置Html内容的案例
            function setValue() {
                $("#myInput").val("设置的值");
            }
        </script>
    </head>
    <body>
        <button onclick="getValue();">获取Input表单的Value值</button>
        <button onclick="setValue();">设置Input表单的Value值</button>
        <input id="myInput" value="test"/>
    </body>
</html>

2，属性操作

1，通用属性操作：

jquery提供了四个方法来实现通用属性操作：

1，attr()：设置或者获取元素的属性

2，removeAttr()：删除属性

3，prop()：设置或者获取元素的属性值

4，removeProp()：删除属性

注意：我们在操作属性的时候，如果我们操作的属性是固有的，就用prop的方法。如果操作的元素是自定义的属性，那么我们就用attr的方式。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>通用属性</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                alert($("#inputUsername").prop("name"));
                $("#inputUsername").prop("name", "myusername");
                $("#inputUsername").removeProp("name");
            });
        </script>
    </head>
    <body>
        <input type="text" name="username" value="vge" id="inputUsername"/>
    </body>
</html>

2，class属性操作：

因为class在我们开发前端页面的时候，非常的常用，所以，jquery提供了如下三个方法来让我们专门操作class:

1，addClass()：添加class属性值

2，removeClass()：删除class属性值

3，toggleClass()：切换class属性，这个的意思就是如果一个class有就删除，没有就添加。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>class属性的操作</title>
        <style>
            .myclass {
                width: 200px;
                height: 200px;
                background: pink;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            function addClass() {
                $("div").addClass("myclass");
            }
            function removeClass() {
                $("div").removeClass("myclass");
            }
            function toggleClass() {
                $("div").toggleClass("myclass");
            }
        </script>
    </head>
    <body>
        <button onclick="addClass();">添加class</button>
        <button onclick="removeClass();">删除class</button>
        <button onclick="toggleClass();">切换class</button>
        <div>这是一个div</div>
    </body>
</html>

3，增删改查操作

1，append()：父元素将子元素追加到末尾。

比如对象1.append(对象2)：将对象2添加到元素1的内部，并且在末尾。

2，prepend(): 父元素将子元素追加到开头

比如对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头

3，appendTo(): 把自己添加都某个元素结尾

比如对象1.appendTo(对象2)：将对象1添加到对象2元素内部，并且在末尾。

4，prependTo(): 把自己添加都某个元素开头

比如对象1.prependTo(对象2)：将对象2添加到对象1元素内部，并且在开头。

5，after(): 添加元素到对应元素的后边

比如对象1.after(对象2)：将对象2添加到对象1后边，对象1和对象2是兄弟关系

6，before()：添加元素到对应元素的前面

比如对象1.before(对象2)：将对象2添加到对象1前边，对象1和对象2是兄弟关系

7，insertAfter()：添加元素到对应元素的后面

比如对象1.insertAfter(对象2)：将对象1添加到对象2的后边，对象1和对象2是兄弟关系

所以，对象1.insertAfter(对象2) 和对象2.before(对象1) 是等价的。

8，insertBefore()：添加元素到对应元素的前面

比如对象1.insertBefore(对象2)：将对象1添加到对象2的后边，对象1和对象2是兄弟关系

所以，对象1.insertBefore(对象2) 和对象2.after(对象1) 是等价的。

9，remove()：移除对象

比如对象.remove()：将对象删除掉

10，empty()：清空元素的所有后代元素

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>class属性的操作</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            function append() {
                var p = $("<p>333333333333</p>");
                $("#mydiv").append(p);
            }
            function prepend() {
                var p = $("<p>000000000000</p>");
                $("#mydiv").prepend(p);
            }
            function appendTo() {
                var p = $("<p>444444444444</p>");
                p.appendTo($("#mydiv"));
            }
            function prependTo() {
                var p = $("<p>-1-1-1-1-1-1</p>");
                p.prependTo($("#mydiv"));
            }
            function after() {
                var p = $("<p>aaaaaaaaaaaa</p>");
                $("#p1").after(p);
            }
            function remove() {
                $("#p1").remove();
            }
            function empty() {
                $("#mydiv").empty();
            }
        </script>
    </head>
    <body>
        <button onclick="append();">append按钮</button>
        <button onclick="prepend();">prepend按钮</button>
        <button onclick="appendTo();">appendTo按钮</button>
        <button onclick="prependTo();">prependTo按钮</button>
        <button onclick="after();">after按钮</button>
        <button onclick="remove();">remove按钮</button>
        <button onclick="empty();">empty按钮</button>
        <div id="mydiv">
            <p id="p1">111111111111</p>
            <p>222222222222</p>
        </div>
    </body>
</html>

V哥学It

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
006，Jquery的Dom操作

Jquery Dom操作V哥教育QQ群：673215016官网：http://www.vgxit.com1，内容相关操作1，标签体内容：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>父子元素，兄弟元素</title> <script type="text/jav
复制链接

扫一扫