- 简介
jQuery是一个JavaScript库，特性丰富，包含若干对象和很多函数，可以代替传统DOM编程的操作方式和操作风格，通过对DOM API、DOM事件的封装，提供了一套全新的API，这套全新的API更简单更灵活，而且，jQuery考虑并解决了不同浏览器之间的兼容性问题，所以在使用jQuery进行编程的时候，不用顾虑兼容性问题，可以链式编程提高开发速度，有隐式迭代的效果，还有类似css选择器的强大功能。jQuery宗旨是：write less, do more.
- $对象和Jquery对象
就像DOM的编程入口是document对象一样，jQuery的编程入口是$对象，它是jQuery的核心对象。$对象也是一个函数对象，我们可以使用$()的形式调用它，传递给$()不同的参数可以做不同的事情，$函数异常强大！ $函数可以把若干个DOM对象包装进一个对象，这个对象称为jQuery对象，jQuery对象可以看成数组对象，此外还拥有一整套全新的方法
- Jquery选择器
jQuery的编程思路和DOM一样，先获取到要操作的元素，然后操作该元素。为了能准确的获取元素，jQuery站到了CSS的肩膀上——直接复制了CSS选择器语法。jQuery选择器中除了伪类选择器外绝大部分和CSS选择器相同
选择器类型：标签选择器、id选择器、类选择器、属性选择器、伪类选择器、复合选择器
语法：$( selector ) 或者 $( selector , parent )
- 属性选择器
[attr]选择有attr属性的元素
[attr=val] 选择以attr属性值为val的元素
[attr^=val] 选择以attr属性值以val开头的元素
[attr$=val] 选择以attr属性值以val结尾的元素
[attr*=val] 选择以attr属性值中包含val的元
- 伪类选择器
:first 第一个元素
:last 最后一个元素
:even 第偶数个
:odd 第奇数个
:eq(index) 第index个
:gt(index) 第index之后的
:lt(index) 第index之前的
:not( selector ) 对括号里面的选择器取反
:first-child 第一个子元素
:last-child 最后一个子元素
:n-child 第n个子元素
- 复合选择器
selector1空格selector2 在1选中的元素中，使用2筛选其后代元素(2不要使用伪类选择器)
selector1>selector2 在1选中的元素中，使用2筛选其子元素
selector1~selector2 在1选中的元素中，使用2筛选其后续兄弟元素
selector1+selector2 在1选中的元素中，使用2筛选其后续紧邻的兄弟元素
selector1,selector2 各个选择器的并集
selector1(没有空格)selector2 各个选择器的交集（复合后可识别才可以这样使用）
- jQuery特性：隐式迭代
jQuery选择器可能会选中多个DOM元素，jQuery会把选中的多个DOM元素封装成一个jQuery对象，实际上是个JavaScript数组对象。对jQuery对象进行的操作实际上会对数组里面的每个元素都进行（个别操作只对第一个数组元素进行）
如：
$("div").css("backgroundColor", "lightgray"); //这句代码会把每一个div元素的背景色设置为浅灰色
隐式迭代特性配合jQuery选择器，使得使用jQuery进行编程十分简洁和高效。
当我们希望对jQuery对象包含的DOM对象进行不同的操作时，可以使用jQuery对象的each()方法主动遍历内部的每个DOM对象，并进行针对性处理
each用法：
$(selector).each(function(index,element)
{
//index选择器当前的索引位置，element是当前选择的元素
})
- Jquery操作元素属性
attr(attrName) 获取第一个元素的该属性的值
attr(attrName,value) 设置所有元素的该属性的值
attr(attrName, function(index, value){ }) 设置所有元素的该属性的值，值由函数的返回值决定，index表示元素索引，value表示该属性的原值
atrr()函数无论对HTML元素固有的属性还是我们自定义的属性都有效，但对于类似复选框的checked属性，以及元素的那5个只读属性（offsetXxx），大家要使用jQuery对象的prop()函数来操作，但prop()函数对自定义属性无效。
- jQuery操作元素的CSS样式
操作元素的style属性
css(propName)
css(propName, value)
css(propName, function(index, value){ })
操作元素的class属性
addClass(class)
removeClass(class)
toggleClass(class) 切换class（如果存在就删除，如果不存在就添加）
注意：也可以使用attr()函数来操作style属性以及class属性，但是有风险，千万不要使用 。因为style属性的值可能有多个，但是使用attr的话，你重新赋的值会把之前已有的值全给删掉
- 操作元素的文本内容、子节点、元素值
html() 获取第一个元素的HTML内容（包括子元素和文本内容）
html(string) 设置所有元素的HTML内容（效果等同于DOM对象的innerHTML属性）
val() 获取第一个元素的value属性的值（如果有value属性的话）
val(string) 设置所有元素的value属性的值
- 操作元素节点
$(html) 创建元素节点
append(content) 插入子节点
before(content) 插入兄弟节点
remove() 删除元素自己
children() 获得元素的子元素
parent() 获得元素的父元素
prevall() 获得元素之前的兄弟元素
nextall() 获得元素之后的兄弟元素
siblings() 获得兄弟元素
- Jquery事件处理
文档加载完成事件
$(document).ready(function(){ });或者$(function(){ });
其他常见事件
jQuery提供了一系列如click()、focus()、mouseover()等方法，给元素注册对应的事件处理函数。如$("div").click( function(){ alter('xx') }); 这句代码给所有div元素的点击事件注册了处理函数。特别的，jQuery提供了ready()函数来代替window的load加载事件，ready()可以在文档的DOM结构加载完成后就触发，而不必等到页面的图片等资源也加载完成，并且这些函数都可以多次使用
$(this)的使用
因为jQuery的隐式迭代特性，使用jQuery注册的事件处理函数中的this实际上是DOM对象，因此this可以调用DOM API，也可以使用$(this)调用jQuery API
例子代码：
$(document).ready(function(){ $("div").click(function(){ alert(this); }); });
- 链式编程
如果打算对一个jQuery对象做一组动作，使用jQuery的链式编程更优雅，为了支持链式编程，大部分jQuery方法的返回值还是此jQuery对象本身。
如：$("div").mouseout().click();
但有些jQuery方法返回的jQuery对象并不是原来的jQuery对象了（称为断链），这时可以使用end()返回断链之前的状态
如：$("#div01").siblings().html("other").end().html("div01");
但对于那些返回值不是jQuery对象的方法，就没办法把链接上了
$("div").html();