第一章 认识jQuery
jQuery 能做什么
1. 取得文档中的元素
$('div.content').find('p');
2. 修改页面的外观
CSS虽然为影响文档呈现的方式提供了一种强大的手段，但当所有浏览器不完全支持相同的标准时， 单纯使用CSS就会显得力不从心。 jQuery可以弥补这一不足，它提供了跨浏览器的标准解决方案。而且，即使在页面已经呈现之后，jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。
$('ul > li:first').addClass('active');
3. 改变文档的内容
可以改变文本、插入或翻转图像、列表重新排序，甚至对HTML文档的整个结构都能重写和扩充.
$('#container').append('<a href="more.html">more</a>');
4. 相应用户的交互操作
jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。此外，它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。
$('button.show-details').click(function(){
$('div.details').show();
});
5. 为页面添加动态效果
jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。
$('div:details').slideDown();
6. Ajax
无需刷新页面从服务器获取信息。
$('div.details').load('more.html #content');
7. 简化常见的JavaScript任务。
jQuery也改进了对基本的JavaScript数据结构的操作（例如迭代和数组操作等） 。
$.each(obj, function(key, value) {
total += value;
});
jQuery 的优势
1. 利用CSS的优势。
通过将查找页面元素的机制构建于CSS选择符之上， jQuery继承了简明清晰地表达文档结构的方式。
2. 支持扩展
为了避免特性蠕变（feature creep），jQuery将特殊情况下使用的工具归入插件当中。
3. 抽象浏览器不一致性
每种浏览器对颁布的标准都有自己的一套不太一致的实现方案，但jQuery添加一个抽象层来标准化常见的任务，从而有效地减少了代码量，同时，也极大地简化了这些任务。
4. 总是面向集合
当我们指示jQuery『找到带有 collapsible 类的全部元素，然后隐藏它们』时，不需要循环遍历每一个返回的元素。相反，.hide()之类的方法被设计成自动操作对象集合，而不是单独的对象。利用这种称作隐式迭代（implicit iteration）的技术，就可以抛弃那些臃肿的循环结构，从而大幅地减少代码量。
5. 将多重操作集于一行
将多重操作集于一行。为了避免过度使用临时变量或不必要的代码重复，jQuery在其多数方法中采用了一种称作连缀（chaining） 的编程模式。这种模式意味着基于一个对象进行的多数操作的结果，都会返回这个对象自身，以便为该对象应用下一次操作。
使用jQuery
- jQuery不需要安装，要使用它只需该文件的一个副本，该副本可以放在外部站点上，也可以放在自己的服务器上。由于JavaScript是一种解释型语言，所以不必担心编译和构建。什么时候需要使用jQuery，只要在HTML文档中使用
<script>元素把它导入进来即可。 - jQuery官方网站（http://jquery.com/）。
- 很多公司都通过自己的CDN（Content Delivery Networks，内容分发网络）来托管其库文件，让开发人员能更方便地使用它。托管在CDN上的文件由于分布式和缓存的原因有速度优势
- jQuery从2.0版开始不再支持IE6、IE7和IE8。
an example
$(document).ready(function(){
$('div.poem-stanza').addClass('highlight');
});
.highlight {
background-color: #ccc;
border: 1px solid #888;
font-style: italic;
margin: 0.5em 0;
padding: 0.5em;
}
$(document).ready()为我们提供了很好的跨浏览器解决方案，涉及如下功能：
- 尽可能使用浏览器原生的DOM就绪实现，并以
window.onload事件处理程序作为后备； - 可以多次调用
$(document).ready()并按照调用它们的顺序执行； - 即便是在浏览器事件发生之后把函数传给
$(document).ready()，这些函数也会执行； - 异步处理事件的预定，必要时脚本可以延迟执行；
- 通过重复检查一个几乎与DOM同时可用的方法，在较早版本的浏览器中模拟DOM就绪事件。
第二章 样式篇
jQuery 和 DOM 对象的转化
jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。
jQuery对象转化为DOM
1. 利用数组下标的方式读取到jQuery中的DOM对象。
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
注意：数组的索引是从0开始的，也就是第一个元素下标是0
2. 通过jQuery自带的get()方法
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
DOM 对象转换为 jQuery
如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色
jQuery 选择器
1. 基本选择器
选 择 符| CSS |jQuery |说 明
标签名| P {name='a'}| $('p') |取得文档中 name=a 所有的段落
ID| #some-id {} |$('#some-id') |取得文档中ID为 some-id 的一个元素
类 | .some-class {} |$('.some-class')| 取得文档中类为 some-class 的所有元素
全选择器| $( "*" )||取得所有元素
2. 层次选择器
选择器 | 描述
$("parent > child") | 子选择器，所有制定 parent 元素中指定的 child 的直接子元素
$("ancestor descendant") | 祖先的所有后代元素，包括孩子、孙子等
$("prev + next") | 选择所有紧接在 prev元素之后的 next 元素。
$("prev ~ siblings") | prev 元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤 siblings 选择器
$('#selected-plays > li').addClass('horizontal');
子元素选择符:>
$('#selected-plays > li').addClass('horizontal');
查找ID为selected-plays的元素（#selected-plays）的子元素（>）中所有的列表项（li）,注意只是儿子元素。
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
ID为selected-plays的元素（#selected-plays）的后代元素。没有horizontal类（:not(.horizontal)）。
3. 基本筛选选择器
选择器 | 描述
4. 内容选择器
选择器|描述
$(":contains(text)")|选择所有包含制定文本的元素
$(":parent")|选择所有含有子元素或者文本的元素
$(":empty")|选择所有没有子元素的元素(包含文本节点)
$(":has(selector)")|选择元素中至少包含制定选择器的元素
5. 可见性选择器
选择器|描述
$(":visible")|选择所有现实的元素
$(":hiddden")|选择所有隐藏的元素
:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等
隐藏元素的几种方法:
- CSS
display的值是none。 -
type="hidden"的表单元素。 - 宽度和高度都显式设置为0。
- 一个祖先元素是隐藏的，该元素是不会在页面上显示
- CSS
visibility的值是hidden - CSS
opacity的指是0
6. 属性选择器
属性选择器让你可以基于属性来定位一个元素。
属性选择符使用通配符语法：
- 以
~表示值在字符串的开始 - 以
$表示值在字符串的结尾 - 以
*表示匹配的值可以出现在字符串中的任意位置 - 以
!表示对值取反
eg
//查找所有div中，有属性p2的div元素
$('div[p2]').css("border", "3px groove blue");
//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
$('div[name|="-"]').css("border", "3px groove #00FF00");
//查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
$('div[name~="a"]').css("border", "3px groove #668B8B");
//查找所有div中，属性name的值是用imooc开头的
$('div[name^=imooc]').css("border", "3px groove red");
//查找所有div中，属性name的值是用imooc结尾的
$('div[name$=imooc]').css("border", "3px groove blue");
//查找所有div中，有属性name中的值包含一个test字符串的div元素
$('div[name*="test"]').css("border", "3px groove #00FF00");
//查找所有div中，有属性testattr中的值没有包含"true"的div
$('div[name!="true"]').css("border", "3px groove #668B8B");
// input属性中name包含2的按钮相应alert事件
$('input[name*="2"]').click(function(){
alert('success');
});
// 组合使用： href 属性即以 http 开头且任意位置包含 henry的所有链接添加一个 henrylink 类
$('a[href^="http"][href*="henry"]').addClass('henrylink');
7. 子元素选择器
注意
-
:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1) -
:last只匹配一个单独的元素，:last-child选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素 - 如果子元素只有一个的话，
:first-child与:last-child是同一个 -
:only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配 - jQuery实现
:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
nth-child(n)与:nth-last-child(n)的区别前者是从前往后计算，后者从后往前计算
8. 表单元素选择器
9. 表单对象属性选择器
注意:
- 选择器适用于复选框和单选框，对于下拉框元素, 使用
:selected选择器 - 在某些浏览器中，选择器:checked可能会错误选取到
<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素
每隔一行为表格添加样式
odd：偶数行
even：奇数行
$('tr:even').addClass('alt');
注意：当一个页面上存在另外一个表格的时候，第二个表格的样式就会错位。
改为$('tr:nth-child(odd)').addClass('alt');
注意：这次用的odd
基于表达你的选择符
:input：输入字段、文本区、选择列表和按钮元素
:button：按钮元素或type属性值为button的输入元素
:enabled：启用的表单元素
:disabled：禁用的表单元素
:checked：勾选的单选按钮或复选框
:selected：选择的选项元素
// 可以选择所有选中的单选按钮（而不是复选框）
$('input[type="radio"]:checked') ;
特殊选择器this
this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者
下面例子中，imooc是一个对象，拥有name属性与getName方法,在getName中this指向了所属的对象imooc
var imooc = {
name:"慕课网",
getName:function(){
//this,就是imooc对象
return this.name;
}
}
imooc.getName(); //慕课网
同样的在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 的属性与样式
1. .attr()与.removeAttr()
操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法。
在jQuery中用attr()与removeAttr()
-
attr(传入属性名)：获取属性的值 -
attr(属性名, 属性值)：设置属性的值 -
attr(属性名,函数值)：设置属性的函数值 -
attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … } -
.removeAttr( attributeName ): 为匹配的元素集合中的每个元素中移除一个属性（attribute）
2. html()和.text()
.html()方法
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容。
-
.html()不传入值，就是获取集合中第一个匹配元素的HTML内容 -
.html( htmlString )设置每一个匹配元素的html内容 -
.html( function(index, oldhtml) )用来返回设置HTML内容的一个函数
注意:.html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）
.test()方法
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。
-
.text()得到匹配元素集合中每个元素的合并文本，包括他们的后代。 -
.text( textString )用于设置匹配元素内容的文本。 -
.text( function(index, text) )用来返回设置文本内容的一个函数
注意:.text()结果返回一个字符串，包含所有匹配元素的合并文本。
3. .val()方法
jQuery的.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。
-
val()无参数，获取匹配的元素集合中第一个元素的当前值 -
.val( value )，设置匹配的元素集合中每个元素的值 -
.val( function )，一个用来返回设置值的函数
.html(),.text()和.val()的差异总结：
1 .html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签）。.text()用来读取元素的纯文本内容，包括其后代元素。.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
2 .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
3 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
4. .addClass() 和 .removeClass() 方法
1 .addClass() 通过动态改变类名（class），可以让其修改元素呈现出不同的效果。
-
.addClass( className ): 为每个匹配元素所要增加的一个或多个样式名 -
.addClass( function(index, currentClass) ): 这个函数返回一个或更多用空格隔开的要增加的样式名
注意:.addClass()方法不会删除原来样式类名。它只是添加一个样式类名到元素上。
2 .removeClass() 从匹配的元素中删除全部或者指定的class。
-
removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名 -
.removeClass( function(index, class) )： 一个函数，返回一个或多个将要被移除的样式名
5. .toggleClass() 方法
在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。
-
.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名 -
.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除 -
.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值 -
.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。
6. .css()
通过JavaScript获取dom元素上的style属性，我们可以动态的给元素赋予样式属性。
获取：
-
.css( propertyName )：获取匹配元素集合中的第一个元素的样式属性的计算值
2..css( propertyNames )：传递一组数组，返回一个对象结果
设置：
-
.css(propertyName, value )：设置CSS -
.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理 -
.css( properties )：可以传一个对象，同时设置多个样式
7. 元素的数据存储
jQuery提供的存储接口
jQuery.data( element, key, value ) //静态接口,存数据
jQuery.data( element, key ) //静态接口,取数据
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,存数据
2个方法在使用上存取都是通一个接口，传递元素，键值数据。在jQuery的官方文档中，建议用.data()方法来代替。
我们把DOM可以看作一个对象，那么我们往对象上是可以存在基本类型，引用类型的数据的，但是这里会引发一个问题，可能会存在循环引用的内存泄漏风险
通过jQuery提供的数据接口，就很好的处理了这个问题了，我们不需要关心它底层是如何实现，只需要按照对应的data方法使用就行了
同样的也提供2个对应的删除接口，使用上与data方法其实是一致的，只不过是一个是增加一个是删除罢了
jQuery.removeData( element [, name ] )
.removeData( [name ] )
第三章 DOM篇
1. DOM节点的创建
一些原生的方法
- 创建元素：document.createElement
- 设置属性：setAttribute
- 添加文本：innerHTML
- 加入文档：appendChild
jQuery节点创建与属性的处理
$("html结构")
2. DOM节点的插入
内部插入
-
append(content): 向每个匹配的元素内部追加内容。前面是被插入的对象，后面是要在对象内插入的元素内容 -
appendTo: 前面是要插入的元素内容，而后面是被插入的对象。 -
prepend: 向每个匹配的元素内部前置内容 -
prependTo: 把所有匹配的元素前置到另一个制定的集合中。
外部插入
-
.after(content): 在匹配中的每个元素后面插入参数所制定的内容，作为其兄弟节点。内容作为参数。 -
.before(content): 根据参数设定，在匹配元素的前面插入内容。内容作为参数。 -
insertBefore: 在目标元素前面插入集合中每个匹配的元素。内容在前面。 -
insertAfter: 在目标元素后面插入集合中每个匹配的元素。内容在前面。
注意点：
after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插
3. DOM节点的删除
empty()
移除 指定元素中的所有子节点。
<div class="hello"><p>Hello World</p></div>
// 如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中
// 通过empty处理
$('.hello').empty()
结果：
<p>慕课网</p>被移除
<div class="hello"></div>保留
remove
将元素内部及自身一块移除。
// 下面两个相同，删除包含3的p元素
$("p").remove(":contains('3')");
$("p").filter(":contains('3')").remove();
detach()
从当前页面中移除该元素，但保留这个元素的内存模型对象。
<p>P元素1，默认给绑定一个点击事件</p>
<p>P元素2，默认给绑定一个点击事件</p>
<button id="bt1">点击删除 p 元素</button>
<button id="bt2">点击移动 p 元素</button>
$('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);
});
3. jQuery 的复制和替换
clone()
-
$("div").clone(): 只克隆结构，事件丢失 -
$("div").clone(true): 结构、事件、数据都克隆
clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容
$(".aaron1").on('click', function() {
$(".left").append( $(this).clone().css('color','red') )
})
replaceWith()和replaceAll() 和 replaceAll()
功能相同，主要是目标和源的位置区别。
$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')
$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')
DOM包裹的方法
.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构
unwrap(): 将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
// 给p元素增加一个div包裹
$('p').wrap('<div></div>')
最后的结构，p元素增加了一个父div的结构
<div>
<p>p元素</p>
</div>
// 也可以通过函数回调的方法
$(".aaron2").on('click', function() {
//找到所有p元素，删除父容器div
$('a').unwrap(function() {
return '<div></div>';
})
})
wrapAll():给集合中匹配的元素增加一个外面包裹HTML结构
<p>p元素</p>
<p>p元素</p>
给所有p元素增加一个div包裹
$('p').wrapAll('<div></div>')
最后的结构，2个P元素都增加了一个父div的结构
<div>
<p>p元素</p>
<p>p元素</p>
</div>
.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构
<p>p元素</p>
<p>p元素</p>
给所有p元素增加一个div包裹
$('p').wrapInner('<div></div>')
最后的结构，匹配的p元素的内部元素被div给包裹了
<p>
<div>p元素</div>
</p>
<p>
<div>p元素</div>
</p>
4. jQuery 遍历
children方法
children(selector): 返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）
// 找到所有class=div的元素 ，找到其对应的子元素ul，然后筛选出最后一个，给边宽加上颜色。
$('.div').children(':last').css('border', '3px solid blue')
find()方法
find(): 快速查找DOM树中的这些元素的后代元素(所有后代关系)
注意:
- find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
-
.find()必需参数。如果需要实现对所有后代元素的取回，可以传递通配选择器*。 - find只在后代中遍历，不包括自己。
- 选择器 context 是由
.find()方法实现的；因此，$('.item-ii').find('li')等价于$('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。
$("li:last",".left").css("border","1px solid blue");
// 等价于
$(".left").find("li:last").css("border","1px solid blue");
parent()和parents()方法
parent(): 查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系）
parents(): 查找合集里面的每一个元素的所有祖辈元素
$('.item-a').parent(':last').css('border', '1px solid blue')
//找到当前元素的所有祖辈元素,筛选出class="first-div"的元素
//并且附上一个边
$('.item-b').parents('.first-div').css('border', '2px solid blue')
closest()方法
closest(): 从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素
$('.item-1').closest('.level-2').css('border','1px solid red');
parents()和.closest()的不同
- 起始位置不同：
.closest开始于当前元素，.parents开始于父元素 - 遍历的目标不同：
.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合 - 结果不同：
.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象
next()方法
next(): 快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合
//找到所有class=item-3的li
//然后筛选出第一个li，加上蓝色的边
$('.item-2').next(':first').css('border', '1px solid blue')
prev()方法
prev:查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合
siblings()方法
siblings: 快速查找指定元素集合中每一个元素的同辈元素
add()方法
add: 创建一个新的jQuery对象 ，元素添加到匹配的元素集合中
.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。
$('li').add('p'):遍历出li集合，再把p元素加到集合中。
each()方法
each是一个for循环的包装迭代器
each通过回调的方式处理，并且会有2个固定的实参，索引与元素
each回调方法中的this指向当前迭代的dom元素
// 开始迭代li，循环2次
$("li").each(function(index, element) {
index 索引 0,1
element是对应的li节点 li,li
this 指向的是li
})
$("button:last").click(function() {
//遍历所有的li
//修改偶数li内的字体颜色
$("li").each(function(index, element) {
if (index % 2) {
$(this).css('color','blue')
}
})
})
