web前端之jQuery

介绍

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()      // 删除匹配的元素集合中所有的子节点