jQuery DOM操作

最新推荐文章于 2020-07-23 09:25:52 发布

痴心的萝卜

最新推荐文章于 2020-07-23 09:25:52 发布

阅读量159

点赞数

分类专栏： DOM和jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_36826618/article/details/104049766

版权

DOM和jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1. 创建元素

$("")

2. 内部插入

append()
appendTo()
prepend()
prependTo()

demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery DOM操作</title>
  <style>
    #box {
      width: 800px;
      padding: 20px;
      border: 2px dashed orange;
    }
    #box img {
      width: 200px;
    }
  </style>
</head>
<body>
  <h1>DOM 操作</h1>
  <hr>

  <div id="box">
    <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
    <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
    <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
    <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
  </div>
  <br>
  <h3>内部插入</h3>
  <button id="appendBtn">append</button>
  <button id="appendToBtn">appendTo</button>
  <button id="prependBtn">prepend</button>
  <button id="prependToBtn">prependTo</button>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      // appendTo 追加
      $("#appendBtn").click(function () {
        // // 创建一个新的元素
        // var $img = $("<img>")
        // console.log($img);
        // $img.prop("src", "http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg");
        //
        // $("#box").append($img);
        // 上下相等
        $("#box").append("<img src='#'>");
      });

      $("#appendToBtn").click(function () {
        $("<img src='#'>").appendTo("#box");
      });

      // 前插
      $("#prependBtn").click(function () {
        $("#box").prepend("<img src='#'>");
      });
      $("#prependToBtn").click(function () {
        $("<img src='#'>").prependTo("#box");
      });
    });
  </script>
</body>
</html>

3. 外部插入

after()
insertAfter()
before()
insertBefore()

demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery DOM操作</title>
  <style>
    #box {
      width: 800px;
      padding: 20px;
      border: 2px dashed orange;
    }
    img {
      width: 200px;
    }
  </style>
</head>
<body>
<h1>DOM 操作 -- 外部插入</h1>
<hr>
<div id="box">
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
</div>
<br>
<button id="afterBtn">after</button>
<button id="insertAfterBtn">insertAfter</button>
<button id="beforeBtn">before</button>
<button id="insertBeforeBtn">insertBefore</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    $("#afterBtn").click(function () {
      $("#box").after("<img src='#'>")
    });
    // after与insertAfter和append与appendTo的区别一样
    $("#insertAfterBtn").click(function () {
      $("<img src='#'>").insertAfter("#box");
    });
    $("#beforeBtn").click(function () {
      $("#box").before("<img src='#'>");
    });
    $("#insertBeforeBtn").click(function () {
      $("<img src='#'>").insertBefore("#box");
    });
  });
</script>
</body>
</html>

4. 包裹

wrap()
wrapAll()
wrapInner()
unwrap()

demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery DOM操作</title>
  <style>
    #box {
      width: 800px;
      padding: 20px;
      border: 2px dashed orange;
    }
    img {
      width: 200px;
    }
  </style>
</head>
<body>
<h1>DOM 操作 -- 包裹</h1>
<hr>
<div id="box">
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
</div>
<br>
<button id="wrapBtn">wrap</button>
<button id="wrapAllBtn">wrapAll</button>
<button id="wrapInnerBtn">wrapInner</button>
<button id="unWrapBtn">unWrap</button>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $("#wrapBtn").click(function () {
        // 每个img外套一个li标签
        $("#box img").wrap("<li>");
      });
      $("#wrapAllBtn").click(function () {
        // 所有img标签外套一个li标签
        $("#box img").wrapAll("<li>");
      });
      $("#wrapInnerBtn").click(function () {
        // 原先子元素的父元素
        $("#box").wrapInner("<li>");
      });
      $("#unWrapBtn").click(function () {
        // 去掉最外面一层
        $("#box img").unwrap();
      })
    });
  </script>
</body>
</html>

5. 替换

replaceWith()
replaceAll()

demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery DOM操作</title>
  <style>
    #box {
      width: 800px;
      padding: 20px;
      border: 2px dashed orange;
    }
    img {
      box-sizing: border-box;
      width: 200px;
    }
    img.active{
      border: 2px solid red;
    }
  </style>
</head>
<body>
<h1>DOM 操作 -- 替换</h1>
<hr>
<img id="newImg" src="https://cdn.duitang.com/uploads/item/201507/27/20150727084803_cLrJP.thumb.700_0.jpeg">
<div id="box">
  <div>点击替换</div>
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
</div>
<br>
<button id="replaceWithBtn">replaceWith</button>
<button id="replaceAllBtn">replaceAll</button>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    // 选中图片
    $("#box img").click(function () {
      $(this).toggleClass("active").siblings("img").removeClass("active");
    })

    $("#replaceWithBtn").click(function () {
      // $("img.active").replaceWith("<img src='https://cdn.duitang.com/uploads/item/201507/27/20150727084803_cLrJP.thumb.700_0.jpeg'>");
      // 将id为mewImg的图片覆盖选中的图片
      $("img.active").replaceWith($("#newImg"));
    });
    // replaceAll和replaceWith的区别和append与appendTo的区别一样
    $("#replaceAllBtn").click(function () {
      $("<img src='https://cdn.duitang.com/uploads/item/201507/27/20150727084803_cLrJP.thumb.700_0.jpeg'>").replaceAll("img.active");
    })
  });
</script>
</body>
</html>

6. 删除

empty()
remove()
detach()

remove和detach的区别，remove删了之后恢复时，原先绑定的事件没有了，而detach删了恢复后，事件还在。
demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery DOM操作</title>
  <style>
    #box {
      width: 800px;
      padding: 20px;
      border: 2px dashed orange;
    }
    img {
      box-sizing: border-box;
      width: 200px;
    }
    img.active{
      border: 2px solid red;
    }
  </style>
</head>
<body>
<h1>DOM 操作 -- 删除</h1>
<hr>
<img id="newImg" src="https://cdn.duitang.com/uploads/item/201507/27/20150727084803_cLrJP.thumb.700_0.jpeg">
<div id="box">
  <div>点击替换</div>
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
  <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
</div>
<br>
<button id="emptyBtn">empty</button>
<button id="removeBtn">remove</button>
<button id="detachBtn">detach</button>
<button id="backBtn">恢复到后面</button>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    var removeEle = null;

    // 选中图片
    $("#box img").click(function () {
      $(this).toggleClass("active").siblings("img").removeClass("active");
    });

    $("#emptyBtn").click(function () {
      // 清空里面所有内容
      $("#box").empty();
    });

    $("#removeBtn").click(function () {
      // 清空选中的内容
      removeEle = $("img.active").remove();
    });

    $("#detachBtn").click(function () {
      removeEle = $("img.active").detach();
    });

    $("#backBtn").click(function () {
      $("#box").append(removeEle);
    })
  });
</script>
</body>
</html>

7. 克隆

clone()

demo

<button id="cloneBtn">clone</button>
<script>
    $("#cloneBtn").click(function () {
      // 克隆出来的内容也没有事件绑定
      $("img.active").clone().appendTo("#box");
    });
</script>

痴心的萝卜

关注

0
点赞
踩
0

收藏

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

1. 创建元素$("")2. 内部插入append()appendTo()prepend()prependTo()demo<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery DOM操作</title&...
复制链接

扫一扫