jQuery实用教程总结.docxVIP

JQuery

jQuery是一个“写的更少，但做的更多”的轻量级JavaScript库。通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。基础语法是：$(selector).action()

美元符号定义jQuery

选择符（selector）“查询”和“查找”HTML元素

jQueryaction()执行对元素的操作

如：

$(document).ready(function(){

$(p).click(function(){

$(this).hide();

});

});

pIfyouclickonme,Iwilldisappear./p

$(document).ready()等同于jQuery(document).ready()等同于js中的onload()方法

JQuery选择器

JQuery选择器完全继承了CSS风格，可以非常快捷的找出特定DOM元素，然后添加相应行为。JQuery选择器获取的永远是对象，即使没有此元素也不会报错，因此当要用JQuery检查某个元素在网页是否存在时，要用长度或转换为DOM对象进行判断，如：

错误：

If($(“#tt“)){}

应该这样：

if($(“#tt”).length0){….}或者if($(“#tt”)[0]){…}

基本选择器

选择器

描述

返回

示例

#id

选择匹配ID的元素

单个元素

$(“test”)取Id为test的元素

.class

选择给定类名的元素

集合元素

$(“.test”)取所有class为test的元素

Element

选择给定元素名的元素

集合元素

$(“P”)取所有p元素

*

匹配所有元素

集合元素

略

Selector1,selector2,

…,selectorN

将每个选择器匹配的元素合并后一起返回

集合元素

$(“div,span,p.myclass“)选择所有div,span和拥有class为myclass的p标签的一组元素

层级选择器

选择器

描述

返回

示例

$(“ancestordescendant”)

选择ancestor元素里的所有descendant（后代）元素

集合元素

$(“divspan”)选择div里的所有span元素

$(“parentchild”)

选择parent元素下的child元素

集合元素

$(“divspan”)取div下元素名是span的子元素

$(“prev+next“)

或$(“prev”).next()

取prev元素后的next元素

集合元素

$(“.one+div”)或$(“.one”).next(“div”)取class为one的下一个div元素

$(“prev~siblings”)

或$(“prev”).nextAll();

取prev元素后的所有siblings元素

集合元素

$(“#two~div”)取id为two元素后面的所有div兄弟元素$(“prev”).nextAll(“div”)

$(“prev”).siblings()

取prev元素的所有同辈元素

集合元素

$(“#prev”).siblings(“div”)取所有与prev同辈的元素，无论前后位置

过滤选择器

基本选择器

描述

返回

示例

Element:first

选择第一个元素

单个元素

$(“div:first”)取所有div中第1个div元素

Element:last

选择最后一个元素

单个元素

$(“div:last”)所有div中最后一个div元素

Element:not(selector)

去除与给定选择器匹配的元素

集合元素

$(“input:not(.myclass)”)选取class不是myclass的input元素

Element:even

取索引是偶数的元素

集合元素

$(“input:even”)取索引是偶数的input元素

Element:odd

选择索引是奇数的元素

集合元素

$(“input:odd”)

Element:eq(index)

取索引等于index的元素

单个元素

$(“input:eq(1)”)索引等于1的元素

Element:gt(index)

取索引大于index的元素

索引都从0开始计算

集合元素

$(“input:gt(1)”)取索引大于1而不包括1的元素

Element:lt(index)

取索引小于index的元素

集合元素

$(“input:lt(1)”)

:header

取所有标题元素

集合元素

$(“:hea