【jQuery】jQuery的DOM操作

注意：jQuery是一个集合，所有很多时候返回值也是一个集合

1.DOM节点的创建

$("html代码") 例$("<div></div>")

2.DOM节点的插入

内部队尾插入：

$(olds).append(new);
$(new).appendTo(olds);

内部队首插入：

$(olds).prepend(new);
$(new).prependTo(olds);

外部插入:

$(olds).after(new)
$(olds).before(new)
$(new).insertBefore(olds)
$(new).inertAfter(olds)

注：new代表要插入的内容，olds代表被插入的对象们

3.DOM节点的删除

.empty() 删除dom节点中的所有内容及绑定事件，但保留此dom节点

remove() 删除自身及所有后代，包括绑定的事件
$("p").filter(":contains('3')").remove()

.detach() 临时删除页面上的节点，但会保留节点上的数据和事件，当append()相同节点时，事件还存在

4.DOM节点赋值和替换

节点拷贝clone：

$().clone([true]) 不写true仅仅克隆结构事件丢失，写true结构，事件和数据都会克隆

节点替换:

$(“olds”).replaceWith( new)，new可以是HTML字符串，DOM元素，或者jQuery对象
$(“new”).replaceAll( olds)

节点包裹wrap()，unwrap()，wrapAll()，wrapInner()

.wrap( wrappingElement ) 给单个dom元素包裹

$('p').wrap('<div></div>')  =>
<div>
    <p>p元素</p>
</div>

.wrap( function )

$('p').wrap(function() {
    return '<div></div>';   //与第一种类似，只是写法不一样
})

.unwrap() 去除包裹

$('p').unwrap();  =>
<p>p元素</p>

.wrapAll( wrappingElement ) 给集合整体包裹

$('p').wrapAll('<div></div>')
<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构

<div>p元素</div>
<div>p元素</div>  =>
$('div').wrapInner('<p></p>')   =>
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

.wrapInner( function ) :

$('div').wrapInner(function() {
    return '<p></p>'; 
})

5.jQuery遍历

$().children([selector]) 可以找出所有子元素，selector为选择器

$().find([selector]) 可以找出所有子孙元素，selector为选择器

$().parent([selector]) 找出父元素，selector为选择器

$().parents([selector]) 找出祖辈元素，selector为选择器
$().closest([selector]) 从元素本身开始查找，返回最先匹配的祖先元素
closest和parents()的区别：

1起始位置不同：.closest开始于当前元素 .parents开始于父元素
2遍历的目标不同：.closest要找到指定的目标，.parents遍历到文 档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
3结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

$().next() 找到紧跟在其后面符合选择器的第一个同辈元素
$().prev() 找到紧跟在其后面符合选择器的第一个同辈元素

$().siblings() 找到指定元素集合中每个元素的所有同辈元素

$().add()

例如：选择所有的li元素，之后把p元素也加入到li的合集中
<ul>
    <li>list item 1</li>
    <li>list item 3</li>
</ul>
<p>新的p元素</p>
第一种操作：
$('li').add('p')
第二种操作：
$('li').add(document.getElementsByTagName('p')[0])

$().each(function(index,element))遍历整个jquery集合
index是下标索引，element是对应的元素

$("li").each(function(index, element) {
     index 索引 0,1
     element是对应的li节点 li,li
     this 指向的是li
})