jQuery文档操作

最新推荐文章于 2023-01-09 11:20:33 发布

我可能是个假开发

最新推荐文章于 2023-01-09 11:20:33 发布

阅读量660

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/CSDN_GIA/article/details/70307824

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

jQuery文档操作

插入操作

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>文档处理_插入操作</title>
        <script src="../../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /**
             * 需求 
             *  在id=edu下增加<option value="大专">大专</option> 
             */

            /**
             * 方法分析：
             *  内部插入
             *      1.append(content):内部结尾处，将B追加到A里面去
             *      2.appendTo(content):内部结尾处，将A追加到B里面去
             *      3.prepend(content):内部开始处，将B追加到A里面去
             *      4.prependTo(content):内部开始处，将B追加到A里面去
             *  外部插入
             *      1.after(content):外部，将B追加到A后面
             *      2.before(content):外部，将A追加到B前面
             *      3.insertAfter(content):外部，将A追加到B后面
             *      4.insertBefore(content)::外部，将A追加到B前面
             */

            $(function() {
                // 追加 option 内容大专
                // 创建元素
                var $newNode = $("<option value='大专'>大专</option>");

                //内部插入
                //$("#edu").append($newNode);   // 内部结尾，将B追加到A里面去
                //$("#edu").prepend($newNode);  // 内部开始，将B追加到A里面去

                //外部插入
                //$("option[value='本科']").after($newNode);
                $newNode.insertBefore($("option:contains('硕士')"));
            });
        </script>

    </head>

    <body>
        <select id="edu">
            <option value="博士">博士</option>
            <option value="硕士">硕士</option>
            <option value="本科">本科</option>
            <option value="高中">高中</option>
        </select>

    </body>

</html>

复制操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文档处理_复制操作</title>
        <script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
        <script>
            /**
             * 需求
             *  1.单击苹果、橘子或者菠萝列表项，复制点击的内容并追加到ul的末尾
             *  2.单击苹果、橘子或者菠萝列表项，复制点击的内容并追加到ul的末尾，要求复制后的内容也具有复制的能力
             */

            /**
             * 方法分析：
             *  1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。
             *  2.clone()：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
             */

             $(function(){
                //点击li列表项，将当选点击的li内容追加到ul末尾
                $("ul li").click(function(){
                    //$(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素
                    $(this).clone(true).appendTo("ul");//设置参数true后，复制后的内容也具备单击事件
                })   
              });
        </script>
    </head>
    <body>
        <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
        <ul>
          <li title='苹果'>苹果</li>
          <li title='橘子'>橘子</li>
          <li title='菠萝'>菠萝</li>
        </ul>
    </body>
</html>

替换操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文档处理_替换操作</title>
        <script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
        <script>
            $(function(){
                //将B的内容替换掉A处的内容
                $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); 
                // 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); 
            });
        </script>
    </head>
    <body>
        <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
        <ul>
          <li title='苹果'>苹果</li>
          <li title='橘子'>橘子</li>
          <li title='菠萝'>菠萝</li>
        </ul>
    </body>
</html>

删除操作

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>文档处理_删除操作</title>
        <script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            /**
             * 需求
             *  分别使用detach和remove 删除带有click事件的p标签，删除后再将p 重新加入body 查看事件是否存在
             */

            /**
             * 方法分析
             *  1.remove()：删除节点后，事件也会删除
             *  2.detach()：删除节点后，事件会保留 从1.4新API 
             *  3.empty():清空元素中的所有后代节点。(这个案例是要删除而不是清空，需要注意)
             */

            /**
             * 代码实现 
             */
            $(function() {
                $("p").click(function() {
                    alert($(this).text());
                });
                // 使用remove方法删除 p元素，连同事件一起删除
                //var $p = $("p").remove();
                // 使用detach删除，事件会保留
                var $p = $("p").detach();

                $("div").append($p);
            });
        </script>

    </head>

    <body>
        <p>AAA</p>

        <div>BBB</div>
    </body>

</html>

删除相关操作的区别

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>删除相关操作的区别</title>
        <script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
        <script>
            $(function(){
                //清空第二个li元素节点的所有后代节点(此处是文本节点橘子)，通过firebug查看html源码验证
                //$("ul li:eq(1)").empty();

                //删除第一个li元素节点
                $("ul li:eq(0)").remove();
            });
        </script>
    </head>
    <body>
        <p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
        <ul>
            <li title='苹果'>苹果</li>
            <li title='橘子'>橘子</li>
            <li title='菠萝'>菠萝</li>
        </ul>
    </body>
</html>

我可能是个假开发

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery文档操作

jQuery文档操作插入操作<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>文档处理_插入操作</title> <script src="../../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"
复制链接

扫一扫