jQuery基础知识

[CruxF]

前言

本篇博文是记录jQuery的基础知识，根据慕课网的教程整理而成。还有，为了优化大家的阅读体验，强烈建议先安装Chrome浏览器的插件——GayHub。下载安装地址

jQuery样式篇

第一个例子

不多说，这是我们踏入编程界输出的第一句话，下面贴上代码（默认导入jQuery源文件）：

<div></div>
<script>
  $(document).ready(function () {
    $("div").html("hello world");
  })
</script>

【代码解析】
$(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。

jQuery对象与DOM对象

jQuery对象与DOM对象是不一样的，大概就是：jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。具体有以下区别：
（1）通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
（2）通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。

jQuery对象与DOM对象之间的转换

（1）jQuery => DOM

第一种方式
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

第二种方式
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

（2）DOM => jQuery

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

jQuery选择器

（1）ID选择器：$( "#id" )
（2）类选择器：$( ".class" )
（3）元素选择器：$( "element" )
（4）全选择器：$( "*" )
（5）层级选择器

• $("parent > child")：子选择器，选择所有指定"parent"元素中指定的"child"的直接子元素；
• $("anestor descendant")：后代选择器，选择给定的祖先元素的所有后代元素，一个元素的后代可能是该元素的一个孩子、孙子、曾孙等；
• $("prev + next")：相邻兄弟选择器，选择所有紧接在"prev"元素后的"next"元素；
• $("prev ~ siblings")：一般选择器，匹配"prev"元素之后的所有兄弟元素，具有相同的父元素，并匹配过滤"siblings"选择器。

（6）基本筛选选择器

• $(":first")：匹配第一个元素；
• $(":last")：匹配最后一个元素；
• $(":header")：选择所有的标题元素，像h1、h2等；
• $(":root")：选择该文档的根元素；
• $(":animated")：选择所有正在执行动画效果的元素；
• $(":not(selector)")：一个用来过滤的选择器，选择所有元素去除不匹配给定的选择器元素；
• $(":eq(index)")：在匹配的集合中选择索引值为index的元素；
• $(":gt(index)")：在匹配的集合中所有大于给定index(索引值)的元素；
• $(":lt(index)")：在匹配的集合中所有小于给定index(索引值)的元素；
• $(":even")：选择索引值为偶数的元素，从0开始计数；
• $(":odd")：选择索引值为奇数的元素，从0开始计数；
• $(":lang(language)")：选择指定语言的所有元素；

（7）内容筛选选择器

• $(":contains(text)")：选择所有包含指定文本的元素；
• $(":parent")：选择所有含有子元素或者文本的元素；
• $(":empty")：选择所有没有子元素的元素，包含文本节点；
• $(":has(selector)")：选择元素中至少包含指定选择器的元素；

（8）可见性筛选选择器

• $(":visible")：选择所有显示的元素；
• $(":hidden")：选择所有隐藏的元素；

（9）属性筛选选择器

（10）子元素筛选选择器

（11）表单元素选择器

（12）表单对象属性筛选选择器

（13）特殊选择器this

• this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者。在JavaScript中this是动态的，也就是说这个上下文对象都是可以被动态改变的(可以通过call,apply等方法)。
• 总结1：this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
• 总结2：$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。

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

jQuery中attr()和removeAttr()

（1）jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()

• attr(传入属性名)：获取属性的值

//找到第二个input，通过attr获取属性value的值
$("input:eq(1)").attr('value')

• attr(属性名, 属性值)：设置属性的值

//找到第一个input，通过attr设置属性value的值
$("input:first").attr('value', '.attr( attributeName, value )')

• attr(属性名,函数值)：设置属性的函数值

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

（2）removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

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

jQuery中html()和text()

（1）html()方法：获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法

• html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
• html( htmlString ) 设置每一个匹配元素的html内容

<div class="left first-div">
  <div class="box">
    <a>:first-child</a>
    <a>第二个元素</a>
    <a>:last-child</a>
  </div>
</div>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
	$(document).ready(function(){
		$(".box a:first").html("替换元素");
	})
</script>

• html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
• 【注意】：html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）

（2）text()方法：得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容，具体有3种用法：

• text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代；
• text( textString ) 用于设置匹配元素内容的文本；
• text( function(index, text) ) 用来返回设置文本内容的一个函数；
• 【注意】text()结果返回一个字符串，包含所有匹配元素的合并文本

（3）html()和text()的异同

• .html与.text的方法操作是一样，只是在具体针对处理对象不同；
• .html处理的是元素内容，.text处理的是文本内容；
• .html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用；
• 如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的
• 火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器

jQuery中的val()方法

jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea：

• val()无参数，获取匹配的元素集合中第一个元素的当前值；
• val( value )，设置匹配的元素集合中每个元素的值；
• val( function ) ，一个用来返回设置值的函数。

jQuery中的addClass()方法

jQuery增加了一个.addClass()方法，用于动态增加class类名：

• addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名；
• addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名；
• 【注意事项】.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上。

jQuery中的removeClass()方法

jQuery通过.addClass()方法可以很便捷的增加样式。如果需要样式之间的切换，同样jQuery提供了一个很方便的.removeClass()，它的作用是从匹配的元素中删除全部或者指定的class：

• removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名；
• removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名

jQuery中的toggleClass()方法

jQuery通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass：

• toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名；
• toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除；
• toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值；
• toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数，接收元素的索引位置和元素旧的样式类作为参数。

jQuery中的css()方法

在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了:

• css(propertyName, value )：设置CSS属性和值

//多种写法设置颜色
$('.fourth').css("background-color","red");
$('.fifth').css("backgroundColor","yellow");

• css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理

//获取到指定元素的宽度，在回调返回宽度值
//通过处理这个value，重新设置新的宽度
$('.sixth').css("width",function(index,value){
  value = value.split('px');
  return (Number(value[0])+50)+value[1];
})

• css( properties )：可以传一个对象，同时设置多个样式

//合并设置,通过对象传设置多个样式
$('.seventh').css({
  "font-size":"15px",
  "border":"1px solid red"
})

jQuery DOM篇

JavaScript创建DOM

（1）创建流程如下

• 创建节点(常见的：元素、属性和文本)；
• 添加节点的一些属性；
• 加入到文档中

（2）涉及到一些方法

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

（3）存在的问题

• 每一个元素节点都必须单独创建；
• 节点是属性需要单独设置，而且设置的接口不是很统一；
• 添加到指定的元素位置不灵活；
• 最后还有一个最重要的：浏览器兼容问题处理
  
  

jQuery节点创建与属性的处理

同时创建元素节点、文本节点、属性节点

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

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

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

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

before与after都是用来对相对选中元素外部增加相邻的兄弟节点。

$("#bt1").on('click', function () {
  //在匹配test1元素集合中的每个元素前面插入p元素
  $(".test1").before('<p>before,在匹配元素之前增加</p>', '<p>多参数</p>')
})
$("#bt2").on('click', function () {
  //在匹配test1元素集合中的每个元素后面插入p元素
  $(".test2").after('<p>after,在匹配元素之后增加</p>', '<p>多参数</p>')
})

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

在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo

这里总结下内部操作四个方法的区别：

• append()向每个匹配的元素内部追加内容
• prepend()向每个匹配的元素内部前置内容
• appendTo()把所有匹配的元素追加到另一个指定元素的集合中
• prependTo()把所有匹配的元素前置到另一个指定的元素集合中

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

与内部插入处理一样，jQuery由于内容目标的位置不同，然增加了2个新的方法insertAfter与insertBefore

• .before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面
• .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。 对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面
• before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理

DOM节点删除之empty()的基本用法

（1）empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了 指定元素中的所有子节点。
（2）如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中。

<div class="hello"><p>慕课网</p></div>
//通过empty处理
$('.hello').empty()

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

DOM节点删除之remove()的有参用法和无参用法

（1）remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
（2）为了防止"内存泄漏"，所以前端开发者一定要注意，绑了多少事件，不用的时候一定要记得销毁
（3）通过remove方法移除div及其内部所有元素，remove内部会自动操作事件销毁方法，所以使用使用起来非常简单

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

//通过remove处理
$('.hello').remove()
//结果：
<div class="hello"><p>慕课网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁

DOM节点删除之empty和remove区别

（1）要用到移除指定元素的时候，jQuery提供了empty()与remove([expr])二个方法，两个都是删除元素，但是两者还是有区别
（2）empty方法

• 严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
• empty不能删除自己本身这个节点
  （3）remove方法
• 该节点与该节点所包含的所有后代节点将同时被删除
• 提供传递一个筛选的表达式，删除指定合集中的元素

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

（1）如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理
（2）detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。

DOM节点删除之detach()和remove()区别

（1）remove：移除节点

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

DOM拷贝clone()

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

HTML部分
<div></div>

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

//clone处理一
$("div").clone()   //只克隆了结构，事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

（3）细节

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

DOM替换replaceWith()和replaceAll()

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

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

（2）.replaceAll( target ) ：用集合的匹配元素替换每个目标元素。.replaceAll()和.replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理
$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')
（3）总结

• .replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别
• .replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序
• .replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用
• .replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点

DOM包裹wrap()方法

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

<p>p元素</p>
$('p').wrap('<div></div>')
//最后结果
<div>
    <p>p元素</p>
</div>

（1）.wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

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

DOM包裹unwrap()方法

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

p元素

$('p').unwrap(); //最后结果

p元素

DOM包裹wrapAll()方法

（1）wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法
（2）.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构

<p>p元素</p>
<p>p元素</p>
$('p').wrapAll('<div></div>')
//最后结果
<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

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

<p>p元素</p>
<p>p元素</p>
$('p').wrapAll(function() {
    return '<div><div/>'; 
})
//最后结果
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

DOM包裹wrapInner()方法

（1）.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构

<div>p元素</div>
<div>p元素</div>
$('div').wrapInner('<p></p>')
//最后结果
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

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

<div>p元素</div>
<div>p元素</div>
$('div').wrapInner(function() {
    return '<p></p>'; 
})
//最后结果
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

jQuery遍历之children()方法

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

$("#bt1").click(function() {
  //找到所有class=div的元素节点，然后找到其对应的子元素，并且加上一个红色边框
  $('.div').children().css('border','3px solid red')
})

$("#bt2").click(function() {
  //找到所有class=div的元素
 //找到其对应的子元素，然后筛选出最后一个，给边宽加上颜色
 $('.div').children(':last').css('border', '3px solid blue')
})

jQuery遍历之find()方法

（1）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方法就可以快速的查找到了。

（2）.find()方法要注意的知识点：

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

（3）.find()和.children()方法是相似的

• .children只查找第一级的子节点
• .find查找范围包括子节点的所有后代节点

jQuery遍历之parent()方法

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

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>
查找ul的父元素div, $(ul).parent()，就是这样简单的表达

jQuery遍历之parents()方法

（1）jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用parents()方法，其实也类似find与children的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>
在li节点上找到祖 辈元素div， 这里可以用$("li").parents()方法

（2）注意事项：

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

jQuery遍历之closest()方法

（1）closest()方法接受一个匹配元素的选择器字符串，从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。例如：在div元素中，往上查找所有的li元素，可以这样表达
$("div").closet("li')
（2）注意事项：在使用的时候需要特别注意下，粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了

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

jQuery遍历之next()方法

（1）jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法

$("button:first").click(function() {
   $('.item-2').next().css('border','2px solid red')
})

jQuery遍历之prev()方法

（1）jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法
$("button:first").click(function() {
$('.item-2').prev().css('border','2px solid red')
})

jQuery遍历之siblings()

（1）jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素的同辈元素，此时可以用siblings()方法

//找到class=item-2的所有兄弟节点然后给每个li加上红色的边
$("button:first").click(function() {
   $('.item-2').siblings().css('border', '2px solid red')
})

$("button:last").click(function() {
    //找到class=item-2的所有兄弟节点
    //然后筛选出最后一个，加上蓝色的边
   $('.item-2').siblings(':last').css('border', '2px solid blue')
})

jQuery遍历之add()方法

（1）jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？jQuery为此提供add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中
（2）.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。
（3）操作方式：

<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()

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

$("button:first").click(function () {
  //遍历所有的li
  //修改每个li内的字体颜色
  $("li").each(function (index, element) {
    $(this).css('color', 'red')
  })
})

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

备注：index 索引；element是对应的li节点 li；this 指向的是li。

（2）三个重点

• each是一个for循环的包装迭代器
• each通过回调的方式处理，并且会有2个固定的实参，索引与元素
• each回调方法中的this指向当前迭代的dom元素

jQuery事件篇

jQuery鼠标事件之click与dbclick事件

（1）click方法用于监听用户单击操作：

<div id="test">点击触发<div>
$("ele").click(function(){
    alert('触发指定事件')
})
$("#test").click(function(){
     $("ele").click()  //手动指定触发事件 
});

（2）dbclick方法用于监听用户双击操作，dblclick()的用法和click()的用法是类似的。
（3）注意：在同一元素上同时绑定 click 和 dblclick 事件是不可取的。各个浏览器事件触发的顺序是不同的，一些浏览器在dblclick之前接受两个 click 事件 ，而一些浏览器只接受一个 click 事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度

jQuery鼠标事件之mousedown与mouseup事件

（1）用户交互操作中，最简单直接的操作就是点击操作，因此jQuery提供了一个mousedown的快捷方法可以监听用户鼠标按下的操作，与其对应的还有一个方法mouseup快捷方法可以监听用户鼠标弹起的操作
（2）mousedown事件触发需要以下几点：

• mousedown强调是按下触发
• 如果在一个元素按住了鼠标不放，并且拖动鼠标离开这个元素，并释放鼠标键，这仍然是算作mousedown事件
• 任何鼠标按钮被按下时都能触发mousedown事件
• 用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

（3）mouseup事件触发需要以下几点：

• mouseup强调是松手触发，与mousedown是相反的
• mouseup与mousedown组合起来就是click事件
• 如果用户在一个元素上按下鼠标按键，并且拖动鼠标离开这个元素，然后释放鼠标键，这仍然是算作mouseup事件
• 任何鼠标按钮松手时都能触发mouseup事件
• 用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

jQuery鼠标事件之mousemove事件

（1）用交互操作中，经常需要知道用户是否有移动的操作。基于移动的机制可以做出拖动、拖拽一系列的效果出来。针对移动事件，jQuery提供了一个mousemove的快捷方法可以监听用户移动的的操作
（2）mousemove事件触发需要以下几点：

• mousemove事件是当鼠标指针移动时触发的，即使是一个像素
• 如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题

jQuery鼠标事件之mouseover与mouseout事件

（1）jQuery当中同样提供了这样的事件来监听用户的移入移出操作，mouseover()与mouseout()事件，两者用法类似，下面一mouseover为例：
var n = 0;
//绑定一个mouseover事件
$(".aaron1 p:first").mouseover(function(e) {
$(".aaron1 a").html('进入元素内部,mouseover事件触发次数：' + (++n))
})

jQuery鼠标事件之mouseenter与mouseleave事件

（1）用交互操作中，经常需要知道用户操作鼠标是否有移到元素内部或是元素外部，因此jQuery提供了一个mouseenter和mouseleave的快捷方法可以监听用户移动到内部的操作
（2）mouseenter事件和mouseover的区别，关键点就是冒泡的方式处理问题。mouseover事件会层层向上冒泡，而mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发。

jQuery鼠标事件之hover事件

（1）在元素上移进移出切换其换色，一般通过2个事件配合就可以达到，这里用mouseenter与mouseleave，这样可以避免冒泡问题

$(ele).mouseenter(function(){
     $(this).css("background", '#bbffaa');
 })
$(ele).mouseleave(function(){
    $(this).css("background", 'red');
})

（2）这样目的是达到了，代码稍微有点多，对于这样的简单逻辑jQuery直接提供了一个hover方法，可以便捷处理，只需要在hover方法中传递2个回调函数就可以了，不需要显示的绑定2个事件

// hover()方法是同时绑定 mouseenter和 mouseleave事件。
// 我们可以用它来简单地应用在 鼠标在元素上行为
$("p").hover(
   function() {
       $(this).css("background", 'red');
      },
     function() {
         $(this).css("background", '#bbffaa');
     }
);

jQuery鼠标事件之focusin事件

（1）当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件

//input聚焦
//给input元素增加一个边框
  $("input:first").focusin(function() {
       $(this).css('border','2px solid red')
})

//不同函数传递数据
function fn(e) {
   $(this).val(e.data)
}
function a() {
   $("input:last").focusin('慕课网', fn)
}
a();

jQuery鼠标事件之focusout事件

（1）当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，jQuery提供了一个focusout事件

//input失去焦点
//给input元素增加一个边框
  $("input:first").focusout(function() {
       $(this).css('border','2px solid red')
})

//不同函数传递数据
function fn(e) {
   $(this).val(e.data)
}
function a() {
   $("input:last").focusout('慕课网', fn)
}
a();

jQuery表单事件之blur与focus事件

（1）同样用于处理表单焦点的事件还有blur与focus事件，它们之间的本质区别：是否支持冒泡处理。

$(".aaron").focus(function() {
    $(this).css('border', '2px solid red')
})
$(".aaron1").focusin(function() {
   $(this).find('input').val('冒泡捕获了focusin事件')
})

$(".aaron3").blur(function() {
   $(this).css('border', '2px solid red')
})
$(".aaron4").focusout(function() {
   $(this).find('input').val('冒泡捕获了focusout事件')
})

jQuery表单事件之change事件

（1）input元素，textarea和select元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作

//监听input值的改变
$('.target1').change(function (e) {
  $("#result").html(e.target.value)
});

//监听select：
$(".target2").change(function (e) {
  $("#result").html(e.target.value)
})

//监听textarea：
$(".target3").change(function (e) {
  $("#result").html(e.target.value)
})

jQuery表单事件之select事件

（1）当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
（2）这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
（3）select事件只能用于input元素与textarea元素

//监听input元素中value的选中
//触发元素的select事件
$("input").select(function (e) {
  alert(e.target.value)
})
$("#bt1").click(function () {
  $("input").select();
})

//监听textarea元素中value的选中
$('textarea').select(function (e) {
  alert(e.target.value);
});

jQuery表单事件之submit事件

（1）提交表单是一个最常见的业务需求，比如用户注册，一些信息的输入都是需要表单的提交。同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作（例如：验证表单输入的正确性，如果错误就阻止提交，从新输入）此时可以通过submit事件，监听下提交表单的这个动作。

//回车键或者点击提交表单
$('#target1').submit(function (e) {
  alert('捕获提交表达动作,不阻止页面跳转')
});

（2）注意：form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为，传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可。

//回车键或者点击提交表单,禁止浏览器默认跳转：
$('#target2').submit(function () {
  alert('捕获提交表达动作,阻止页面跳转')
  return false;
});

jQuery键盘事件之keydown()与keyup()事件

（1）鼠标有mousedown,mouseup之类的事件，这是根据人的手势动作分解的2个触发行为。相对应的键盘也有这类事件，将用户行为分解成2个动作，键盘按下与松手，针对这样的2种动作，jQuery分别提供了对应keydown与keyup方法来监听

//监听键盘按键
//获取输入的值
$('.target1').keydown(function (e) {
  $("em:first").text(e.target.value)
});

//监听键盘按键
//获取输入的值
$('.target2').keyup(function (e) {
  $("em:last").text(e.target.value)
});

（2）注意：

• keydown是在键盘按下就会触发
• keyup是在键盘松手就会触发
• 理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。

jQuery键盘事件之keypress()事件

（1）在input元素上绑定keydown事件会发现一个问题：每次获取的内容都是之前输入的，当前输入的获取不到
（2）keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本
（3）keypress事件与keydown和keyup的主要区别：

• 只能捕获单个字符，不能捕获组合键
• 无法响应系统功能键（如delete，backspace）
• 不区分小键盘和主键盘的数字字符

（4）总结：
KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

on()的多事件绑定

（1）之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。
（2）最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同，最大的不同点就是on是可以自定义事件名。

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

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

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){}
});

on()的高级用法

（1）针对自己处理机制中，不仅有on方法，还有根据on演变出来的live方法(1.7后去掉了)，delegate方法等等。这些方法的底层实现部分 还是on方法，这是利用了on的另一个事件机制委托的机制衍变而来的

<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>

卸载事件off()方法

（1）根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除。

var n = 0;
//绑定事件
$(".aaron:first").on('mousedown mouseup', function (e) {
  $(this).text('触发类型:' + (e.type) + ",次数" + ++n)
    ++n;
})
//删除事件
$("button:first").click(function () {
  $(".aaron:first").off('mousedown')
})

var n = 0;
//绑定事件
$(".aaron:last").on('mousedown mouseup', function (e) {
  $(this).text('触发类型:' + (e.type) + ",次数" + ++n)
    ++n;
})
//删除事件
$("button:last").click(function () {
  $(".aaron:last").off()
})

jQuery事件对象的作用

（1）在不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异。jQuery根据 W3C 标准规范了事件对象，所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象。

<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>

（2）事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁。
（3）event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素

jQuery事件对象的属性和方法

（1）event.type：获取事件的类型

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

（2）event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
（3）event.preventDefault() 方法：阻止默认行为
（4）event.stopPropagation() 方法：阻止事件冒泡
（5）event.which：获取在鼠标单击时，单击的是鼠标的哪个键
（6）event.currentTarget : 在事件冒泡过程中的当前DOM元素，冒泡前的当前触发事件的DOM对象, 等同于this。
（7）this和event.target的区别：

• js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素
• this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象，比如this和$(this)的使用、event.target和$(event.target)的使用。

jQuery自定义事件之trigger事件

（1）众所周知类似于mousedown、click、keydown等等这类型的事件都是浏览器提供的，通俗叫原生事件，这类型的事件是需要有交互行为才能被触发。
（2）.trigger事件简单来讲就是：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

<h2>自定义事件trigger</h2>
<div class="left">
  <div><span></span><span>0</span>点击次数</div>
  <button>直接点击</button>
  <button>通过自定义点击</button>
</div>
<script type="text/javascript">
  //点击更新次数
  $("button:first").click(function (event, bottonName) {
    bottonName = bottonName || 'first';
    update($("span:first"), $("span:last"), bottonName);
  });

  //通过自定义事件调用，更新次数
  $("button:last").click(function () {
    $("button:first").trigger('click', 'last');
  });

  function update(first, last, bottonName) {
    first.text(bottonName);
    var n = parseInt(last.text(), 10);
    last.text(n + 1);
  }
</script>

（2）更多详情

jQuery自定义事件之triggerHandler事件

（1）trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡
（2）trigger事件是具有触发原生与自定义能力的，但是存在一个不可避免的问题： 事件对象event无法完美的实现，毕竟一个是浏览器给的，一个是自己模拟的。尽管 .trigger() 模拟事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替
（3）triggerHandler与trigger的用法是一样的，重点看不同之处：

• triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
• .trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
• 使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
• 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined

jQuery动画篇

jQuery中隐藏元素的hide方法

（1）让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局，如果在代码执行的时候，一般是通过js控制元素的style属性，这里jQuery提供了一个快捷的方法.hide()来达到这个效果

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

（2）当提供hide方法一个参数时，.hide()就会成为一个动画方法。.hide()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作

<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>

（3）注意：jQuery在做hide操作的时候，是会保存本身的元素的原始属性值，再之后通过对应的方法还原的时候还是初始值。比如一个元素的display属性值为inline，那么隐藏再显示时，这个元素将再次显示inline。一旦透明度 达到0，display样式属性将被设置为none，这个元素将不再在页面中影响布局

jQuery中显示元素的show方法

（1）css中有display:none属性，同时也有display:block，所以jQuery同样提供了与hide相反的show方法，方法的使用几乎与hide是一致的，hide是让元素显示到隐藏，show则是相反，让元素从隐藏到显示

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

（2）注意：

• show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置
• 如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css('display', 'block !important')重写样式
• 如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度

jQuery中显示与隐藏切换toggle方法

（1）show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换，通常情况是需要先判断元素的display状态，然后调用其对应的处理方法。比如显示的元素，那么就要调用hide，反之亦然。 对于这样的操作行为，jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素

<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>

jQuery中下拉动画slideDown

（1）.slideDown()：用滑动动画显示一个匹配元素，将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式

<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>

（2）注意事项：

• 下拉动画是从无到有，所以一开始元素是需要先隐藏起来的，可以设置display:none
• 如果提供回调函数参数，callback会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。这个回调函数不设置任何参数，但是 this会设成将要执行动画的那个DOM元素，如果多个元素一起做动画效果，那么要非常注意，回调函数会在每一个元素执行完动画后都执行一次，而不是这组 动画整体才执行一次

jQuery中上卷动画slideUp

（1）对于显示的元素，在将其隐藏的过程中，可以对其进行一些变化的动画效果。之前学过了hide方法，hide方法在显示的过程中也可以有动画，但 是.hide()方法将为匹配元素的宽度，高度，以及不透明度，同时进行动画操作。这里将要学习一个新的显示方法slideUp方法
（2）因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面，这里要特别注意

<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>

jQuery中上卷下拉切换slideToggle

（1）slideDown与slideUp是一对相反的方法。需要对元素进行上下拉卷效果的切换，jQuery提供了一个便捷方法slideToggle用滑动动画显示或隐藏一个匹配元素

<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>

jQuery中淡出动画fadeOut

（1）fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果

<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>
<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>

jQuery中淡入动画fadeIn

（1）fadeOut是淡出效果，相反的还有淡入效果fadeIn,方法使用上两者都是一致的，只是结果相反
（2）注意

• 淡入的动画原理：操作元素的不透明度从0%逐渐增加到100%
• 如果元素本身是可见的，不对其作任何改变。如果元素是隐藏的，则使其可见

jQuery中淡入淡出切换fadeToggle

（1）fadeToggle()函数用于切换所有匹配的元素，并带有淡入/淡出的过渡动画效果。之前也学过toggle、slideToggle 也是类似的处理方式
（2）fadeToggle切换fadeOut与fadeIn效果，所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)。

jQuery中淡入效果fadeTo

（1）淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性，但是他们都有个共同的特点，变化的区间要么是0，要么是1
（2）jQuery提供了fadeTo方法，可以设置透明度的数值

<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>

jQuery中toggle与slideToggle以及fadeToggle的比较

（1）toggle、sildeToggle以及fadeToggle的区别

• toggle：切换显示与隐藏效果
• sildeToggle：切换上下拉卷滚效果
• fadeToggle：切换淡入淡出效果

（2）toggle与slideToggle细节区别

• toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性
• slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

（3）fadeToggle方法

• fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
• 元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。
• 元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。
• 注释：隐藏的元素不会被完全显示（不再影响页面的布局）

jQuery中动画animate(上)

（1）有些复杂的动画通过之前学到的几个动画函数是不能够实现，这时候就需要强大的animate方法了，操作一个元素执行3秒的淡入动画，对比一下2组动画设置的区别

$(elem).fadeOut(3000)  
$(elem).animate({   
    opacity:0
},3000)

（2）.animate()方法允许我们在任意的数值的CSS属性上创建动画。

<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>

jQuery中动画animate(下)

（1）animate在执行动画中，如果需要观察动画的一些执行情况，或者在动画进行中的某一时刻进行一些其他处理，我们可以通过animate提供的第二种设置语法，传递一个对象参数，可以拿到动画执行状态一些通知
（2）语法：.animate( properties, options )，options参数

• duration - 设置动画执行的时间
• easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
• step：规定每个动画的每一步完成之后要执行的函数
• progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
• complete：动画完成回调

jQuery中停止动画stop

（1）动画在执行过程中是允许被暂停的，当一个元素调用.stop()方法，当前正在运行的动画（如果有的话）立即停止
（2）语法：

.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

• .stop(); 停止当前动画，点击在暂停处继续开始
• .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
• .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

<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>

jQuery中each方法的应用

（1）jQuery提供了一个通用的jQuery.each方法，用来处理对象和数组的遍历
（2）each就是for循环方法的一个包装，内部就是通过for遍历数组与对象，通过回调函数返回内部迭代的一些参数，第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数)，第二个参数是当前迭代成员(与this的引用相同

<h2>each方法</h2>
<p>慕课网,专注分享</p>
<div id="aaron"></div>
点击观察结果：
<select id="animation">
  <option value="1">each数组</option>
  <option value="2">each对象</option>
</select>
<input id="exec" type="button" value="执行动画">
<script type="text/javascript">
  $("#exec").click(function () {
    var v = $("#animation").val();
    var $aaron = $("#aaron");
    $aaron.empty();
    if (v == "1") {
      // 遍历数组元素
      $.each(['Aaron', '慕课网'], function (i, item) {
        $aaron.append("索引=" + i + "; 元素=" + item);
      });
    } else if (v == "2") {
      // 遍历对象属性
      $.each({
        name: "张三",
        age: 18
      }, function (property, value) {
        $aaron.append("属性名=" + property + "; 属性值=" + value);
      });
    }
  });
</script>

jQuery中查找数组中的索引inArray

（1）jQuery封装了inArray()函数判断元素是否存在数组中。注意了：在ECMAScript5已经有数据的indexOf方法支持了，但是jQuery保持了版本向下兼容，所以封装了一个inArray方法
（2）jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。
$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引：4

jQuery中去空格神器trim方法

（1）jQuery.trim()函数用于去除字符串两端的空白字符，这个函数很简单，没有多余的参数用法

$("#exec1").click(function () {
  alert("值的长度：" + $("#results1").val().length)
});

$("#exec2").click(function () {
  alert("值的长度：" + $.trim($("#results2").val()).length)
});

（2）注意：

• 移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）
• 如果这些空白字符在字符串中间时，它们将被保留，不会被移除

jQuery中DOM元素的获取get方法

（1）jQuery是一个合集对象，如果需要单独操作合集中的的某一个元素，可以通过.get()方法获取到，比如第二个a元素的查找： $(a).get(1)
（2）注意

• get方法是获取的dom对象，也就是通过document.getElementById获取的对象
• get方法是从0开始索引

（3）get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1，同样是找到第二个元素，可以传递$(a).get(-2)

jQuery中DOM元素的获取index方法

（1）get方法是通过已知的索引在合集中找到对应的元素。如果反过来，已知元素如何在合集中找到对应的索引呢？.index()方法，从匹配的元素中搜索给定元素的索引值，从0开始计数。
（2）要点

• 如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
• 如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置
• 如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1

<h2>index方法</h2>
<ul>
  <a></a>
  <a></a>
  <li id="test1">1</li>
  <li id="test2">2</li>
  <li id="test3">3</li>
</ul>
<ul>
  <li id="test4">4</li>
  <li id="test5">5</li>
  <li id="test6">6</li>
</ul>
<select id="animation">
  <option value="1">index无参数</option>
  <option value="2">index传递dom</option>
  <option value="3">index传递jQuery对象</option>
</select>
<input id="exec" type="button" value="点击执行">
索引结果：
<span></span>
<script type="text/javascript">
  $("#exec").click(function () {
    var v = $("#animation").val();
    var $span = $("span");
    $span.empty();
    if (v == "1") {
      //找到第一个li的同辈节点中的索引位置
      $span.text($("li").index())
    } else if (v == "2") {
      //通过传递dom查找
      $span.text($("li").index(document.getElementById("test5")))
    } else if (v == "3") {
      //通过传递jQuery对象查找
      $span.text($("li").index($("#test6")))
    }
  });
</script>

jQuery的Ajax应用与常用插件

使用load()方法异步请求数据

（1）使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：load(url,[data],[callback])。参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

$(function () {
  $("#btnShow").bind("click", function () {
    var $this = $(this);
    $("ul")
      .html("<img src='PSD/img/demo1.png' alt=''/>")
      .load("http://www.imooc.com/data/fruit_part.html", function () {
        $this.attr("disabled", "true");
      });
  })
});

使用getJSON()方法异步加载JSON格式数据

（1）使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中，它的调用格式为：jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])，其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

<div id="divtest">
  <div class="title">
    <span class="fl">我最喜欢的一项运动</span>
    <span class="fr">
      <input id="btnShow" type="button" value="加载" />
    </span>
  </div>
  <ul></ul>
</div>

<script type="text/javascript">
  $(function () {
    $("#btnShow").bind("click", function () {
      var $this = $(this);
      $.getJSON("demo.json", function (data) {
        $this.attr("disabled", "true");
        $.each(data, function (index, sport) {
          if (index == 3)
            $("ul").append("<li>" + sport["name"] + "</li>");
        });

      });
    });
  });
</script>

（2）demo.json文件源码

[
  {
    "name": "足球"
  },
  {
    "name": "散步"
  },
  {
    "name": "篮球"
  },
  {
    "name": "乒乓球"
  },
  {
    "name": "骑自行车"
  }
]

使用getScript()方法异步加载并执行js文件

（1）使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示：jQuery.getScript(url,[callback])或$.getScript(url,[callback])。参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

$(function () {
  $("#btnShow").bind("click", function () {
    var $this = $(this);
    $.getScript('http://www.imooc.com/data/sport_f.js', function () {
      $this.attr("disabled", "true");
    });
  })
});

使用get()方法以GET方式从服务器获取数据

（1）使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：$.get(url,[callback])

$(function () {
  $("#btnShow").bind("click", function () {
    var $this = $(this);
    $.get("demo.json", function (data) {
      $this.attr("disabled", "true");
      $("ul").append("<li>我的名字叫：" + data.name + "</li>");
      $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
    }, "json");
  })
});

使用post()方法以POST方式从服务器发送数据

（1）与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：$.post(url,[data],[callback])。参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后执行的回调函数。

$(function () {
  $("#btnCheck").bind("click", function () {
    $.post("demo.php", {
        num: $("#txtNumber").val()
      },
      function (data) {
        $("ul").append("<li>你输入的<b>  " +
          $("#txtNumber").val() + " </b>是<b> " +
          data + " </b></li>");
      });
  })
});

使用serialize()方法序列化表单元素值

（1）使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：$(selector).serialize()。其中selector参数是一个或多个表单中的元素或表单元素本身

<div id="divtest">
  <div class="title">
    <span class="fl">我的个人资料</span>
    <span class="fr">
      <input id="btnAction" type="button" value="序列化" />
    </span>
  </div>
  <form action="">
    <ul>
      <li>姓名：<input name="Text1" type="text" size="12" /></li>
      <li>
        <select name="Select1">
          <option value="0">男</option>
          <option value="1">女</option>
        </select>
      </li>
      <li><input name="Checkbox1" type="checkbox" />资料是否可见 </li>
      <li id="litest"></li>
    </ul>
  </form>
</div>

<script type="text/javascript">
  $(function () {
    $("#btnAction").bind("click", function () {
      $("#litest").html($("form").serialize());
    })
  })
</script>

使用ajax()方法加载服务器数据

（1）使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下：jQuery.ajax([settings])或$.ajax([settings])
其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。

<div id="divtest">
  <div class="title">
    <span class="fl">加载一段文字</span>
    <span class="fr">
			<input type="button" id="btnShow" value="加载" />
		</span>
  </div>
  <ul></ul>
</div>

<script>
  $(function () {
    $("#btnShow").bind("click", function () {
      var that = $(this);
      $.ajax({
        type: "get",
        url: "demo.txt",
        dataType: "text",
        success: function (data) {
          that.attr("disabled", "true");
          $("ul").append(data);
        }
      });
    })
  })
</script>

使用ajaxSetup()方法设置全局Ajax默认选项

（1）使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为：jQuery.ajaxSetup([options])或$.ajaxSetup([options])。可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。

<div id="divtest">
  <div class="title">
    <span class="fl">加载一段文字</span>
    <span class="fr">
			<input type="button" id="btnShow01" value="加载1" />
			<input type="button" id="btnShow02" value="加载2" />
		</span>
  </div>
  <ul></ul>
</div>

<script>
  $(function () {
    $.ajaxSetup({
      dataType: "text",
      success: function (data) {
        $("ul").empty().append(data);
      }
    });
    $("#btnShow01").bind("click", function () {
      $.ajax({
        type: "get",
        url: "demo.txt",
        async: true
      });
    });
    $("#btnShow02").bind("click", function () {
      $.ajax({
        type: "get",
        url: "demo1.txt",
        async: true
      });
    })
  })
</script>

使用ajaxStart()和ajaxStop()方法

（1）ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：$(selector).ajaxStart(function())和$(selector).ajaxStop(function())。其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数。

<div id="divtest">
  <div class="title">
    <span class="fl">加载一段文字</span>
    <span class="fr">
      <input id="btnShow" type="button" value="加载" />
    </span>
  </div>
  <ul>
    <li id="divload"></li>
  </ul>
</div>

<script type="text/javascript">
  $(function () {
    $('#divload').ajaxStart(function () {
      $(this).html("正在请求数据...");
    });
    $('#divload').ajaxStop(function () {
      $(this).html("数据请求完成！");
    });
    $("#btnShow").bind("click", function () {
      var $this = $(this);
      $.ajax({
        url: "demo.json",
        dataType: "json",
        success: function (data) {
          $this.attr("disabled", "true");
          $("ul").append("<li>我的名字叫：" + data.name + "</li>");
          $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
        }
      });
    })
  });
</script>

[LoverFancy]

你好！请问是用md编辑的文章吗？

[CruxF]

@LoverFancy 咦，貌似github自带编辑器就是遵循md语法规则的啊