JQuery基础(二) — Dom操作

1、DOM内部插入append()与appendTo()

//单击button后在页面的div中插入一段文本
$('button').on('click',function(){
	$('div').append('<p class="text">我是插入的文本</p>')
})

2、DOM外部插入after()与before()

这里不放代码，用法同上

3、DOM内部插入prepend()与prependTo()

用法相同，跟append一样

4、DOM外部插入insertAfter()与insertBefore()

insertAfter() 与 After() 的不同是插入的内容一个放在前面一个放在后面

    $("#bt1").on('click', function() {
        //在test1元素前后插入集合中每个匹配的元素
        //不支持多参数！
        $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))

5、DOM节点删除之empty()

作用就是清空指定节点元素中的所有内容

<div class="hello"><p>慕课网</p></div>

//通过empty处理
$('.hello').empty()

//结果：<p>慕课网</p>被移除
<div class="hello"></div>

6、DOM节点删除之remove()

remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

remove()中可以带参数，指定要移除的子元素。

7、DOM节点删除之保留数据的删除操作detach()

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
$(“div”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

当然这里要特别注意，detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据。

8、DOM拷贝clone()

clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了

HTML部分
<div></div>

JavaScript部分
$("div").on('click', function() {//执行操作})

//clone处理一
$("div").clone()   //只克隆了结构，事件丢失

//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

9、DOM替换replaceWith()和replaceAll()

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

.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序

10、DOM包裹wrap()方法

如果要将元素用其他元素包裹起来，也就是给它增加一个父元素，针对这样的处理，JQuery提供了一个wrap方法

.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构

   $(".aaron1").on('click', function() {
        //给所有p元素，增加父容器div
        $('p').wrap('<div></div>')
    })
    </s

11、DOM包裹unwrap()方法

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

    $(".aaron1").on('click', function() {
        //找到所有p元素，删除父容器div
        $('p').unwrap('<div></div>')
    })

12、DOM包裹wrapAll()方法

与wrap()方法不同，wrapAll()方法是将需要包裹的所有元素都移到第一个需要被包裹元素之后，将这些元素都包裹在指定的标签下。用法相同。

13、DOM包裹wrapInner()方法

与上面两种包裹方法的不同点是，wraplnner()方法：

<div>
	<a></a>
<div>
$('div').wraplnner('<p></p>')

这里是用p元素将div下的所有元素包裹起来，结果：

<div>
	<p>
		<a></a>
	</p>
<div>

14、Jquery的遍历方法

1、children()
返回指定节点的子元素(不是子孙元素)
*children()没有参数

2、parent()
与children()相反，返回指定节点的子父元素
*parent()没有参数

3、find()

• find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
• 与其他的树遍历方法不同，选择器表达式对于.find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 ‘*’。
• find只在后代中遍历，不包括自己。
• 选择器 context 是由 .find() 方法实现的；因此，$(’.item-ii’).find(‘li’) 等价于 $(‘li’,’.item-ii’)(找到类名为item-ii的标签下的li标签)。

4、parents()
和parent()差不多，只是返回的是一个祖先集合，没有参数，但是括号中可以写一些对找到的父元素的限制，比如可以只找div父元素。

5、closest()
从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素
粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了

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

6、next()

jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法
next()方法选择性地接受同一类型选择器表达式

7、prev()

与next相反，向上找一个兄弟元素

**8、siblings() **
如果想快速查找指定元素集合中每一个元素的同辈元素，此时可以用siblings()方法

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

上面代码中 $(’.item-2’).siblings()返回的是他上下这两个同级元素

9、add()

添加内容

    $("button").click(function() {
         //把p元素添加到li的合集中
         $('li').add('p').css('background', 'red')
    })
    </script>
    <script type="text/javascript">
    $("button").click(function() {
         //把html结构'<p>新的p元素</p>'
         //加入到li的合集中，为了能够在页面上显示
         //需要再重新appendTo到指定的节点处
         //值得注意：整个结构位置都改变了
         $('li').add('<p>新的p元素</p>').appendTo($('.right'))
    })

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

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


	$("button:last").click(function() {
        //遍历所有的li
        //修改偶数li内的字体颜色
        $("li").each(function(index, element) {
            if (index % 2) {
                $(this).css('color','blue')
            }
        })
    })