介绍

jQuery是一个快速、简洁的Javascript框架，是继Prototype之后又一个优秀的Javascript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装Javascript常用的功能代码，提供一种简便的Javascript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery对象和函数包含以下内容：

• 选择器


• 事件


• 效果


• 文档操作


• 属性


• CSS


• AJAX


• 遍历


• 数据


• DOM元素


• 核心

详情可以查看 jQuery 中文文档

jQuery基本用法

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$("#container").html()。

$("#container").html()的意思是：获取id值为 container的元素的html代码。其中 html()是jQuery里的方法。相当于： document.getElementById("container").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

使用jQuery对象变量时需要在变量名前加$。

var $foo = jQuery对象


选择器

id选择器

$('#container')

标签选择器

$('div')

类名选择器

$('.customClass')

同时包含class=container和classcustomClass的元素

$('.container.customClass')

所有包含class=container的div标签

$('div.container')

选择所有元素

$('*')

div中的所有后代div

$('div div')

div中的所有儿子div

$('div > div')

div之后紧挨着的div

$('div + div')

div之后所有的兄弟div

$('div ~ div')

:first 第一个元素

$('p:first') // 第一个p标签

:last 最后一个元素

$('p:last') // 最后一个p标签

:eq(index) 第（index+1）个标签

$("ul li:eq(3)") // ul中的第四个li（index 从 0 开始）

:even(index) 所有索引为偶数的元素

$("p:even") // 索引为偶数的p元素

:odd 所有索引为奇数的元素

$("p:odd") // 索引为奇数的p元素

:gt(index) 所有大于索引值的元素

$("ul li:gt(3)") // ul中索引大于3的li元素

:lt(index) 所有小于索引值的元素

$("ul li:lt(3)") // ul中索引小于3的li元素

:not(元素选择器)

$("input:not(#name)") // 不包括id=name的所有input元素

具有attribute属性的元素

[attribute]

attribute属性值为value的元素

[attribute=value]

attribute属性不为value的元素

[attribute!=value]

attribute属性值以value结尾的元素

[attribute$=value]

表单筛选器

type=text的input元素

$(':text')

type=password的input元素

$(':password')

type=file的input元素

&(':file')

type=radio的input元素

$(':radio')

type=checkbox的input元素

$(':checkbox')

type=submit的input元素

$(':submit')

type=reset的input元素

$(':reset')

type=button的input元素

$(':button')

表单对象属性

:enabled

:disabled

:checked

:selected

选择器方法

$('#id').next() // 同级别的下一个元素
$('#id').nextAll() // 同级别的下面所有元素
$('#id').nextUntil('#stop') // 同级别往下到匹配位置为止的所有元素
$("#id").prev() // 同级别的上一个元素
$("#id").prevAll() // 同级别的上面所有元素
$("#id").prevUntil("#stop") // 同级别往上到匹配位置为止的所有元素
$("#id").parent() // 查找当前元素的父元素
$("#id").parents() // 查找当前元素的所有的父元素
$("#id").parentsUntil('#stop') // 查找当前元素的所有的父元素，直到遇到匹配的那个元素为止。
$("div").first() // 获取匹配的第一个元素
$("div").last() // 获取匹配的最后一个元素
$("div").not('#container') // 从匹配元素的集合中删除与指定表达式匹配的元素
$("div").has('p') // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
$("div").eq(3) // 索引值等于指定值的元素


文档操作

$(x).append(y) // 把y追加到x元素内部的最后
$(x).appendTo(y) // 把x追加到y元素内部的最后
$(x).prepend(y) // 把y元素添加到x内部的最前
$(x).prependTo(y) // 把x元素添加到y内部的最前
$(x).after(y) // 把y元素放到x的后面
$(x).insertAfter(y) // 把x元素放到y的后面
$(x).before(y) // 把y元素放到x前面
$(x).insertBefore(y) // 把x元素放到y前面
$('id').remove() // 从DOM中删除所有匹配的元素
$('id').empty() // 删除匹配的元素集合中所有的子节点