jQuery DOM常用操作方法介绍

jQuery DOM常用操作方法介绍

JQuery中的DOM操作主要对包括：建(新建)、增(添加)、删(删除)、改(修改)、查(查找)(像数据库操作)。下面的DOM操作将围绕上面的DOM树进行学习JQueryDOM操作。

1. append()和appendTo()

• 父元素.append(子元素)
• 子元素.appendTo(父元素)

  var cl = console.log.bind(console);
  // 1. 元素的插入与替换, 父元素.append(子元素)
  $("body").append("<ol>");
  // 子元素.appendTo(父元素)
  $("<li>").text("笔记本电脑").appendTo("ol");
  $("<li>").addClass("active").text("智能手机").appendTo("ol");
  $("<li>", {
    id: "hello",
    style: "background-color:yellow",
  })
    .html("<a href=''>格子衫</a>")
    .appendTo("ol");
  // append(callback)
  $("ol").append(function () {
    var res = "";
    for (var i = 0; i < 5; i++) {
      res += "<li><a href=''>最新商品" + (i + 1) + "</a></li>";
    }
    return res;
  });

2. prepend()和prependTo()

prepend()方法将每匹配的元素内部前置要添加的元素，prependTo()方法将元素添加到每一个匹配的元素内部前置

 $("<li>新元素2</li>").insertAfter("ol > li:nth-of-type(4)");
  // prepend(), prependTo(), 将新元素插入到头部
  $("<li>最新留言</li>").prependTo("ol");

3. after()和before()

after()方法向匹配的元素后面添加元素，新添加的元素做为目标元素后的紧邻的兄弟元素。　before()方法在每一个匹配的元素之前插入，做为匹配元素的前一个兄弟节点。

//方法将查找节点p，然后把新建的元素添加到span节点后面做为p的兄弟节点。
$("p").after("<span>新加段新加段新加段新加段新加段</span>");
 // 从第3个元素前面添加<li>, before(), 在某个元素之前添加
  $("ol > li:nth-of-type(3)").before("<li>新元素</li>");

4. insertAfter()和insertBefore()

insertAfter()方法将新建的元素插入到查找到的目标元素后，做为目标元素的兄弟节点。insertBefore()方法将新建元素添加到目标元素前，做为目标元素的前一个兄弟节点。

// insertAfter()
  $("<li>新元素2</li>").insertAfter("ol > li:nth-of-type(4)");
  $("<a href='#'>锚</a>").insertBefore("ul");
// insertBefore()新建a元素，将新建的a元素添加到元素ul前，做为ul的前一个兄弟节点。

5. replaceWith()和replaceAll()

替换节点$(element).repalcewith()、$(element).repalceAll(),替换节点方法能够替换某个节点，有两种形式形式实现：replaceWith()和replaceAll().
使用replaceWith方法使用后面的元素替换前面的元素，replaceAll方法使用前面的元素替换后面的元素。

 // 元素的换: replaceWith()
  $("ol > li:last-of-type").replaceWith("<h3>Hello PHP.CN</h3>");
  $("<p>Hello World...</p>").replaceAll("ol > li:first-of-type");

6. 总结

jQuery就类似laravel框架和TP框架，jQuery作为JavaScript常用的函数库，封装了许多方法，用起来确实很巧妙，精简了很多操作步骤。这也难怪市面上的jQuery项目占了70%，毕竟上手了就很难回头去学习原生的了。