jquery基础（慕课网）

jQuery基础课程总共分为4个部分，分别是样式篇、事件篇、动画篇、DOM篇。

样式篇

jquery的作用：jquery解决了浏览器的兼容性。
1.1 jQuery对象和DOM对象。
通过jQuery包装的对象是一个类数组对象，与DOM对象不同，但是都可以操作DOM。

//获取这个id所在的值，添加文字，并且变为红色
<p id=”imooc”></p>

//js做法
var p = document.getElementById('imooc');
p.innerHTML = '您好！通过慕课网学习jQuery才是最佳的途径';
p.style.color = 'red';

//jQuery做法
var $p = $('#imooc'); //$p是一个类数组对象，包含了DOM对象的信息，且封装操作方法
$p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');

1.2 jQuery对象转化为DOM对象
jQuery对象是一个类数组对象，而DOM对象就是一个单独的DOM元素。

//通过[]方法和get方法将jQuery对象转换为DOM对象
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象  
var div = $div.get(0) //和上面的作用是一样的
div.style.color = 'red' //操作dom对象的属性

1.3 DOM对象转化成jQuery对象
通过$(DOM)方式，其中DOM是指DOM对象

//通过$(DOM)方式将DOM对象转化为jQuery对象
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
//getElementsByTagName获取到所有div节点的元素，结果是一个dom合集对象，不过这个对象是一个数组合集(3个div元素)
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

2.1 id选择器

$("#id")

id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

2.2 类选择器

$( ".class" )

与javascript原生getElementsByClassName()函数的实现代码与jQuery实现代码的相比，jQuery除了选择上的简单，而且没有再次使用循环处理。

//在使用类选择器上，javascript与jquery做对比
//js形式
var divs = document.getElementsByClassName('aaron');
for (var i = 0; i < divs.length; i++) {
  divs[i].style.border = "3px solid blue";
}
//jquery形式
$(".imooc").css("border", "3px solid red");

2.3 元素选择器

$( "element" )

搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持。

//使用js方式
var divs = document.getElementsByTagName('div');

2.4 全选择器

$( "*" )

全选择器要获取文档中所有的元素。

//js中的实现方式
document.getElementsByTagName()

2.5 层级选择器

层级选择器

//代码示例
$('div > p')  //选择所有div元素里面的直接子元素P
$('div  p')  //选择所有div元素里面的p元素(包括直接和间接元素P)
$(".prev + div") //选取prev后面的第一个的div兄弟节点
$(".prev ~ div") //选取prev后面的所有的div兄弟节点     

2.6 基本筛选选择器
注意jQuery合集都是从0开始索引，gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始。

基本筛选选择器

//代码示例
$(".div:first") //找到第一个div
$(".div:last") //找到最后一个div
$(".div:even") //选择索引值为偶数的元素，从 0 开始计数
$(".div:odd") //选择索引值为奇数的元素，从 0 开始计数
$(".aaron:eq(2)") //选择第三个元素
$(".aaron:gt(3)") //选择匹配集合中所有索引值大于给定index参数的元素
$(".aaron:lt(2)") //选择匹配集合中所有索引值小于给定index参数的元素
$("input:not(:checked)+p") //选中所有紧接着没有checked属性的input元素后的p元   

2.7 内容选择器

内容选择器

1.:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素。
2.如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
3.:parent与:empty是相反的，两者所涉及的子元素，包括文本节点

//代码示例
$(".div:contains(':contains')") //div'中DOM元素中包含"contains"的元素节点
$(".div:has(span)") //'div'中DOM元素中包含"span"的元素节点
$("a:parent") //选择所有包含子元素或者文本的a元素
$("a:empty") //找到a元素下面的所有空节点(没有子元素)

2.8 可见筛选选择器

可见筛选选择器

下面几种方式隐藏一个元素：
1.CSS display的值是none。
2.type="hidden"的表单元素。
3.宽度和高度都显式设置为0。
4.一个祖先元素是隐藏的，该元素是不会在页面上显示
5.CSS visibility的值是hidden
6.CSS opacity的指是0

//代码示例
<p id="div1" style="display:none;">display</p>
<p id="div2" style="width:0;height:0">width/height</p>
<p id="div3" style="visibility:hidden;opacity:0">visibility</p>

//获取隐藏的元素
$('#div1:hidden')

2.9 属性筛选选择器

属性筛选选择器

//代码示例
$("div[name=p1]") //查找所有div中，属性name=p1的div元素
$('div[p2]') //查找所有div中，有属性p2的div元素
$('div[name|="-"]') //查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
$('div[name~="a"]') //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
$("div[name^=imooc]") //查找所有div中，属性name的值是用imooc开头的
$('div[name$=imooc]') //查找所有div中，属性name的值是用imooc结尾的
$('div[name*="test"]') //查找所有div中，有属性name中的值包含一个test字符串的div元素
$('div[testattr!="true"]') //查找所有div中，有属性testattr中的值没有包含"true"的div

2.10 子元素筛选选择器

子元素筛选选择器

//代码示例
$('.first-div a:first-child') //查找class="first-div"下的第一个a元素，针对所有父级下的第一个
$('.first-div a:last-child') //查找class="first-div"下的最后一个a元素，针对所有父级下的第一个
$('.first-div a:only-child') //查找class="first-div"下的只有一个子元素的a元素
$('.last-div a:nth-child(2)') //查找class="last-div"下的第二个a元素
$('.last-div a:nth-last-child(2)') //查找class="last-div"下的倒数第二个a元素

2.11 表单元素选择器

表单元素选择器

//代码示例
<input type="password" value="password"/>

$(':input') //查找所有 input, textarea, select 和 button 元素
$('input:password') //匹配所有input元素中类型为text的input元素

2.12 表单对象属性筛选选择器

对象属性筛选选择器

//代码示例
<form>
  <input type="text" value="未设置disabled" />
  <input type="text" value="设置disabled" disabled="disabled" />
  <input type="text" value="未设置disabled" />
 </form>
$('input:enabled') //查找所有input所有可用的（未被禁用的元素）input元素
$('input:disabled') //查找所有input所有不可用的（被禁用的元素）input元素

<select name="garden" multiple="multiple">
  <option>imooc</option>
  <option selected="selected">慕课网</option>
  <option>aaron</option>
  <option selected="selected">博客园</option>
 </select>
$('input:checked') //查找所有input所有勾选的元素(单选框,复选框)
$('option:selected') //查找所有option元素中,有selected属性被选中的选项

2.13 this指代
this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者。

var imooc = {
  name:"慕课网",
  getName:function(){
  //this,就是imooc对象
  return this.name;
  }
}
imooc.getName(); //慕课网

在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用。

p.addEventListener('click',function(){
  //this === p
  //以下两者的修改都是等价的,this表示当前的dom对象
  this.style.color = "red";
  p.style.color = "red";
}, false);

转换成jQuery对象

$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。
3.1 jQuery样式和属性中的.attr和.removeAttr
attr()有4个表达式：
attr(传入属性名)：获取属性的值
attr(属性名, 属性值)：设置属性的值
attr(属性名,函数值)：设置属性的函数值
attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
removeAttr()删除方法
.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

<form>
  <input type="text" value="设置value" />
  <input type="text" value="获取value"/>
  <input type="text" value="回调拼接value" />
  <input type="text" value="删除value" />
</form>
$("input:first").attr('value','.attr( “xx”)') //找到第一个input，通过attr设置属性value的值
$("input:eq(1)").attr('value') //找到第二个input，通过attr获取属性value的值

//找到第三个input，通过使用一个函数来设置属性
//可以根据该元素上的其它属性值返回最终所需的属性值
 //例如，我们可以把新的值与现有的值联系在一起：
$("input:eq(2)").attr('value',function(i, val){
  return '通过function设置' + i +val
}) //其中传递的i值是0，val值是回调拼接value

$("input:eq(3)").removeAttr('value') //找到第四个input，通过使用removeAttr删除属性

3.2 jQuery的属性与样式之html()及.text()
**.html()方法 **
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：
.html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
.html( htmlString ) 设置每一个匹配元素的html内容
.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
.text()方法
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：
.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
.text( textString ) 用于设置匹配元素内容的文本
.text( function(index, text) ) 用来返回设置文本内容的一个函数

 $(".left a:first").text(function(index,text){
    //index参数从0开始，text参数是前者text()方法中获取的值
    return '增加新的文本内容' + text
  })

** 3.2 jQuery的属性与样式之.val()**
.val()方法
.val()无参数，获取匹配的元素集合中第一个元素的当前值
.val( value )，设置匹配的元素集合中每个元素的值
.val( function ) ，一个用来返回设置值的函数
注意事项：
1 通过.val()处理select元素， 当没有选择项被选中，它返回null
2 .val()方法多用来设置表单的字段的值
3 如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值

//代码示例
<select id="single">
  <option>慕课网</option>
  <option>博客园</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">imocc</option>
  <option>慕课网</option>
  <option selected="selected">博客园</option>
</select>
<input type="text" value="click a button" />
<p></p>

$("p").text( $("#single").val() ) //慕课网
$("p").text( $("#multiple").val() ) //immoc
$("input[type='text']").val('修改表单的字段')  //选择一个表单，修改value的值

3.3 jQuery的属性与样式之增加样式.addClass()
.addClass( className )方法
.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名，不会替换或者改变前者的样式
.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

//代码演示
<p class="orgClass">
$("p").addClass("newClass") //<p class="orgClass newClass">

<script type="text/javascript">     
  //通过className(fucntion)方法
  //这个函数返回一个或更多用空格隔开的要增加的样式名。
  //接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容

  //找到所有的div，然后通过addClass设置颜色，根据返回的className的判断，
  $("div").addClass(function(index,className) {

  //找到类名中包含了imooc的元素
  //等于-1就是不包含imooc，反之就是包含imooc字符串被   
    if(-1 !== className.indexOf('imooc')){
      //this指向匹配元素集合中的当前元素
      $(this).addClass('imoocClass')
    }
  });
</script>

3.4 jQuery的属性与样式之删除样式.removeClass()
.removeClass( )方法
.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
.removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名

//代码示例
<script type="text/javascript"> 
  //class=left下div元素删除newClass样式
  $('.left div').removeClass('newClass')
</script>

<script type="text/javascript"> 
  //.removeClass() 方法允许我们指定一个函数作为参数，返回将要被删除的样式
  $('.right > div:first').removeClass(function(index,className){
            
  //className = aa bb imoocClass
  //把div的className赋给下一个兄弟元素div上作为它的class
  $(this).next().addClass(className)

  //删除自己本身的imoocClass
  return 'imoocClass'
  })
</script>

DOM篇

1.1 DOM创建节点及属性

document.createElement  //创建元素
setAttribute //设置属性
innerHTML //添加文本
appendChild //加入文档

1.2 jQuery创建节点及属性

<body>
  <h2>动态创建元素节点</h2>
  <button>点击通过jQuery动态创建元素节点</button>
  <script type="text/javascript">
    var $body = $('body');
    $body.on('click', function() {
        //通过jQuery生成div元素节点
        var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
        $body.append(div)
    })
</body>

2.1 DOM内部插入append()与appendTo()
把这个新创建的元素，当作页面某一个元素的子元素放到其内部。

方法说明

append()前面是被插入的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是被插入的对象

//代码示例
<button id="bt1">点击通过jQuery的append添加元素</button>
<button id="bt2">点击通过jQuery的appendTo添加元素</button>
<div class="content"></div>

<script type="text/javascript">
  $("#bt1").on('click', function() {
  //.append(), 内容在方法的后面，
  //参数是将要插入的内容。
  $(".content").append('<div class="append">通过append方法添加的元素</div>')
  })
</script>

<script type="text/javascript">
  $("#bt2").on('click', function() {
  //.appendTo()刚好相反，内容在方法前面，
  //无论是一个选择器表达式 或创建作为标记上的标记
  //它都将被插入到目标容器的末尾。
  $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
  })
</script>

2.2 DOM外部插入after()与before()
兄弟之间的关系处理。

方法说明

//代码示例
<body>
  <button id="bt1">点击通过jQuery的before添加元素</button>
  <button id="bt2">点击通过jQuery的after添加元素</button>
  <div class="aaron">
    <p class="test1">测试before</p>
  </div>
  <div class="aaron">
    <p class="test2">测试after</p>
  </div>
  <script type="text/javascript">
    $("#bt1").on('click', function() {
      //在匹配test1元素集合中的每个元素前面插入p元素
      $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
    })
  </script>
  <script type="text/javascript">
    $("#bt2").on('click', function() {
      //在匹配test1元素集合中的每个元素后面插入p元素
      $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')
    })
  </script>
</body>

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

方法说明

<body>
  <h2>通过prepend与prependTo添加元素</h2>
  <button id="bt1">点击通过jQuery的prepend添加元素</button>
  <button id="bt2">点击通过jQuery的prependTo添加元素</button>
  <div class="aaron1">
    <p>测试prepend</p>
  </div>
  <div class="aaron2">
    <p>测试prependTo</p>
  </div>
  <script type="text/javascript">
    $("#bt1").on('click', function() {
      //找到class="aaron1"的div节点
      //然后通过prepend在内部的首位置添加一个新的p节点
      $('.aaron1').prepend('<p>prepend增加的p元素</p>')
    })
  </script>

  <script type="text/javascript">
    $("#bt2").on('click', function() {
      //找到class="aaron2"的div节点
      //然后通过prependTo内部的首位置添加一个新的p节点
      $('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))
    })
  </script>
</body>

2.4 DOM外部插入insertAfter()与insertBefore()
和after和before相比，就是这两个方式是将内容放在前面。

方法说明

<body>
  <h2>通过insertBefore与insertAfter添加元素</h2>
  <button id="bt1">点击通过jQuery的insertBefore添加元素</button>
  <button id="bt2">点击通过jQuery的insertAfter添加元素</button>
  <div class="aaron">
    <p class="test1">测试insertBefore,不支持多参数</p>
  </div>
  <div class="aaron">
    <p class="test2">测试insertAfter,不支持多参数</p>
  </div>
  <script type="text/javascript">
    $("#bt1").on('click', function() {
    //在test1元素前后插入集合中每个匹配的元素
    //不支持多参数
    $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
    })
  </script>
  <script type="text/javascript">
    $("#bt2").on('click', function() {
    //在test2元素前后插入集合中每个匹配的元素
    //不支持多参数
    $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
    })
  </script>
</body>

3.1 DOM节点删除之empty()的基本用法
移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。

<body>
  <h2>通过empty移除元素</h2>
  <div id="test">
    <p>p元素1</p>
    <p>p元素2</p>
  </div>
  <button>点击通过jQuery的empty移除元素</button>
  <script type="text/javascript">
    $("button").on('click', function() {
    //通过empty移除了当前div元素下的所有p元素
    //但是本身id=test的div元素没有被删除
      $("#test").empty()
    })
  </script>
</body>

3.2 DOM节点删除之remove()的有参用法和无参用法
remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点。

<body>
  <h2>通过jQuery remove方法移除元素</h2>
  <div class="test1">
    <p>p元素1</p>
    <p>p元素2</p>
  </div>
  <div class="test2">
    <p>p元素3</p>
    <p>p元素4</p>
  </div>
  <button>通过点击jQuery的empty移除元素</button>
  <button>通过点击jQuery的empty移除指定元素</button>
  <script type="text/javascript">
    $("button:first").on('click', function() {
    //删除整个 class=test1的div节点
      $(".test1").remove()
    })

    $("button:last").on('click', function() {
    //找到所有p元素中，包含了3的元素
    //这个也是一个过滤器的处理
      $("p").remove(":contains('3')")
    })
  </script>
</body>

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

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

//代码示例
<body>
  <p>P元素1，默认给绑定一个点击事件</p>
  <p>P元素2，默认给绑定一个点击事件</p>
  <button id="bt1">点击删除 p 元素</button>
  <button id="bt2">点击移动 p 元素</button>
  <script type="text/javascript">
  $('p').click(function(e) {
    alert(e.target.innerHTML)
  })
  var p;
  $("#bt1").click(function() {
    if (!$("p").length) return; //去重
    //通过detach方法删除元素
    //只是页面不可见，但是这个节点还是保存在内存中
    //数据与事件都不会丢失
    p = $("p").detach()
  });

  $("#bt2").click(function() {
    //把p元素在添加到页面中
    //事件还是存在
    $("body").append(p);
  });
  </script>
</body>

4.1 DOM拷贝clone()
.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

HTML部分
<div></div>

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

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

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

//代码示例
<body>
  <h2>通过clone克隆元素</h2>
  <div class="left">
    <div class="aaron1">点击,clone浅拷贝</div>
    <div class="aaron2">点击,clone深拷贝,可以继续触发创建</div>
  </div>
  <script type="text/javascript">
  //只克隆节点
  //不克隆事件
    $(".aaron1").on('click', function() {
      $(".left").append( $(this).clone().css('color','red') )
    })
    </script>

  <script type="text/javascript">
  //克隆节点
  //克隆事件
    $(".aaron2").on('click', function() {
      console.log(1)
      $(".left").append( $(this).clone(true).css('color','blue') )
    })
  </script>
</body>

4.2 DOM替换replaceWith()和replaceAll()
.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。replaceAll的作用与replaceWith作用相同，只是使用的位置不同。

//代码示例
<div>
  <p>第一段</p>
  <p>第二段</p>
  <p>第三段</p>
</div>

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

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

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

//代码示例
//第一种写法：.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构
<p>p元素</p>
$('p').wrap('<div></div>')
//结果
<div>
    <p>p元素</p>
</div>

//第二种写法：.wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象
$('p').wrap(function() {
    return '<div></div>';   //与第一种类似，只是写法不一样
})

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

//代码示例
<div>
    <p>p元素</p>
</div>

$('p').unwarp();

<p>p元素</p>

4.5 DOM包裹wrapAll()方法
wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法。

//第一种用法：.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构
<p>p元素</p>
<p>p元素</p>

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

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

//第二种用法：wrapAll( function ) ：一个回调函数，通过回调的方式可以单独处理每一个元素
<p>p元素</p>
<p>p元素</p>

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

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

4.6 DOM包裹wrapInner()方法
如果要将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素。

//第一种用法：
<div>p元素</div>
<div>p元素</div>

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

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

//第二种用法
$('div').wrapInner(function() {
    return '<p></p>';  //和上面的效果一致
})

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

//代码示例
$("div").children(".selected")

5.2 jQuery遍历之find()方法
children是父子关系查找，find是后代关系（包含父子关系）

//代码示例
<div class="div">
  <ul class="son">
    <li class="grandson">1</li>
  </ul>
</div>

$("div").find("li")

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

//代码示例
<div class="div">
  <ul class="son">
    <li class="grandson">1</li>
  </ul>
</div>

$(ul).parent()

5.4 jQuery遍历之parents()方法
其实也类似find与children的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点。

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

$("li").parents()  //在li节点上找到祖 辈元素div

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

5.5 jQuery遍历之closest()方法
从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。

$("div").closet("li')

1.起始位置不同：.closest开始于当前元素 .parents开始于父元素
2.遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
3.结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象
5.6 jQuery遍历之next()方法
如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法.

//代码示例
<ul class="level-3">
  <li class="item-1">1</li>
  <li class="item-2">2</li>
  <li class="item-3">3</li>
</ul>

$(".item-1").next()  //获取 <li class="item-2">2</li>

5.7 jQuery遍历之prev()方法
快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合。

//代码示例
<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").next()  //获取 <li class="item-1">1</li>

5.8 jQuery遍历之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()  //获取 <li class="item-1">1</li>和  <li class="item-3">3</li>

5.9 jQuery遍历之add()方法
$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理。

<body>
  <h2>add方法()</h2>
  <div class="left first-div">
    <div class="div">
      <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
      </ul>
      <p>新的p元素</p>
    </div>
  </div>
  <div class="right"></div>
  <br/>
  <button>点击：add传递元素标签</button>
  <button>点击：add传递html结构</button>
    <script type="text/javascript">
    $("button:first").click(function() {
         //把p元素添加到li的合集中
         $('li').add('p').css('background', 'red')
    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
         //把html结构'<p>新的p元素</p>'
         //加入到li的合集中，为了能够在页面上显示
         //需要再重新appendTo到指定的节点处
         //值得注意：整个结构位置都改变了
         $('li').add('<p>新的p元素</p>').appendTo($('.right'))
    })
    </script>
</body>

5.10 jQuery遍历之each()
比如我们操作$("li").css('') 给所有的li设置style值，因为jQuery是一个合集对象，所以css方法内部就必须封装一个遍历的方法，被称为隐式迭代的过程。要一个一个给合集中每一个li设置颜色，这里方法就是each。

//代码示例
<ul>
  <li>慕课网</li>
  <li>Aaron</li>
</ul>

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

//代码示例
<body>
    <h2>each方法</h2>
    <div class="left first-div">
        <div class="div">
            <ul>
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3</li>
            </ul>
        </div>
        <div class="div">
            <ul>
                <li>list item 4</li>
                <li>list item 5</li>
                <li>list item 6</li>
            </ul>
        </div>
    </div>

    <br/>
    <button>点击：each方法遍历元素</button>
    <button>点击：each方法回调判断</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        //遍历所有的li
        //修改每个li内的字体颜色
        $("li").each(function(index, element) {
            $(this).css('color','red')
        })

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

事件篇

点击事件

//方式1
<div id="test">点击触发<div>
$("#test").click(function() {
    //this指向 div元素
});

//方式2
<div id="test">点击触发<div>
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 传递数据
});

鼠标事件

click
dbclick
mousedown
mouseup
mousemove
mouseover
mouseout
mouseenter
mouseleave
hover
focusin
focusout

表单事件

blur
focus
change
submit
select

键盘事件

keydown
keyup
keypress

on()的多事件绑定

//基本用法
$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

//多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ });

//多个事件绑定不同函数
$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){},
});

//将数据传递到处理程序
function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
  name: "慕课网"
}, greet );

on()的高级用法
事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数。

<body>
    <h2>on事件委托</h2>
    <div class="left">
        <div class="aaron">
            <a>点击这里</a>
        </div>
    </div>
    <script type="text/javascript">
    //给body绑定一个click事件
    //没有直接a元素绑定点击事件
    //通过委托机制，点击a元素的时候，事件触发
    $('body').on('click', 'a', function(e) {
       alert(e.target.textContent)
    })
    </script>
</body>

卸载事件off()方法
通过on绑定事件，通过off卸载相应事件

$("elem").on("mousedown mouseup",fn) //绑定两个事件
$("elem").off("mousedown") //删除一个事件
$("elem").off("mousedown mouseup") //删除两个事件
$("elem").off() //删除所有事件

** jQuery事件对象的作用**

//一个标准的事件点击对象
$(elem).on("click",function(event){
   event //事件对象
})

//代码示例
<ul>
    <li class="even1"></li>
    <li class="even2"></li>
    <li class="even2"></li>
    .........
</ul>

利用事件委托机制：因为li都有一个共同的父元素，而且所有的事件都是一致的，这里我们可以采用要一个技巧来处理，也是常说的"事件委托"事件没直接和li元素发生关系，而且绑定父元素了。由于浏览器有事件冒泡的这个特性，我们可以在触发li的时候把这个事件往上
冒泡到ul上，因为ul上绑定事件响应所以就能够触发这个动作了。

事件对象：事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁。

//target 属性可以是注册事件时的元素，或者它的子元素。
event.target

event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素。

<body>
  <h3>事件委托，通过事件对象区别触发元素</h3>
    <div class="left">
      <div class="aaron">
        <ul>
          <li>点击：触发一</li>
          <li>点击：触发二</li>
          <li>点击：触发三</li>
          <li>点击：触发四</li>
        </ul>
      </div>
    </div>

    <script type="text/javascript">
        //多事件绑定一
        $("ul").on('click',function(e){
           alert('触发的元素是内容是: ' + e.target.textContent)
        })
    </script>
</body>

jQuery事件对象的属性和方法
event.type：获取事件的类型

$("a").click(function(event) {
  alert(event.type); // "click"事件
});

event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

event.preventDefault() 方法：阻止默认行为
这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

event.stopPropagation() 方法：阻止事件冒泡
事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

event.which：获取在鼠标单击时，单击的是鼠标的哪个键
event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3

event.currentTarget : 在事件冒泡过程中的当前DOM元素
冒泡前的当前触发事件的DOM对象, 等同于this.

this和event.target的区别：
js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

.this和event.target都是dom对象
如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

动画篇

1.1 hide方法

<body>
    <h2>hide</h2>
    <div class="left">
        <h4>测试一</h4>
        <div id="a1">hide操作</div>
        <button>直接hide</button>
        <script type="text/javascript">
        //点击buttom1 直接隐藏
        $("button:first").click(function() {
            $("#a1").hide()
        });
        </script>


        <h4>测试一</h4>
        <div id="a2">hide动画操作</div>
        <button>hide带动画</button>
        <script type="text/javascript">
        //点击buttom2 执行动画隐藏
        $("button:last").click(function() {
            $("#a2").hide({
                duration: 3000,
                complete: function() {
                    alert('执行3000ms动画完毕')
                }
            })
        });
        </script>
    </div>
</body>

1.2 show方法

<body>
    <h2>hide-show</h2>
    <div class="left">
    
        <div id="a1">hide-show</div>

        <button>直接hide-show动画</button>

    <script type="text/javascript">

    //点击button
    //执行3秒隐藏
    //执行3秒显示
    $("button").click(function() {
        $("#a1").hide(3000).show(3000)
    });

    </script>
</body>

1.3 toggle方法
一个切换效果，代替了hide和show方法，代码原理如下：

//代码原理
if ( display === true ) {
  $( "elem" ).show();
} else if ( display === false ) {
  $( "elem" ).hide();
}

//代码格式
.toggle( [duration ] [, complete ] )

//代码示例
<body>
    <h2>通过toggle切换显示与隐藏</h2>
    <div class="left">显示到隐藏</div>
    <div class="right">隐藏到显示</div>
    <button>直接show-hide动画</button>
    <button>直接hide-show动画</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        $(".left").toggle(3000)
    });
    </script>

    <script type="text/javascript">
    $("button:last").click(function() {
        $(".right").toggle(3000)
    });
    </script>

</body>

2.1 下拉动画 slideDown

<body>
    <h2>slideDown</h2>
    <div class="left">
        <h4>测试一</h4>
        <div id="a1">hide-show</div>
        <button>点击slideDown显示动画</button>
    </div>
        <script type="text/javascript">
        //点击button
        //执行3秒隐藏
        //执行3秒显示
        $("button:first").click(function() {
            $("#a1").slideDown(3000)
        });
        </script>
    <div class="right">
        <h4>测试二</h4>
        <div id="a2">hide-show</div>
        <button>点击slideDown执行回调</button>
    </div>
        <script type="text/javascript">
        //点击button
        //执行3秒隐藏
        //执行3秒显示
        $("button:last").click(function() {
            $("#a2").slideDown(3000,function(){
                alert('动画执行结束')
            })
        });
        </script>
</body>

2.2 上卷动画 slideUp

<body>
    <h2>slideUp</h2>
    <div class="left">
        <h4>测试一</h4>
        <div id="a1"></div>
        <button>点击slideUp隐藏动画</button>
    </div>
        <script type="text/javascript">
        //点击button
        //执行3秒隐藏
        //执行3秒显示
        $("button:first").click(function() {
            $("#a1").slideUp(3000)
        });
        </script>
    <div class="right">
        <h4>测试二</h4>
        <div id="a2"></div>
        <button>点击slideUp执行回调</button>
    </div>
        <script type="text/javascript">
        //点击button
        //执行3秒隐藏
        //执行3秒显示
        $("button:last").click(function() {
            $("#a2").slideUp(3000,function(){
                alert('动画执行结束')
            })
        });
        </script>

</body>

2.3 上卷下拉切换slideToggle

<body>
    <h2>slideToggle</h2>
    <div class="left">
        <div id="a1"></div>
        <button>点击slideToggle上下卷滚切换</button>
    </div>
        <script type="text/javascript">

        $("button").click(function() {
            $("#a1").slideToggle(3000)
        });


        </script>
</body>

3.1 淡出动画fadeOut

<body>
    <h2>fadeOut</h2>
    <p>测试文字淡入效果</p>
    <p>慕课网,专注分享</p>
    淡出的隐藏效果：
    <select id="animation">
        <option value="1">fadeOut( )</option>
        <option value="2">fadeOut( "slow" )</option>
        <option value="3">fadeOut( 3000 )</option>
        <option value="4">fadeOut( 1000, complete )</option>
        <option value="5">fadeOut( 1000, "linear" )</option>
        <option value="6">fadeOut( options )</option>
    </select>
    
    </br></br>
    
    <input id="btnFadeOut" type="button" value="点击淡出隐藏" />
    <input id="btnShow" type="button" value="显示" />
    
    <script type="text/javascript">
    //【显示】按钮
    $("#btnShow").click(function() {
        $("p").show();
    });

    //【隐藏】按钮
    $("#btnFadeOut").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").fadeOut();
        } else if (v == "2") {
            $("p").fadeOut("slow");
        } else if (v == "3") {
            $("p").fadeOut(3000);
        } else if (v == "4") {
            $("p").fadeOut(2000, function() {
                alert("隐藏完毕!");
            });
        } else if (v == "5") {
            $("p").fadeOut(1000, "linear");
        } else if (v == "6") {
            $("p").fadeOut({
                duration: 1000
            });
        }
    });
    </script>
</body>

3.2 淡出动画fadeIn

<body>
    <h2>fadeIn</h2>
    <p>测试文字淡出效果</p>
    <p>慕课网,专注分享</p>
    选择：淡出的隐藏效果
    </br>
    </br>
    <select id="animation">
        <option value="1">fadeIn( )</option>
        <option value="2">fadeIn( "slow" )</option>
        <option value="3">fadeIn( 3000 )</option>
        <option value="4">fadeIn( 2000, complete )</option>
        <option value="5">fadeIn( 1000, "linear" )</option>
        <option value="6">fadeIn( options )</option>
    </select>
    </br></br>
    <input id="btnFadeIn" type="button" value="执行淡出效果" />
    <input id="btnHide" type="button" value="点击隐藏" />
    <script type="text/javascript">
    //【显示】按钮
    $("#btnFadeIn").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").fadeIn();
        } else if (v == "2") {
            $("p").fadeIn("slow");
        } else if (v == "3") {
            $("p").fadeIn(3000);
        } else if (v == "4") {
            $("p").fadeIn(2000, function() {
                alert("显示完毕!");
            });
        } else if (v == "5") {
            $("p").fadeIn(1000, "linear");
        } else if (v == "6") {
            $("p").fadeIn({
                duration: 1000
            });
        }
    });

    // 【隐藏】按钮
    $("#btnHide").click(function() {
        $("p").hide();
    });
    </script>
</body>

3.3 淡入淡出切换fadeToggle

<body>
    <h2>fadeToggle</h2>
    <p>测试文字淡入淡出切换效果</p>
    <p>慕课网,专注分享</p>
    淡入淡出的隐藏效果：
    <select id="animation">
        <option value="1">fadeToggle( )</option>
        <option value="2">fadeToggle( "slow" )</option>
        <option value="3">fadeToggle( 3000 )</option>
        <option value="4">fadeToggle( 1000, complete )</option>
        <option value="5">fadeToggle( 1000, "linear" )</option>
        <option value="6">fadeToggle( options )</option>
    </select>
    <input id="btnFadeSwitch" type="button" value="点击切换显示/隐藏">
    <script type="text/javascript">
    //【切换显示/隐藏】按钮
    $("#btnFadeSwitch").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").fadeToggle();
        } else if (v == "2") {
            $("p").fadeToggle("slow");
        } else if (v == "3") {
            $("p").fadeToggle(3000);
        } else if (v == "4") {
            $("p").fadeToggle(1000, function() {
                alert("切换完毕!");
            });
        } else if (v == "5") {
            $("p").fadeToggle(1000, "linear");
        } else if (v == "6") {
            $("p").fadeToggle({
                duration: 1000
            });
        }
    });
    </script>
</body>

3.4 淡入切换fadeTo
fadeIn：淡入效果，内容显示，opacity是0到1
fadeOut：淡出效果，内容隐藏，opacity是1到0
让元素保持动画效果，执行opacity = 0.5的效果时使用fadeTo

<body>
    <h2>fadeTo</h2>
    <p>测试文字透明度效果</p>
    <p>慕课网,专注分享</p>
    透明度的设置效果：
    <select id="animation">
        <option value="1">fadeTo( "slow" ,0.5 )</option>
        <option value="2">fadeTo( 1000 ,0.2 )</option>
        <option value="3">fadeTo( 1000 ,0.9 ,complete)</option>
    </select>
    <input id="btnFadeSwitch" type="button" value="点击切换显示/隐藏">
    <script type="text/javascript">
    //【切换显示/隐藏】按钮
    $("#btnFadeSwitch").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").fadeTo("slow", 0.5);
        } else if (v == "2") {
            $("p").fadeTo(1000, 0.2);
        } else if (v == "3") {
            $("p").fadeTo(1000, 0.9, function() {
                alert('完成')
            });
        }
    });
    </script>
</body>

4.1 animate精确控制

<body>
    <h2>animate(上)</h2>
    <p>慕课网,专注分享</p>
    <div id="aaron">内部动画</div>
    点击观察动画效果：
    <select id="animation">
        <option value="1">动画1</option>
        <option value="2">动画2</option>
        <option value="3">动画3</option>
        <option value="4">动画4</option>
    </select>
    <input id="exec" type="button" value="执行动画">
    <script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            // 数值的单位默认是px
            $aaron.animate({
                width  :300,
                height :300
            });
        } else if (v == "2") {
            // 在现有高度的基础上增加100px
            $aaron.animate({
                 width  : "+=100px",
                 height : "+=100px"
            });
        } else if (v == "3") {
            $aaron.animate({
                fontSize: "5em"
            }, 2000, function() {
                alert("动画 fontSize执行完毕!");
            });
        } else if (v == "4") {
            //通过toggle参数切换高度
            $aaron.animate({
                width: "toggle"
            });
        } 
    });
    </script>
</body>

step：规定每个动画的每一步完成之后要执行的函数
progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念

<body>
    <h2>animate(下)</h2>
    <p>慕课网,专注分享</p>
    <div id="aaron">内部动画</div>
    点击观察动画效果：
    <select id="animation">
        <option value="1">动画step动画</option>
        <option value="2">动画progress回调</option>
    </select>
    <a></a>
    <input id="exec" type="button" value="执行动画">
    <script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            //观察每一次动画的改变
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一个动画都会调用
                step: function(now, fx) {
                   $aaron.text('高度的改变值:'+now)
                }
            })
        } else if (v == "2") {
            //观察每一次进度的变化
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一步动画完成后调用的一个函数，
                //无论动画属性有多少，每个动画元素都执行单独的函数
                progress: function(now, fx) {
                   $aaron.text('进度:'+arguments[1])
                    // var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
                    // alert(data)
                }
            })
        } 
    });
    </script>
</body>

4.2 停止动画

$("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
    width: 300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)
//stop()：只会停止第一个动画，第二个第三个继续
//stop(true)：停止第一个、第二个和第三个动画
//stop(true ture)：停止动画，直接跳到第一个动画的最终状态 

//代码示例
<body>
    <h2>stop</h2>
    <p>慕课网,专注分享</p>
    <div id="aaron">内部动画</div>
    <input id="exec" type="button" value="执行动画"><br /><br />

    点击观察动画效果：
    <select id="animation">
        <option value="1">stop()</option>
        <option value="2">stop(true)</option>
        <option value="3">stop(true,true)</option>
    </select>
    <a></a>
    <input id="stop" type="button" value="停止动画">
    <script type="text/javascript">

    //点击执行动画
    $("#exec").click(function(){
        $("#aaron").animate({
            height: 300
        }, 5000)
        $("#aaron").animate({
            width: 300
        }, 5000)
        $("#aaron").animate({
            opacity: 0.6
        }, 2000)
    })


    $("#stop").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            //当前当前动画
            $aaron.stop()
        } else if (v == "2") {
            //停止所以队列
            $aaron.stop(true)
        } else if (v == "3") {
            //停止动画，直接跳到当前动画的结束
            $aaron.stop(true,true)
        } 
    });
    </script>
</body>