温故而知新---jquery（jq）入门篇

1：jQuery简介：

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。今天，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
jQuery，顾名思义，也就是JavaScript和查询（Query），jQuery是免费、开源的。它可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。
jQuery优势：
1：体积小，使用灵巧（只需引入一个js文件）。
2：方便的选择页面元素（模仿CSS选择器更精确、灵活）。
3：动态更改页面样式/页面内容（操作DOM，动态添加、移除样式）。
4：控制响应事件（动态添加响应事件）。
5：提供基本网页特效（提供已封装的网页特效方法）。
6：快速实现通信（ajax）。
7：易扩展、插件丰富。
8：支持链式写法。
引入jQuery：
1：通过script引入本地jQuery文件。
2：通过引入CDN上面jQuery文件。
版本选择：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。
jQuery和$的关系：

2：选择器

ID选择器KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲box”); 类名选择器：(“.box”);
标签选择器：$(“div”);通配符选择器：$(“*”);
群组选择器：$(“div,p,a”);后代选择器：$(“#box p”);
:first：获取第一个元素。
:last：获取最后一个元素。
:even：匹配所有索引值为偶数的元素，从 0 开始计数。
:odd：匹配所有索引值为奇数的元素，从 0 开始计数。
:eq(index)：匹配一个给定索引值的元素，从 0 开始计数。
:not(selector)：去除所有与给定选择器匹配的元素。
:has(selector)：匹配含有选择器所匹配的元素的元素。

3：属性和CSS

操作属性：
attr(name|properties|key,value|fn)：设置或返回被选元素的属性值。
removeAttr(name)：从每一个匹配的元素中删除一个属性。
prop(name|properties|key,value|fn)：获取在匹配的元素集中的第一个元素的属性值。
removeProp(name)：用来删除由.prop()方法设置的属性集。
区别：attr可以操作（增删改查）自定义的节点属性，而prop不可以（增删改查）。attr和prop对input的disabled属性的返回值不一致，attr返回disabled或者undefined，而prop返回布尔值。

操作Class：
addClass(class|fn) ：为每个匹配的元素添加指定的类名。
removeClass([class|fn]) ：从所有匹配的元素中删除全部或者指定的类。
toggleClass(class|fn[,switch])：如果存在（不存在）就删除（添加）一个类。
操作内容：
html([val|fn])：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
text([val|fn])：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
val([val|fn|arr])：获得匹配元素的当前值。如果多选，将返回一个数组，其包含所选的值。
操作CSS：
css(name|pro|[,val|fn])：访问匹配元素的样式属性。
操作位置：
offset([coordinates])：获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。方法只对可见元素有效。
position()：获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
scrollTop([val])：获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。
scrollLeft([val])：获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。
操作尺寸：
height([val|fn])：取得匹配元素当前计算的高度值（px）。
width([val|fn])：取得第一个匹配元素当前计算的宽度值（px）。
innerHeight()：获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。
innerWidth()：获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。
outerHeight([options])：获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。
outerWidth([options])：获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。
注：设置options为true，计算margin在内。

4：过滤查找

过滤元素：
eq(index|-index)：获取第N个元素。这个元素的位置是从0算起，如果是负数，则从集合中的最后一个元素开始倒数。
first()：获取第一个元素。
last()：获取最后一个元素。
hasClass(class)：检查当前的元素是否含有某个特定的类，如果有，则返回true。
has(expr|ele)：保留包含特定后代的元素，去掉那些不含有指定后代的元素。
not(expr|ele|fn)：删除与指定表达式匹配的元素。

查找元素：
children([expr])：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。只考虑子元素而不考虑所有后代元素。
find(expr|obj|ele)：搜索所有与指定表达式匹配的后代元素。
parent([expr])：取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents([expr])：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
parentsUntil([expr|element][,filter])：查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。不包括那个选择器匹配到的元素。
offsetParent()：返回第一个匹配元素用于定位的父节点。
next([expr])：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
nextAll([expr])：查找当前元素之后所有的同辈元素。
nextUntil([exp|ele][,fil])：查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。不包括选择器匹配到的元素。
prev([expr])：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll([expr])：查找当前元素之前所有的同辈元素。
prevUntil([exp|ele][,fil])：查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
siblings([expr])：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
串联操作：
add(expr|ele|html|obj[,con])：把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。返回的结果将始终以元素在HTML文档中出现的顺序来排序，而不再是简单的添加。
end()：回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作

5：动画

show([speed, [easing], [callback]])：显示隐藏的匹配元素。
hide([speed, [easing], [callback]])：隐藏显示的元素。
toggle([speed, [easing], [callback]])：如果元素是可见的，切换为隐藏的，如果元素是隐藏的，切换为可见的。
speed：三种预定速度的字符串（slow、normal、fast）或者动画时长的毫秒数值。
easing：指定切换效果，默认是swing，可用linear。
callback：在动画完成时执行的函数，每个元素执行一次。
运动过程中：改变width、height、margin、padding、opacity属性值。

slideDown([speed, [easing], [callback]])：通过高度变化（向下增大）来动态的显示所有匹配的元素，显示完成后可选的触发一个回调函数。
slideUp([speed, [easing], [callback]])：通过高度变化（向上减小）来动态的隐藏所有匹配的元素，隐藏完成后可选的触发一个回调函数。
slideToggle([speed, [easing], [callback]])：通过高度变化来切换所有匹配元素的可见性，切换完成后可选的触发一个回调函数。
speed：三种预定速度的字符串（slow、normal、fast）或者动画时长的毫秒数值。
easing：指定切换效果，默认是swing，可用linear。
callback：在动画完成时执行的函数，每个元素执行一次。
运动过程中：改变height、margin-top、margin-bottom、padding-top、padding-bottom属性值。

fadeIn([speed, [easing], [callback]])：通过不透明度的变化来实现所有匹配元素的淡入效果，动画完成后可选的触发一个回调函数。
fadeOut([speed, [easing], [callback]])：通过不透明度的变化来实现所有匹配元素的淡出效果，动画完成后可选的触发一个回调函数。
fadeTo([speed, opacity, [easing], [callback]])：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，动画完成后可选的触发一个回调函数。opacity：一个0到1之间表示透明度的数字。
fadeToggle([speed, [easing], [callback]])：通过不透明度的变化来开关所有匹配元素的淡入淡出效果，动画完成后可选的触发一个回调函数。
speed：三种预定速度的字符串（slow、normal、fast）或者动画时长的毫秒数值。
easing：指定切换效果，默认是swing，可用linear。
callback：在动画完成时执行的函数，每个元素执行一次。
注：fadeIn、fadeout、fadeToggle，运动过程中修改opacity属性值，最终只修改display属性值。而fadeTo只修改opacity属性值。

animate(params, [speed], [easing], [fn])：用于创建自定义动画的函数。
params：一组包含作为动画属性和终值的样式属性和及其值的集合。
speed：三种预定速度的字符串（slow、normal、fast）或者动画时长的毫秒数值。
easing：指定切换效果，默认是swing，可用linear。
fn：在动画完成时执行的函数，每个元素执行一次。

stop(clearQueue, [jumpToEnd])：停止所有在指定元素上正在运行的动画。
如果clearQueue没有设置为true，并且队列中有等待执行的动画，他们将马上执行。
clearQueue：如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。调用stop()的时候，队列中的下一个动画开始。如果clearQueue参数为true，那么在队列中的动画其余被删除并永远不会被执行。
jumpToEnd：当前动画将停止，但该元素上的CSS属性会被立刻修改成动画的目标值。

delay(duration)：设置一个延时来推迟执行队列中之后的项目。
duration：延迟时间，单位：毫秒。

jQuery.fx.off：关闭页面上所有的动画。把这个属性设置为true可以立即关闭所有动画。把这个属性设置为false，可以重新开启所有动画。
jQuery.fx.interval：设置动画的显示帧速。