jQueryDom操作

Posted 2020-10-17 niusan

1,动态创建元素节点  var div = $(‘<div class="right">动态创建文本节点</div>‘)
2,内部插入元素
append(content)  向每个匹配的元素内部追加内容(前面是被插入的对象，后面是要在对象内部插入的元素)
appendTo(content) 把所有匹配的元素追加到另一个，指定元素的元素中（前面是要插入的元素，后面是被插入元素的内容）

3，prepend 向每个匹配的元素内部前置内容
  prependTo 把所有匹配元素前置到另一个指定的元素集合中
4,.after() 在匹配元素中的每个元素后面插入参数所指定的内容，作为其兄弟节点（如果后面有元素将后面的元素后移）
  .before() 据参数设定，在匹配元素的前面插入内容（如果前面有元素，移除）
5，insertBefore    向目标元素前面插入集合中每个匹配的元素
   insertAfter     在目标元素后面插入集合中每个匹配的元素
6. empty()        节点删除（清空内部的html代码,但是标记仍在DOM中）（清空节点）
7，remove   是将自身移除，同时移除内部，包括事件
8，detach   删除节点保留数据
9，clone()  复制匹配元素，包括子节点，文字节点
   clone(true) 还包括事件和数据
10，A.replaceWith(B)  A被 B替换
   A.replaceAll(B)   A集合中的元素都被B替换
11，wrap() 给元素增加一个父元素。参数可以使字符串，函数，对象
   wrapAll() 给集合中的元素增加一个父元素。
12，unwrap() 删除父元素
13，wrapInner() 给集合中匹配的元素的内部，增加包裹的hTML结构
   <div>p元素</div><div>p元素</div> ==> $(‘div‘).wrapInner(‘<p></p>‘)
   <div><p>p元素</p></div><div><p>p元素</p></div>
14,children()  遍历子元素 可接受参数选择器
15，find()     遍历后代元素
16，parent()   寻找父元素
17，parents()  搜索这些元素的祖辈元素
18，closest()  往上查找，查找当前元素的父辈元素，找到就停。
   例：在div中往上查找li元素 $(‘div‘).closet(‘li‘);
19,next() 元素紧邻的后面同辈元素的集合
   无参数  直接兄弟元素
   参数，表达式    同一类
20，prev()  紧邻的前面的同级元素
21，siblings() 快速查找每一个同级元素
22，each()  循环迭代器
   $(‘li‘).each(function(index,element) {
      index 索引  
      element 是对应的li节点
      this 指向的是当前迭代的dom元素
   })