JQuery中的DOM操作

1.查找节点

  使用JQuery选择器来完成

  1.1 查找元素节点

  $("ul li:eq(1)")

  1.2 查找属性节点

  var $para = $("p");

  var p_txt = $para.attr("title");

2.创建节点

  2.1 创建元素节点

  var $li_1 = $("<li></li>");

  $("ul").append($li_1);

  2.2 创建文本节点

  var $li_1 = $("<li>香蕉</li>");

  $("ul").append($li_1);

  2.3 创建属性节点

  var $li_1 = $("<li title='香蕉'>香蕉</li>");

  $("ul").append($li_1);

3. 插入节点

  插入节点的方法

  append() :向每个匹配元素内部追加内容

  appendTo() :将所有匹配的元素追加到指定元素中

  prepend() : 向每个匹配的元素内部前置内容 

  prependTo() : 将所有匹配的元素前置到指定的元素中

  after() : 在每个元素之后插入内容

  insertAfter() : after()相反

  before() : 在每个匹配元素之前插入内容

  insertBefore() : before()相反

4.删除节点

  4.1 remove方法

  $("ul li:eq(1)").remove();

  $("ul li").remove("li[title!=菠萝]");

  4.2 empty方法

  $("ul li:eq(1))").empty();

5. 复制节点

  $("ul li").click(function(){

    $(this).clone().appendTo("ul");

  })

  $(this).clone(true).appendTo("body"); 增加true,使复制的新元素具有原来的行为

  ¥(this).appendTo("body"); 移动节点

6.替换节点

  $("p").replaceWith("<strong>text</strong>");

  $("<strong>text</strong").replaceAll("p");

7.包裹节点

  $("strong").wrap("<b></b>");  将所有元素进行单独包裹

  $("strong").wrapAll("<b></b>"); 将所有匹配元素用一个元素来包裹

  $("strong").wrapInner("<b></b>"); 将每个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来

  

原文地址:https://www.cnblogs.com/shijiezhenmei/p/4343461.html