jQuery

[TOC]

节点创建

jQuery中，创建节点可以使用$()函数
$("<div></div>")

创建文本节点可以将文本直接添加进描述中
$("<div>文本内容</div>")

在创建节点时，可以同时为节点添加相应的属性
$("<div id="test" class="class1">文本节点</div>")

动态创建的节点只保存在内存中

append与appendTo

如果需要将节点动态的创建并保存在文档中，可以使用这两个方法，就节点放到某个元素的内部

选择器	描述
append(content)	向每个匹配的元素内部追加内容
appendTo(content)	把匹配的元素追加到另一个指定的元素当中

append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。

appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

节点插入

外部插入after和before

选择器	描述
.after(content)	向每个匹配的元素后面追加内容，作为其兄弟节点
.before(content)	向每个匹配的元素前面追加内容，作为其兄弟节点

两个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面

两个方法都支持多个参数传递after(div1,div2,….)

内部插入prepend和prependTo

选择器	描述
prepend	向每个匹配的元素内部前置内容
prependTo	把匹配的元素前置到另一个指定的元素当中

.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append())

外部插入insertAfter和insertBefore

选择器	描述
insertBefore	在目标元素前面插入集合中每个匹配的元素
insertAfter	在目标元素后面插入集合中每个匹配的元素

.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。

对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面
.after()和.insertAfter() 实现同样的功能。

主要的不同是语法——特别是（插入）内容和目标的位置。对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面

before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理

节点删除

empty

移除指定元素中的所有子节点，元素本身不会被清除
<div class="hello"><p>内容</p></div>

$(".hello").empty()

结果为
<div class="hello"></div>

remove

remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据
删除节点的同时将绑定的事件也删除，可以防止内存泄漏

remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点
我们可以通过$()选择一组相同的元素，然后通过remove（）传递筛选的规则

过滤器处理
$("p").filter(":contains('3')").remove()

删除所有包含了数字3的p元素

detach 保留数据删除

让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象

$(“div”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了

detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据

节点复制和替换

clone

.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点
clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了

clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css(‘color’,’red’) 增加了一个颜色
通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上
clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据
元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个

replaceWith和replaceAll

.replaceWith(newContent)：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

.replaceAll( target ) ：用集合的匹配元素替换每个目标元素

简单来说：用$()选择节点A，调用replaceWith方法，传入一个新的内容B（HTML字符串，DOM元素，或者jQuery对象）用来替换选中的节点A

<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>

替换第二段

1	$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')

replaceAll

1	$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')

wrap

.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构
也就是在匹配的元素上添加一个父元素

.wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象
使用后的效果与直接传递参数是一样，只不过可以把代码写带函数体内部，写法不同而已

1
2
3

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

unwrap

作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置

warpAll

将集合中的元素用其他元素包裹起来
.wrapAll( wrappingElement)：给集合中匹配的元素增加一个外面包裹HTML结构

1 2	<p>p元素</p> <p>p元素</p>

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

<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象
通过回调的方式可以单独处理每一个元素

1
2
3

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

等同于对每个元素进行wrap操作

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

wrapinner

将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素
.wrapInner( wrappingElement)：给集合中匹配的元素的内部，增加包裹的HTML结构

1 2	<p>p元素</p> <p>p元素</p>

$('p').wrapInner('<div></div>')

<p>
    <div>p元素</div>
</p>
<p>
    <div>p元素</div>
</p>

.wrapInner( function)：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容

1
2
3

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

等同于第一种写法

节点遍历

children

jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

代码如果是$("div").find()，那么意味着只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。

无参数

允许我们通过在DOM树中对这些元素的直接子元素进行搜索，并且构造一个新的匹配元素的jQuery对象
注意：jQuery是一个合集对象，所以通过children是匹配合集中每一给元素的第一级子元素

.children()方法选择性地接受同一类型选择器表达式
$("div").children(".selected")

find

jQuery是一个合集对象，如果想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）

find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 ‘*‘.

find只在后代中遍历，不包括自己。

选择器 context 是由.find()方法实现的；因此，$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')。

parent

jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用parent()方法
此方法只能向上查找一级

parent()无参数

parent()方法选择性地接受同一型选择器表达式
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

parents

jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用parents()方法

其实也类似find与children的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点

无参数

parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象

返回的元素秩序是从离他们最近的父级元素开始的

parents()方法选择性地接受同一型选择器表达式

1 .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找
2 $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。

closest

以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法

closest()方法接受一个匹配元素的选择器字符串

从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素
$("div").closet("li')
closest()方法给定的jQuery集合或元素来过滤元素
与parents的不同：

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

next()无参数

允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素，并根据匹配的元素创建一个新的 jQuery 对象

next()方法选择性地接受同一类型选择器表达式

快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合

siblings

快速查找指定元集合中每一个元素紧邻的前面后面同辈元素
如下class=”item-2”的li元素，class=”item-1”和class=”item-3”的节点就是它的siblings兄弟节点

<ul class="level-3">
    <li class="item-1">1</li>
    <li class="item-2">2</li>
    <li class="item-3">3</li>
</ul>

add

jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？jQuery为此提供add方法，用来创建一个新的jQuery对象，元素添加到匹配的元素集合中

例

选择所有的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])
$('li').add('<p>新的p元素</p>').appendTo(目标位置)

each

.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数

each是一个for循环的包装迭代器

each通过回调的方式处理，并且会有2个固定的实参，索引与元素

each回调方法中的this指向当前迭代的dom元素

例

<ul>
    <li>慕课网</li>
    <li>Aaron</li>
</ul>

开始迭代li，循环2次

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

这样可以在循环体会做一些逻辑操作了，如果需要提前退出，可以以通过返回 false以便在回调函数内中止循环

jQuery简易使用方法

jQuery

节点创建

节点创建

append与appendTo

节点插入

外部插入after和before

内部插入prepend和prependTo

外部插入insertAfter和insertBefore

节点删除

empty

remove

detach 保留数据删除

节点复制和替换

clone

replaceWith和replaceAll

wrap

unwrap

warpAll

wrapinner

节点遍历

children

find

parent

parents

closest

next

prev

siblings

add

each