您的位置：首页 > Web前端 > JQuery

JQuery操作DOM

2016-06-21 18:38 429 查看

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

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JQuery DOM操作

相关文章推荐

新的分享

章节导航