JQuery.com/" target="_blank">JQuery

jQuery是一个非常流行的快速、小巧、功能强大的开源JavaScript库。就像官方所宣称的那样——"Write less，do more"，它使得我们常用的HTML文档遍历、DOM操作、事件处理、动画效果、Ajax、工具方法等功能代码的实现变得非常简单。更重要的是，它还为我们做了跨浏览器的兼容。绝大多数时候，不用担心我的JS兼容问题了(由于浏览器bug等因素，jQuery也无法100%地实现跨浏览器兼容，官方对这些少数API一般也作了特殊说明，而且这种情况极少遇到，因此可以忽略不计)。

jQuery 理念: 写得少, 做得多. 优势如下:

轻量级强大的选择器出色的 DOM 操作的封装可靠的事件处理机制完善的 Ajax出色的浏览器兼容性链式操作方式…
1.jQuery 配置

在页面头部head中，添加js

1.1 语法
1.2 ready() 准备就绪时执行代码

ready()函数的作用相当于window.onload，它用于在当前文档加载准备就绪后执行对应的函数。

1.3 选取元素

使用jQuery 选择器选取元素，并封装为jQuery对象

在JS原生DOM中，要对DOM元素进行操作，首先得获取到对应的元素(getElementById()、 getElementsByTagName()等)，然后再对这些元素进行操作。

jQuery也需要先选取所需的DOM元素，然后再针对这些元素进行操作。如下:

1.4 筛选

选取集合中符合某些条件的元素，删除集合中符合某些条件的元素，查找当前匹配元素的子元素、父元素、同辈元素、上一个元素、下一个元素等与之具有特定关系的元素。

1.5 DOM操作实例
get and set in one
get first set all
链式编程

jQuery对象的所有实例方法，在没有特殊的返回需求的情况下，一般都会返回该jQuery对象本身(或者其它jQuery对象)，因此可以继续调用返回的jQuery对象上的方法。

在JS原生DOM操作中，如果通过getElementById()、getElementsByName()等方式获取不到对应的元素，那么将返回null，在null上访问属性或方法，将会抛出异常。

jQuery在匹配不到对应元素时将返回一个空的jQuery对象，仍然可以调用jQuery对象的方法，而且并不会报错。因为jQuery会智能地处理这种情况。如果该方法用于获取数据，则返回null或undefined；如果该方法用于设置数据，则忽略设置操作，并返回该空对象本身；如果该方法用于筛选元素，则同样返回一个新的jQuery空对象。

1.5.1 属性操作

attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。区别如下：

操作对象不同

attr和prop分别是单词attribute和property的缩写

attr()依赖的是Element对象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value )

prop()依赖的是JS原生的 element[property] 和 element[property] = value

应用版本不同

attr()是jQuery 1.0版本就有的函数

prop()是jQuery 1.6版本新增的函数。毫无疑问，在1.6之前，你只能使用attr()函数；1.6及以后版本

用于设置的属性值类型不同

attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。

prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。

-其他细节

1.5.2 文档处理

插入、修改、移动、删除指定的DOM元素。

除了wrap系列方法以及empty()、clone()方法外，当使用上述插入、追加、替换、删除方法时，如果用于插入/追加/替换/删除的元素是文档中的元素，则这些元素将从原位置上消失。

1.5.3 CSS操作1.5.3 动画效果1.6 事件处理

与click()方法类似，jQuery还提供绝大多数事件的绑定方法，例如:dblclick()、focus()、change()、hover()、submit()(仅限于form表单元素)、mousedown()、mouseover()、keydown()、keypress()等。

1.7 Ajax

$.ajax()是jQuery中Ajax的底层实现，其它Ajax请求方法都是基于该方法实现的。

在发送AJAX请求之前，序列化JS内容或表单内容，以便用作AJAX请求发送的数据。快速发送AJAX请求，并处理响应数据(支持html、xml、text、json、jsonp、script等多种数据类型)。监听AJAX事件，绑定事件触发时执行的处理函数。

ajax参数属性汇总

名称
类型
描述
url
字符串
请求的urltype
字符串
将要使用的HTTP方法。通常是POST或GET。如果省略，则为GETdata
对象
一个对象，其属性作为查询参数传递给请求。如果是“GET”请求，则把数据作为查询字符串传递；如果是“POST”请求，则把数据作为请求体传递。在这两种情况下，都是由$.ajax()方法来处理值的编码contentType
字符串
将要在请求上指定的内容类型。如果省略，默认为application/x-www-form-urlencoded(与表单提交所使用默认类型相同)dataType
字符串
一个关键字，用来标识响应返回数据的类型。这个值决定在把数据传递给回调函数之前（如果有）进行什么后续处理。有效值如下：xml 、html、json、jsonp、script、texttimeout
数值
设置Ajax请求的超时值（毫秒）。如果请求这段时间内没有完成，则中止请求并调用错误回调函数。success
函数
如果请求处理成功，则这个函数被调用。响应体作为第一个参数被返回给这个函数，并且根据指定的dataType属性进行格式化。第二个参数是包含状态码的字符串。error
函数
如果请求处理过程中产生错误，则这个函数被调用。三个实参被传递给这个函数：XMLHttpRequest对象、状态消息字符串以及XMLHttpRequest对象所返回的异常对象（可选）。complete
函数
在请求完成时被调用。两个实参被传递：XHR实例和状态消息字符串。如果制订了success或error回调函数，则这个函数在success或error回调函数执行后被调用。beforeSend
函数
在发起请求之前被调用，这个函数被传递XMLHttpReqeust实例，用来执行请求的预处理操作。async
布尔型
如果指定为false，则代表同步提交请求。在默认情况下，提交请求是异步（true）。1.8 辅助方法
1.8.1 处理逻辑代码1.8.2 遍历1.8.3 DOM元素和jQuery对象的相互转换

实际上jQuery对象是一个类数组对象。它将匹配的所有DOM元素都依次存储在数字索引形式的属性中，并用length属性存储DOM元素的个数。

2. 选择器列表
2.1根据id、class类名、标签名等筛选元素选择器
起始版本
实例
选取
*
1.0
$("*")
所有元素#id
1.0
$("#abc")
id="abc"的元素.className
1.0
$(".resClass")
所有包含类名"resClass"的元素tagName
1.0
$("p")
所有p元素2.2 根据多个选择器的组合筛选元素选择器
起始版本
实例
选取
s1,s2,sN
1.0
$("p,div,#abc")
所有的p元素、div元素和id="abc"的元素s1s2sN
1.0
$(":radio[name=uid]:checked")
所有被选中的name="uid"的radio元素ancestor escendant
1.0
$("p span")
p标签内的所有span元素parent > child
1.0
$("p > span")
所有作为p标签的直接子元素的span元素prev + next
1.0
$("label + input")
所有紧跟在label元素后面的那个同辈input元素prev ~ sibings
1.0
$("tr#L2 ~ tr")
在id="L2"的tr元素之后的所有同辈tr元素2.3 属性相关选择器选择器
起始版本
实例
选取
[attribute]
1.0
$("[href]")
所有带有href属性的元素[attribute=value]
1.0
$("[name=uid]")
所有name="uid"的元素[attribute!=value]
1.0
$("[name!=uid]")
所有name属性的值不等于"uid"的元素[attribute^=value]
1.0
$("[name^=uid]")
所有name属性的值以"uid"开头的元素[attribute$=value]
1.0
$("[src$='.gif']")
所有src属性以".gif"结尾的元素[attribute~=value]
1.0
$("[name~='uid']")
name属性的值包含给定的单词"uid"的所有元素("uid"与其他词以空格分隔)[attribute*=value]
1.0
$("[name*=uid]")
所有name属性的值包含"uid"的元素2.4伪类选择器——表单相关选择器
起始版本
实例
选取
:input
1.0
$(":input")
所有input、select、textarea和button标签:text
1.0
$(":text")
所有type="text"的input元素:password
1.0
$(":password")
所有type="password"的input元素:radio
1.0
$(":radio")
所有type="radio"的input元素:checkbox
1.0
$(":checkbox")
所有type="checkbox"的input元素:submit
1.0
$(":submit")
所有type="submit"的input和button元素:reset
1.0
$(":reset")
所有type="reset"的input元素和button元素:button
1.0
$(":button")
所有button标签(不区分type)和type="button"的input元素:image
1.0
$(":image")
所有type="image"的input元素:file
1.0
$(":file")
所有type="file"的input元素2.5 伪类选择器——表单状态相关(表单控件是指input、select、textarea、button、option元素)选择器
起始版本
实例
选取
:enabled
1.0
$(":enabled")
所有可用(没有disabled属性)的表单控件元素:disabled
1.0
$(":disabled")
所有禁用(带有disabled属性)的表单控件元素:selected
1.0
$(":selected")
所有被选中的:checked
1.0
$(":checked")
所有被选中的radio、checkbox和4.6 伪类选择器——根据元素在匹配到的所有元素中的特定次序筛选元素选择器
起始版本
实例
选取
:first
1.0
$("p:first")
第一个p标签:last
1.0
$("p:last")
最后一个p标签:even
1.0
$("tr:even")
所有偶数tr标签:odd
1.0
$("tr:odd")
所有奇数tr标签:eq(index)
1.0
$("li:eq(3)")
第4个li标签(index从0开始算起):gt(index)
1.0
$("li:gt(2)")
所有index大于2的li标签(第4、5、6……个li标签):lt(index)
1.0
$("li:lt(2)")
所有index小于2的li标签(第1、2个li标签)2.7 伪类选择器——根据包含、排除、可见、动画或其他关系筛选元素选择器
起始版本
实例
选取
:has(selector)
1.1.4
$("ul:has(li.abc)")
所有包含类名为"abc"的li标签的ul元素:not(selector)
1.0
$("input:not(:text)")
所有不是文本框的input元素:contains(text)
1.1.4
$(":contains(abc)")
所有包含文本"abc"的元素:parent
1.0
$(":parent")
所有包含子元素或文本内容(哪怕是空格或换行)的元素:empty
1.0
$(":empty")
所有没有子元素和文本内容(哪怕是空格或换行)的元素:visible
1.0
$(":visible")
所有可见的元素:hidden
1.0
$(":hidden")
所有不可见的元素(包括type="hidden"的input元素):header
1.2
$(":header")
所有标题标签：h1 ~ h6:animated
1.2
$(":animated")
所有正在执行动画效果的元素:focus
1.6
$(":focus")
当前获得焦点的元素:root
1.9
$(":root")
当前文档的根元素(html元素):target
1.9
$(":target")
id属性等于当前页面URI中的hash码值的元素:lang(language)
1.9
$(":lang(en)")
所有lang属性以"en"为前缀的元素