• 初识jQuery

  <script type="text/javascript">
            $(document).ready(function() {
                    $("div").html("让我们一起学习jQuery");
            });
    </script>
注：$(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为我们在  
执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。

jQuery对象与DOM对象：
注：jQuery对象与DOM对象是不一样的
通过一个简单的例子，简单区分下jQuery对象与DOM对象：<p id=”imooc”></p>
我们要获取页面上这个id为imooc的p元素，然后给这个文本节点增加一段文字：

普通处理，通过标准JavaScript处理：
var p = document.getElementById('imooc');
p.innerHTML = '让我们一起学习jQuery';
p.style.color = 'red';
通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是一个DOM对象，再通过  
innerHTML与style属性处理文本与颜色。

jQuery的处理：
var $p = $('#imooc');
$p.html('让我们一起学习jQuery').css('color','red');
通过$('#imooc')方法会得到一个$p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装  
了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。
通过标准的JavaScript操作DOM与jQuyer操作DOM的对比，我们不难发现：
通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不  
需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。

jQuery对象转化成DOM对象：
 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理  
与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要  
jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。

利用数组下标的方式读取到jQuery中的DOM对象：
HTML代码
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
JavaScript代码
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
用jQuery找到所有的div元素（3个），因为jQuery对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，  
通过返回的div对象，调用它的style属性修改第一个div元素的颜色。这里需要注意的一点是，数组的索引是从0开始的，  
也就是第一个元素下标是0

通过jQuery自带的get()方法：
jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
注：其实get方法就是利用的第一种方式处理的，只是包装成一个get让开发者更直接方便的使用。

DOM对象转化成jQuery对象
相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，通过  
传递不同的参数而产生不同的作用。
如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象
通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了
HTML代码
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
JavaScript代码
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色
通过getElementsByTagName获取到所有div节点的元素，结果是一个dom合集对象，不过这个对象是一个  
数组合集(3个div元素)。通过$(div)方法转化成jQuery对象，通过调用jQuery对象中的first与css方法查找第一个元素  
并且改变其颜色。

• jQuery选择器

id选择器：一个用来查找的ID，即元素的id属性 ： $( "#id" )
类选择器，顾名思义，通过class样式类名来获取节点：$( ".class" )
元素选择器：根据给定（html）标记名称选择所有的元素：$( "element" )
  注：搜索指定元素标签名的所有节点，这个是一个合集的操作。
jQuery选择器之全选择器（*选择器）：$( "*" )
注：id、class、tag都可以通过原生的方法获取到对应的节点，但是我们还需要考虑一个兼容性的问题，我这里顺便提及  
一下，比如:
1. IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的
2. getElementById的参数在IE8及较低的版本不区分大小写
3. IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么  
getElementById会选中A
4. IE8及较低的版本，浏览器不支持getElementsByClassName
jQuery的出现解决了这些问题！

jQuery选择器之层级选择器：子元素 后代元素 兄弟元素 相邻元素
  1. 层级选择器都有一个参考节点
  2. 后代选择器包含子选择器的选择的内容
  3. 一般兄弟选择器包含相邻兄弟选择的内容
  4. 相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下
  $("parent>child") 子元素选择器，选择”parent“元素中指定的”child“的直接子元素
  $("ancestor descendant") 后代选择器
  $("prev+next") 相邻兄弟选择器：选择所有紧接在”prev“元素后的”next“元素
  $("prev~sublings") 一般兄弟选择器：匹配”prev“元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤”siblings“选择器

jQuery选择器之基本筛选选择器：筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头
  $(":first")：匹配第一个元素
  $(":last")：匹配最后一个元素
  $(":not(selector)")：一个用来过滤的选择器，选择所有元素去除不匹配给定的选择器元素
  $(":eq(index)")：在匹配的集合中选择索引值为index的元素
  $(":gt(index)")：选择匹配集合中所有大于给定index索引值的元素
  $(":even")：选择索引值为偶数的元素，从0开始计数
  $(":odd")：选择索引值为奇数的元素，从0开始计数
  $(":lt(index)")：选择匹配集合中所有索引值小于给定index参数的元素
  $(":header")：选择所有标题元素，像h1,h2,h3等
  $(":lang(language)")：选择指定语言的所有元素
  $(":root")：选择该文档的根元素
  $(":animated")：选择所有正在执行动画效果的元素
  注意事项：
  1. :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素再  
进一步筛选，注意jQuery合集都是从0开始索引
  2. gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始

jQuery选择器之内容筛选选择器：
基本筛选选择器针对的都是元素DOM节点，如果我们要通过内容来过滤，jQuery也提供了一组内容筛选选择器，当然其规则
也会体现在它所包含的子元素或者文本内容上
  $(":contains(text)")：选择所有包含指定文本的元素
  $(":parent")：选择所有含有子元素或者文本的元素
  $(":empty")：选择所有没有子元素的元素（包含文本节点）
  $(":has(selector)")：选择元素中至少包含指定选择器的元素
  注意事项：
  1. :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
  2. 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
  3. :parent与:empty是相反的，两者所涉及的子元素，包括文本节点

jQuery选择器之可见性筛选选择器：
元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden
  $(":visible")：选择所有显示的元素
  $(":hidden")：选择所有隐藏的元素
  注：这2个选择器都是 jQuery 延伸出来的，看起来比较简单，但是元素可见性依赖于适用的样式
  1. :hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等
我们有几种方式可以隐藏一个元素：
  1. CSS display的值是none。
  2. type="hidden"的表单元素。
  3. 宽度和高度都显式设置为0。
  4. 一个祖先元素是隐藏的，该元素是不会在页面上显示
  5. CSS visibility的值是hidden
  6. CSS opacity的指是0
如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度，是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。
不在文档中的元素是被认为是不可见的，如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见  
性依赖于适用的样式

jQuery选择器之属性筛选选择器：
属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性，这样所有使用该属性而不管它的值，这个元素  
都将被定位
  $("[attribute|="value"]")：选择指定属性值等于给定字符串或以改字符串为前缀（该字符串后跟一个连字符"-"）的元素
  $("[attribute*="value"]")：选择指定属性具有包含一个给定的子字符串的元素（选择给定的属性是以包含某些值的元素）
  $("[attribute~="value"]")：选择指定属性用空格分隔的值中包含一个给定值的元素
  $("[attribute!="value"]")：选择不存在指定属性，或者指定的属性值不等于给定值的元素
  $("[attribute^="value"]")：选择指定属性是以给定字符串开始的元素
  $("[attribute$="value"]")：选择指定属性是以给定值结尾的元素，这个比较区分大小写
  $("[attribute]")：选择所有具有指定属性的元素，该属性可以是任何值
    注：[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],  
input[type="checkbox"]等
[attr*="value"]能在网站中帮助我们匹配不同类型的文件

jQuery选择器之子元素筛选选择器：
  $(":first-child")：选择所有父级元素下的第一个子元素
  $(":last-child")：选择所有父级元素下最后一个子元素
  $(":only-child")：如果某个元素是其父元素的唯一子元素，那么它就会被选中
  $(":nth-child")：选择的他们所有父元素的第n个子元素
  $(":nth-last-child")：选择所有他们父元素的第n个子元素，计数从最后一个元素开始到第一个

jQuery选择器之表单元素选择器：
  $(":input")：选择所有input、textarea、select和button元素
  $(":text")：匹配所有文本框
  $(":password")：匹配所有密码框
  $(":radio")：匹配所有单选按钮
  $(":checkbox")：匹配所有复选框
  $(":submit")：匹配所有提交按钮
  $(":iamge")：匹配所有图像域
  $(":reset")：匹配所有重置按钮
  $(":button")：匹配所有按钮
  $(":file")：匹配所有文件域
  注意事项：
除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选  
器替换。比如 $(':password') == $('[type=password]')

jQuery选择器之表单对象属性筛选选择器：
  $(":enabled")：选取可用的表单元素
  $(":disabled")：选取不可用的表单元素
  $(":checked")：选取被选中的<input>元素
  $(":selected")：选取被选中的<option>元素
  注意事项：
选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会  
选取<input>元素

jQuery选择器之特殊选择器this：
相信很多刚接触jQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢？

this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者
下面例子中，imooc是一个对象，拥有name属性与getName方法,在getName中this指向了所属的对象imooc
var imooc = {
    name:"学习网",
    getName:function(){
        //this,就是imooc对象
        return this.name;
    }
}
imooc.getName(); //学习网
当然在JavaScript中this是动态的，也就是说这个上下文对象都是可以被动态改变的(可以通过call,apply等方法)
同样的在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用
假如给页面一个P元素绑定一个事件:
p.addEventListener('click',function(){
    //this === p
    //以下两者的修改都是等价的
    this.style.color = "red";
    p.style.color = "red";
},false);
通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这样对象的样式，只需要通过  
this获取到引用即可
 this.style.color = "red"
但是这样的操作其实还是很不方便的，这里面就要涉及一大堆的样式兼容，如果通过jQuery处理就会简单多了，我们只需要  
把this加工成jQuery对象
换成jQuery的做法：
$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})
通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法  
直接处理样式了
总体：
this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。

• jQuery的属性与样式

jQuery的属性与样式之增加样式.addClass()：
.addClass( className )方法：
.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
注意事项：
.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上
在p元素增加一个newClass的样式：
<p class="orgClass">
$("p").addClass("newClass")

jQuery的属性与样式之删除样式.removeClass()：
.removeClass( )方法：
.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
.removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名
注意事项：
如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式  
类将被移除

jQuery的属性与样式之切换样式.toggleClass()：
jQuery提供一个toggleClass方法用于简化这种互斥的逻辑，通过toggleClass方法动态添加删除Class，一次执行相当  
于addClass，再次执行相当于removeClass
.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值  
切换属性。即：如果存在（不存在）就删除（添加）一个类
.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值
.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上  
用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数
注意事项：
toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加
toggleClass会保留原有的Class名后新增，通过空格隔开

jQuery的属性与样式之样式操作.css()：
.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性
获取：
.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
.css( propertyNames )：传递一组数组，返回一个对象结果
设置：
 .css(propertyName, value )：设置CSS
.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
.css( properties )：可以传一个对象，同时设置多个样式
注意事项：
浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px
.css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理
当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，  
例如 .css("width",50}) 与 .css("width","50px"})一样
注：.addClass()方法是通过增加class名的方式，那么这个样式是在外部文件或者内部样式中先定义好的，等到需要的时候  
再附加到元素上
通过.css()方法处理的是内联样式，直接通过元素的style属性附加到元素上的

jQuery的属性与样式之元素的数据存储：
jQuery提供的存储接口：
jQuery.data( element, key, value )   //静态接口,存数据
jQuery.data( element, key )  //静态接口,取数据   
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,存数据
同样的也提供2个对应的删除接口，使用上与data方法其实是一致的，只不过是一个是增加一个是删除罢了
jQuery.removeData( element [, name ] )
.removeData( [name ] )

• DOM

jQuery节点创建与属性的处理:
var $body = $('body');
    $body.on('click','button',function() {
        //通过jQuery生成div元素节点
        var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
        $body.append(div)
    })

DOM内部插入append()与appendTo()：
.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同
append()前面是被插入的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是被插入的对象

DOM外部插入after()与before()：
before与after都是用来对相对选中元素外部增加相邻的兄弟节点
2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，  
用来插入到集合中每个匹配元素的前面或者后面
2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码
注意点：
after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插

DOM内部插入prepend()与prependTo()：
.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).
.prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同
对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数
而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的  
容器作为参数。
这里总结下内部操作四个方法的区别：
append()向每个匹配的元素内部追加内容
prepend()向每个匹配的元素内部前置内容
appendTo()把所有匹配的元素追加到另一个指定元素的集合中
prependTo()把所有匹配的元素前置到另一个指定的元素集合中

DOM外部插入insertAfter()与insertBefore()：
.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于before()选择表达式  
在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面
.after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。 对于after()  
选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数  
里元素的后面
before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理
注意事项：
insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，  
然后将JQuery对象插入；
insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，  
然后将JQuery对象插入；

DOM节点删除之empty()的基本用法：
<div class="hello"><p>学习网</p></div>
如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中
//通过empty处理
$('.hello').empty()
//结果：<p>学习网</p>被移除
<div class="hello"></div>

DOM节点删除之remove()的有参用法和无参用法：
<div class="hello"><p>学习网</p></div>
通过remove方法移除div及其内部所有元素，remove内部会自动操作事件销毁方法，所以使用使用起来非常简单
//通过remove处理
$('.hello').remove()
//结果：<div class="hello"><p>学习网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁

DOM节点删除之empty和remove区别：
要用到移除指定元素的时候，jQuery提供了empty()与remove([expr])二个方法，两个都是删除元素，但是两者有区别
empty方法
严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
empty不能删除自己本身这个节点
remove方法
该节点与该节点所包含的所有后代节点将同时被删除
提供传递一个筛选的表达式，删除指定合集中的元素

DOM节点删除之detach()和remove()区别：
remove：移除节点
无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据
有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据
detach：移除节点
移除的处理与remove一致
与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来
例如：$("p").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，  
又重新回到了文档流中。就又显示出来了。

• DOM节点的复制与替换

DOM拷贝clone()：
.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)  
传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了
例如：
HTML部分
<div></div>
JavaScript部分
$("div").on('click', function() {//执行操作})
//clone处理一
$("div").clone()   //只克隆了结构，事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

DOM替换replaceWith()和replaceAll()：
之前学习了节点的内插入、外插入以及删除方法，这节会学习替换方法replaceWith
.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
简单来说：用$()选择节点A，调用replaceWith方法，传入一个新的内容B（HTML字符串，DOM元素，或者jQuery对象）  
用来替换选中的节点A
看个简单的例子：一段HTML代码
<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>
替换第二段的节点与内容
$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')
通过jQuery筛选出第二个p元素，调用replaceWith进行替换，结果如下
<div>
    <p>第一段</p>
    <a style="color:red">替换第二段的内容</a>'
    <p>第三段</p>
</div>
.replaceAll( target ) ：用集合的匹配元素替换每个目标元素
.replaceAll()和.replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理
$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')
总结：
.replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别
.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序
.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用
.replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll  
方法替换后的节点

DOM包裹wrap()方法：
如果要将元素用其他元素包裹起来，也就是给它增加一个父元素，针对这样的处理，JQuery提供了一个wrap方法
.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构
简单的看一段代码：
<p>p元素</p>
给p元素增加一个div包裹
$('p').wrap('<div></div>')
最后的结构，p元素增加了一个父div的结构
<div>
    <p>p元素</p>
</div>
.wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象
使用后的效果与直接传递参数是一样，只不过可以把代码写在函数体内部，写法不同而已
以第一个案例为例：
$('p').wrap(function() {
    return '<div></div>';   //与第一种类似，只是写法不一样
})
注意：
.wrap()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深，  
但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集，以便之后使用链式方法。

DOM包裹unwrap()方法：
我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反，如果删除选中元素的父元素要如何处理 ?
jQuery提供了一个unwrap()方法 ，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，  
保留自身（和兄弟元素，如果存在）在原来的位置。
看一段简单案例：
<div>
    <p>p元素</p>
</div>
我要删除这段代码中的div，一般常规的方法会直接通过remove或者empty方法
$('div').remove();
但是如果我还要保留内部元素p，这样就意味着需要多做很多处理，步骤相对要麻烦很多，为了更便捷，  
jQuery提供了unwrap方法很方便的处理了这个问题
$('p').unwrap();
找到p元素，然后调用unwrap方法，这样只会删除父辈div元素了
结果：
<p>p元素</p>
这个方法比较简单，也不接受任何参数，注意参考下案例的使用即可

DOM包裹wrapAll()方法：
wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，  
针对这样的处理，JQuery提供了一个wrapAll方法
.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构
简单的看一段代码：
<p>p元素</p>
<p>p元素</p>
给所有p元素增加一个div包裹
$('p').wrapAll('<div></div>')
最后的结构，2个P元素都增加了一个父div的结构
<div>
    <p>p元素</p>
    <p>p元素</p>
</div>
.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象
通过回调的方式可以单独处理每一个元素
以上面案例为例，
$('p').wrapAll(function() {
    return '<div><div/>'; 
})
以上的写法的结果如下，等同于warp的处理了
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>
注意：
.wrapAll()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层，  
但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。

DOM包裹wrapInner()方法：
如果要将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素，针对这样的处理，  
JQuery提供了一个wrapInner方法
.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构
听起来有点绕，可以用个简单的例子描述下，简单的看一段代码：
<div>p元素</div>
<div>p元素</div>
给所有元素增加一个p包裹
$('div').wrapInner('<p></p>')
最后的结构，匹配的di元素的内部元素被p给包裹了
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>
.wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，  
返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容
以上面案例为例，
$('div').wrapInner(function() {
    return '<p></p>'; 
})
以上的写法的结果如下，等同于第一种处理了
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>
注意：
 当通过一个选择器字符串传递给.wrapInner() 函数，其参数应该是格式正确的 HTML，  
并且 HTML 标签应该是被正确关闭的。

• jQuery遍历

jQuery遍历之children()方法:
jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。  
这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素
（仅儿子辈，这里可以理解为就是父亲-儿子的关系）
理解节点查找关系：
<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>
代码如果是$("div").children()，那么意味着只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，  
因此无法找到。
children()无参数
允许我们通过在DOM树中对这些元素的直接子元素进行搜索，并且构造一个新的匹配元素的jQuery对象
注意：jQuery是一个合集对象，所以通过children是匹配合集中每一给元素的第一级子元素
.children()方法选择性地接受同一类型选择器表达式
$("div").children(".selected")
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，  
所以允许传一个选择器的表达式

jQuery遍历之find()方法：
jQuery是一个合集对象，如果想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，  
这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，  
find是后代关系（包含父子关系）
理解节点查找关系：
<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>
代码如果是$("div").find("li")，此时，li与div是祖辈关系，通过find方法就可以快速的查找到了。
.find()方法要注意的知识点：
find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，  
可以传递通配选择器 '*'。
find只在后代中遍历，不包括自己。
选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于  
 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。
注意重点：
.find()和.children()方法是相似的
1.children只查找第一级的子节点
2.find查找范围包括子节点的所有后代节点

jQuery遍历之parent()方法：
jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），  
此时可以用parent()方法
因为是父元素，这个方法只会向上查找一级
理解节点查找关系：
<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>
查找ul的父元素div, $(ul).parent()，就是这样简单的表达
parent()无参数
parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，  
并根据匹配的元素创建一个新的 jQuery 对象
注意：jQuery是一个合集对象，所以通过parent是匹配合集中每一个元素的父元素
parent()方法选择性地接受同一型选择器表达式
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，  
所以允许传一个选择器的表达式

jQuery遍历之parents()方法：
jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用parents()方法
其实也类似find与children的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点
理解节点查找关系：
<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>
在li节点上找到祖 辈元素div， 这里可以用$("li").parents()方法
parents()无参数
parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素，从有序的向上匹配元素，  
并根据匹配的元素创建一个新的 jQuery 对象;
返回的元素秩序是从离他们最近的父级元素开始的
注意：jQuery是一个合集对象，所以通过parent是匹配合集中所有元素的祖辈元素
parents()方法选择性地接受同一型选择器表达式
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，  
所以允许传一个选择器的表达式
注意事项：
1 .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找
2  $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。

jQuery遍历之closest()方法：
以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，  
jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法
closest()方法接受一个匹配元素的选择器字符串
从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素
例如：在div元素中，往上查找所有的li元素，可以这样表达
$("div").closet("li')
注意：jQuery是一个合集对象，所以通过closest是匹配合集中每一个元素的祖先元素
closest()方法给定的jQuery集合或元素来过滤元素
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，  
所以允许传一个jQuery的对象
注意事项：在使用的时候需要特别注意下
粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了
1. 起始位置不同：.closest开始于当前元素 .parents开始于父元素
2. 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，  
直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
3. 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素  
的jquery对象

jQuery遍历之next()方法：
jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，  
此时可以用next()方法
理解节点查找关系：
如下class="item-1"元素就是红色部分，那蓝色的class="item-2"就是它的兄弟元素
<ul class="level-3">
    <li class="item-1">1</li>
    <li class="item-2">2</li>
    <li class="item-3">3</li>
</ul>
next()无参数
允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素，并根据匹配的元素创建一个新的 jQuery 对象。
注意：jQuery是一个合集对象，所以通过next匹配合集中每一个元素的下一个兄弟元素
next()方法选择性地接受同一类型选择器表达式
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，  
所以允许传一个选择器的表达式

jQuery遍历之prev()方法：
jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，  
此时可以用prev()方法
理解节点查找关系：
如下蓝色的class="item-2"的li元素，红色的节点就是它的prev兄弟节点
<ul class="level-3">
    <li class="item-1">1</li>
    <li class="item-2">2</li>
    <li class="item-3">3</li>
</ul>
prev()无参数
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
注意：jQuery是一个合集对象，所以通过prev是匹配合集中每一个元素的上一个兄弟元素
prev()方法选择性地接受同一类型选择器表达式
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，  
所以允许传一个选择器的表达式

jQuery遍历之siblings()：
jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素的同辈元素，此时可以用siblings()方法
理解节点查找关系：
如下蓝色的class="item-2"的li元素，红色的节点就是它的siblings兄弟节点
<ul class="level-3">
    <li class="item-1">1</li>
    <li class="item-2">2</li>
    <li class="item-3">3</li>
</ul>
siblings()无参数
取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合
注意：jQuery是一个合集对象，所以通过siblings是匹配合集中每一个元素的同辈元素
siblings()方法选择性地接受同一类型选择器表达式
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，  
所以允许传一个选择器的表达式
注：sibings找到的是所有的同辈元素，而不是相邻的前后同辈
附：.children()    找儿子
.find()        找后代
.parent()      找爸爸
.parents()     找长辈(直接遍历到根元素,可能返回零个或一个或多个元素)
.closest()     找长辈(从当前节点向上遍历,找到停止,返回零个或一个元素)
.next()        找小弟
.prev()        找大哥
.siblings()    找兄弟

jQuery遍历之add()方法：
jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。
$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？  
jQuery为此提供add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中
.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。
简单的看一个案例：
操作：选择所有的li元素，之后把p元素也加入到li的合集中
<ul>
    <li>list item 1</li>
    <li>list item 3</li>
</ul>
<p>新的p元素</p>
处理一：传递选择器
$('li').add('p')
处理二：传递dom元素
$('li').add(document.getElementsByTagName('p')[0])
还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了
 $('li').add('<p>新的p元素</p>').appendTo(目标位置)

jQuery遍历之each()：
jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。  
比如我们操作$("li").css('') 给所有的li设置style值，因为jQuery是一个合集对象，所以css方法内部  
就必须封装一个遍历的方法，被称为隐式迭代的过程。要一个一个给合集中每一个li设置颜色，这里方法就是each
.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，  
会传递当前循环次数作为参数(从0开始计数
所以大体上了解3个重点：
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以便在回调函数内中止循