四、DOM操作：
1、jQuery创建节点：
var div = $("<div>我是文本节点</div>") $body.append(div)
这段代码就会在html的body中添加一个div节点，并且内容是“我是文本节点”。
2、内部插入的append()和appendTo：
这两个方法都是向页面追加内容，不同的是append()前面是被插入的对象，后面是要在对象内插入的元素内容，而appendTo()前面是要插入的元素内容，而后面是被插入的对象。具体用法如下：
<div class="content"></div> <script type="text/javascript"> //.append(), 内容在方法的后面， //参数是将要插入的内容。 $(".content").append('<div class="append">通过append方法添加的元素</div>') //.appendTo()刚好相反，内容在方法前面， //无论是一个选择器表达式 或创建作为标记上的标记 //它都将被插入到目标容器的末尾。 $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content")) </script>
3、外部插入的after()和before()：
上面的append和appendTo是插入到匹配元素的内部，而这两个是插入到匹配元素的外部。看下面代码：
<div class="aaron"> <p class="test1">测试before</p> </div> <div class="aaron"> <p class="test2">测试after</p> </div> <script type="text/javascript"> //在匹配test1元素集合中的每个元素前面插入p元素 $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>') //在匹配test1元素集合中的每个元素后面插入p元素 $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>') </script>
看运行结果：
通过上面的代码和运行结果就很容易理解什么是外部插入了。类似的还有prepend()、prependTo()、insertBefore()、insertAfter()方法。
4、empty()和remove()：
通过下面的代码理解empty()用法：
<div class="hello"> <p>百度</p> </div> //通过empty处理 $('.hello').empty() //结果：<p>百度</p>被移除 <div class="hello"></div>
可以发现empty会清空选中的元素的内部结构。
通过下面的代码理解remove()用法：
<div class="hello"> <p>百度</p> </div> //通过remove处理 $('.hello').remove()
结果是整个div都被移除了，且如果这个div绑定有事件，使用remove方法会自动销毁这个事件。remove还可以根据条件移除，如下：
div class="test2"> <p>p元素3</p> <p>p元素4</p> </div> //找到所有p元素中，包含了3的元素 $("p").remove(":contains('3')")
这样就只会移除“p元素3”，“p元素4”不会被移除。detach()也是移除元素，但是这个删除只是页面中不可见，这个节点还是保存在内存中。
5、克隆节点clone()：
克隆可以理解为复制，用法如下：
//clone处理一 $("div").clone() //只克隆了div结构，事件丢失 //clone处理二 $("div").clone(true) //div结构、div绑定的事件与数据都克隆
6、替换节点之replaceWith()和replaceAll():
这两个方法作用类似，主要是语法不一样。看下面的例子：
<div> <p>第一段</p> <p>第二段</p> <p>第三段</p> </div> <script> //replaceWith操作： $("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>') //replaceAll操作： $('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)') </script>
结果就是“第二段”被替换成了“替换第二段的内容”，并且文字为红色。
7、wrap()、unwrap()、wrapAll()和wrapInner()方法：
如果要将元素用其他元素包裹起来，也就是给它增加一个父元素，针对这样的处理，JQuery提供了一个wrap方法。看案例：
<p>哈哈</p> <script> // 给p增加一个div $('p').wrap('<div></div>') //或者这样写 $('p').wrap(function() { return '<div></div>'; //与第一种类似，只是写法不一样 }) </script>
结果就是给p增加了一个div包裹，如下：
<div> <p>哈哈</p> </div>
unwrap()方法就是删除一个元素的父元素，作用与wrap()刚好相反。wrap()方法只能包裹一个元素，比如说如果有多个p元素，需要用div来包裹，那么就得用wrapAll()方法。看下面代码：
<p>哈哈</p> <p>嘻嘻</p> <script> //给所有p元素增加一个div包裹 //方式一 $('p').wrapAll('<div></div>') //方式二 $('p').wrapAll(function() { return '<div><div/>'; }) </script>
不过这两种方式处理的结果有差别，结果如下：
<!-- 方式一处理结果--> <div> <p>哈哈</p> <p>嘻嘻</p> </div> <!-- 方式二处理结果--> <div> <p>哈哈</p> </div> <div> <p>嘻嘻</p> </div>
wrapInner()方法的作用说起来就感觉很绕，直接看代码感受一下：
<div>哈哈</div> <div>嘻嘻</div> <script> //给所有元素增加一个p包裹 //方式一： $('div').wrapInner('<p></p>') //方式二： $('div').wrapInner(function() { return '<p></p>'; }) </script>
两种方法处理结果相同，结果就是：
<div> <p>哈哈</p> </div> <div> <p>嘻嘻</p> </div>
五、jQuery的遍历：
jQuery的遍历有很多种方式，下面来看一下都如何使用。
1、children()和find()方法：
快速查找合集里面的第一级子元素，此时可以用children()方法。比如：
<div class="div"> <ul class="son"> <li class="grandson">1</li> </ul> </div> <script> //找到所有class=div的元素 //找到其对应的子元素ul，然后筛选出最后一个，给边宽加上颜色 $('.div').children(':last').css('border', '3px solid blue') </script>
注意， $('.div').children()只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。如果想连li也找到，那就得用find()方法:
$("div").find("li")
2、parent()和parents()方法：
parent方法，和children方法相反，就是查找上一级元素，这里就不再举例说明。
parents方法和parent方法的不同之处在于parent只查找父级一级的元素，而parents则会一直往上查找。
3、closest()方法：
以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法。区别有以下3点：
- 起始位置不同：.closest开始于当前元素 .parents开始于父元素
- 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
- 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象
4、next()、prev()和siblings()方法：
用于快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合。
<div class="div"> <ul class="level-1"> <li class="item-1">哈哈</li> <li class="item-2">嘿嘿</li> <li class="item-3">嘻嘻</li> </ul> </div> <div class="div"> <ul class="level-1"> <li class="item-1">哈哈</li> <li class="item-2">嘿嘿</li> <li class="item-3">嘻嘻</li> </ul> </div> <script> $('.item-1').next().css('border', '1px solid red'); </script>
运行js后，那么这两个class="item-2"的元素就会被选中，然后这两个“嘿嘿”都会添上红色边框。prev方法和next()相反，next是找下一个，prev是找前一个。$('.item-1').next()是item-2，$('.item-2').prev()就是item-1。siblings方法就不管前后，反正就是找同辈的元素，$('.item-2').siblings()就是item-2的同辈元素，那么item-1和item-3都会被选到。
5、add()方法：
<ul> <li>list item 1</li> <li>list item 3</li> </ul> <p>新的p元素</p> <script> $('li').add('p'); </script>
p元素和ul元素本来是同一级别的，如果$('li').add('p')运行后，那么就会把p与li归结到一组。这就是add的作用。还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了，语法如下：
$('li').add('<p>新的p元素</p>').appendTo(目标位置)
6、each()方法：
each是一个for循环的包装迭代器，each通过回调的方式处理，并且会有2个固定的实参，索引与元素each回调方法中的this指向当前迭代的dom元素。看案例：
<ul> <li>哈哈</li> <li>嘻嘻</li> </ul> <script> $("li").each(function(index, element) { //index 索引 0,1 //element是对应的li节点 li,li //this 指向的是li $(this).css('color','red'); }) </script>
这样就会把“哈哈”和“嘻嘻”的颜色设置为红色。
总结：
以上便是《jQuery入门》的全部内容，包含了jQuery选择器、属性与样式和对DOM的操作等相关内容。接下来在《jQuery进阶》中讲学习jQuery事件和Ajax，敬请关注！
