JQuery操作DOM

最新推荐文章于 2023-08-03 15:30:00 发布

落花新月

最新推荐文章于 2023-08-03 15:30:00 发布

阅读量398

点赞数

分类专栏： Web前端 HTML5 文章标签： JQuery DOM操作

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/51729420

版权

Web前端同时被 2 个专栏收录

68 篇文章 1 订阅

订阅专栏

HTML5

12 篇文章 0 订阅

订阅专栏

特别说明：慕课网学习整理

1. attr()控制元素属性

   <body>
        <h3>attr()方法设置元素属性</h3>
        <a href="http://127.0.0.1" id="a1">点我就变</a>
        <div>我改变后的地址是：<span id="tip"></span></div>

        <script type="text/javascript">
            $("#a1").attr("href" , "www.imooc.com");
            var $url = $("#a1").attr("href");
            $("#tip").html($url);
        </script>
    </body>

2.操作元素内容：
<body>
        <h3>html()和text()方法设置元素内容</h3>
        <div id="html"></div>
        <div id="text"></div>

        <script type="text/javascript">
            var $content = "<b>唉，我又变胖了！</b>";
            $("#html").html($content)
            $("#text").text($content);
        </script>
    </body>
运行效果：

唉，我又变胖了！
   <b>唉，我又变胖了！</b>

   3.操作元素样式：

   <body>
        <h3>css()方法设置元素样式</h3>
        <div id="content">我穿了一件红色外衣</div>

        <script type="text/javascript">
            $("#content").css({"background":"red","color":"white"});
   //$("#content").addClass("bg_blue color_white");
        </script>
    </body>

4.使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能

<body>
        <h3>removeClass()方法移除元素样式</h3>
        <div id="content" class="blue white">我脱下了一件蓝色外衣</div>

        <script type="text/javascript">
            $("#content").removeClass("blue white");
        </script>
    </body>

5.appendTo()方法也可以向指定的元素内插入内容

<body>
        <h3>appendTo()方法插入内容</h3>
        <div>
            <span class="green">小乌龟</span>
        </div>

        <script type="text/javascript">
            var $html = "<span class='red'>小青蛙</span>"
            $($html).appendTo("div");
        </script>
    </body>

6.使用before()和after()在元素前后添加内容：
<body>
        <h3>after()方法在元素之后插入内容</h3>
        <span class="green">我们交个朋友吧！</span>

        <script type="text/javascript">
            var $html = "<span class='red'>兄弟。</span>"
            $(".green").after($html);
        </script>
    </body>

7.clone复制元素及其样式：

<body>
        <h3>使用clone()方法复制元素</h3>
        <span class="red" title="hi">我是美猴王</span>

        <script type="text/javascript">
            $("body").append($(".red").clone());
        </script>
    </body>

   8.replaceWith()和replaceAll()
   9.wrap()和wrapInner()方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容
   <body>
        <h3>使用wrapInner()方法包裹元素</h3>
        <span class="red" title='hi'>我的身体有点歪</span>

        <script type="text/javascript">
            $(".red").wrapInner("<i><i>");
        </script>
    </body>

10.使用each()方法遍历元素

使用each()方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，它的调用格式为：
$(selector).each(function(index))

参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始。

<body>
        <h3>使用each()方法遍历元素</h3>
        <span class="green">香蕉</span>
        <span class="green">桃子</span>
        <span class="green">葡萄</span>
        <span class="green">荔枝</span>

        <script type="text/javascript">
            $("span").each(function (index) {
                if (index == 1) {
                    $(this).attr("class", "red");
                }
            });
        </script>
    </body>

11.使用remove()和empty()方法删除元素
    remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素。

<body>
        <h3>使用empty()方法删除元素</h3>
        <span class="green">香蕉</span>
        <span class="green">桃子</span>
        <span class="green">葡萄</span>
        <span class="green">荔枝</span>

        <script type="text/javascript">
            $("span").empty();
        </script>
    </body>

落花新月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery操作DOM

特别说明：慕课网学习整理 1. attr()控制元素属性 attr()方法设置元素属性点我就变我改变后的地址是： $("#a1").attr("href" , "www.imooc.com"); var $url = $(
复制链接

扫一扫

专栏目录