jQuery学习笔记二（操作节点元素）

jQuery学习笔记二（操作节点元素）

1，创建节点元素

• 创建节点方式

1. html()方式（html()方式用于获取或设置内容，如果设置的内容中包含HTML元素，则会解析出来，因此可用这种方式创建节点）

$("div").html("<p>我是段落<span>我是span</span></p>")//在div中添加p元素。

2. $()方式
   $()能创建元素，但是只存在于内存中，若是想在HTML页面上显示，需要追加在页面上。

var $link = $("<a href="http://www.baidu.com/">百度</a>");

2，追加节点

• append()方法
  父元素.append(子元素)

  $("div").append($link);
  

  将参入的对象追加到div子元素的最后面

• prepend()方法

  $("div").prepend($link);
  

  将参入的对象追加到div的子元素的最前面

• appendTo()方法
  子元素.appendTo(父元素)

  $link.appendTo($("div"));
  

  作为最后一个节点添加，他和append()方法顺序相反，是主动关系。

• before()

  A.before(B);
  

  将B作为A的上一个兄弟节点插入dom树中

• after()

  A.after(B);
  

  将B作为A的下一个兄弟节点插入dom树中

3，克隆节点

• clone()方法。
  克隆之后的节点同样只存在于内存中，如果要在页面显示，需要追加到页面上。
  可以传入一个参数：true或者false，默认为false

  var $li = $("li:first").clone(false);  $("ul").append($li);//浅复制
  var $li = $("li:first").clone(true);  $("ul").append($li);//深复制
  

  如果为true为深复制，会把元素和元素的事件都克隆下来，否则为浅复制，只会克隆下来元素，不会克隆事件。

4，替换节点

replaceWith(): 替换所有匹配的元素为指定的元素
replaceAll()：用什么元素替换匹配的元素，主动和被动的区别。

5，移除节点

• html("");

  ul.html("");
  

  特点：只会清除内容，但是绑定的事件没有清除，可能造成内存泄漏。不推荐使用
• remove();

  $("#li3").remove();
  

  特点：清除元素和事件，把自己也移除。
• empty();

  $("#ul").clear();
  

  特点：清除元素和事件，但不包括自己。