jquery

随着JavaScript、CSS、DOM、Ajax等技术的不断进步，越来越多的开发者将一个又一个丰富多彩的功能进行封装，供更多的人在遇到类似情况时使用，jQuery就是其中优秀一员。

jQuery正是最优秀的JavaScript库之一，它以“write less, do more”为核心原则，力求使开发者能够以最少的代码完成最多的工作。

一、jQuery概述

jQuery是一个优秀的JavaScript框架

主要提供如下功能:

　 访问页面框架的局部

　 修改页面的表现

　 更改页面的内容

　 响应事件

　 为页面添加动画

　 与服务器异步交互

　 简化常用的JavaScript操作

 

二、  jQuery选择器

1.基本选择器

$(‘a’); //这个选择器匹配所有超链接元素

$(‘#specialID’); //这个选择器匹配id为specialID的元素

$(‘.specialClass’); //这个选择器匹配拥有CSS类specialClass的元素

$(‘a#specialID.specialClass ’); //匹配id为specialID、拥有CSS类specialClass的超链接元素

$(‘p a.specialClass’); //这个选择器匹配拥有CSS类specialClass、在<p>元素中声明的超链接元素。

 

2.子选择器

有时我们只想选择某元素的子节点。

例如，现在有这样一段HTML代码：

<ul><a href=”#”>link1</a><li><a href=”#”>link2</a></li></ul>

我们想要选择<ul>标记下的“link1”超链接。利用基本CSS选择器，我们尝试选择器：$(‘ul a’);

不幸的是，“link1”与“link2”超链接都会被选中，因为“link2”也是<ul>的后代节点。

更高级的解决办法是利用“子选择器”，父节点与直接子节以“>”符号隔开，如下所示：

$(‘ul > a’);    这个选择器只匹配<ul>标记下的“link 1”超链接。

 

3.特征选择器

$('a[href$=.com]'); //匹配所有以“.com”作为href属性结尾的超链接。

$(‘a[href*=sina]’); //匹配所有href属性包含“sina”字符串的超链接

$(‘form[method]’);//获取所有包含method属性的表单

$(‘input[type=text]’);//获取所有文本框

 

4.位置选择器

有时候必须根据元素在页面上的位置或者其他元素的关系去选择元素。也许你想要选择页面上的第一个链接、奇数或偶数的段落，或者每个列表的最后一项。jQuery支持实现这个具体选择的机制。

$('a:first');

$('p:odd'); //代表选择器匹配所有序数为奇数的段落元素

$('p:even'); //代表选择器匹配所有序数为偶数的段落元素

$('li:last-child'); //选择li父节点的最后一个子元素

选择器	描述
:first	匹配指定的第一个元素
:last	匹配指定的最后一个元素
:first-child	匹配指定元素的父元素的第一子元素
:last-child	匹配指定元素的父元素的最后一个子元素
:only-child	返回没有兄弟节点的所有元素
:nth-child(n)	第n个子节点(n从1开始)。li:nth-child(2)返回每个列表的第二个<li>元素
:nth-child(even|odd)	奇数或偶数的子节点。li:nth-child(even)返回每个序列的偶数子结点
:nth-child(Xn+Y)	根据传入的公式计算第n个子节点。如果Y为0，则忽略Y，n从0开始，且X不等于0。li:nth-child(3n)返回位置在3的整数倍数的元素，而li:nth-child(5n+1)返回5的倍数的元素的下一项
:even或 :odd	页面范围内偶数或奇数的匹配元素。li:even返回全部偶数<li>项
:eq(n)	第n个匹配元素(n从0开始)
:gt(n)	匹配从第n(不包括n)个元素之后的所有元素
:lt(n)	匹配从第n(不包括n)个元素之前的所有元素

 

5.利用元素关系获取元素集合

jQuery提供了一系列方法允许根据元素集合中某元素与其他元素的层次关系获取新的元素集合

方法	描述
children()	返回指定包装集每个元素的所有子节点的包装集。
content()	查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容。
next()	返回包装集中每个元素紧邻的后面的同辈元素的包装集。
nextAll()	返回当前元素之后所有的同辈元素。
parent()	取得一个包含着所有匹配元素的唯一父元素的包装集。
parents()	取得一个包含着所有匹配元素的祖先元素的包装集（不包含根元素）。
prev()	取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的包装集。
prevAll()	查找当前元素之前所有的同辈元素。
siblings()	取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。