选择网页元素部分框架jquery概述.pdfVIP

】

一、选择网页元素

二、改变结果集

三、链式操作

四、元素的操作：取值和赋值

五、元素的操作：移动

六、元素的操作：、删除和创建

七、工具方法

八、操作

九、特殊效果

【正文】

一、选择网页元素

jQuery的基本设计思想和主要用法，就是选择

某个网页元素，然后对其进行某种操作。这是它

区别于其他Javascript库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达

式，放进构造函数jQuery()（简写为$），然后

得到被选中的元素。

选择表达式可以是CSS选择器：

$(document)//选择整个文档对象

$(#myId)//选择ID为myId的网页元素

$(div.myClass)//选择class为myClass的div元素

$(input[name=first])//选择name属性等于first的

input元素

也可以是jQuery特有的表达式：

$(a:first)//选择网页中第一个a元素

$(tr:odd)//选择表格的奇数行

$(#myForm:input)//选择表单中的input元素

$(div:visible)//选择可见的div元素

$(div:gt(2))//选择所有的div元素，除了前三个

$(div:animated)//选择当前处于动画状态的div元素

二、改变结果集

jQuery设计思想之二，就是提供各种强大的过滤

器，对结果集进行筛选，缩小选择结果。

$(div).has(p);//选择包含p元素的div元素

$(div).not(.myClass);//选择class不等于myClass的

div元素

$(div).filter(.myClass);//选择class等于myClass的

div元素

$(div).first();//选择第1个div元素

$(div).eq(5);//选择第6个div元素

有时候，我们需要从结果集出发，移动到附近的

相关元素，jQuery也提供了在DOM树上的移动

方法：

$(div).next(p);//选择div元素后面的第一个p元素

$(div).parent();//选择div元素的父元素

$(div).closest(form);//选择离div最近的那个form父

元素

$(div).children();//选择div的所有子元素

$(div).siblings();//选择div的同级元素

三、链式操作

jQuery设计思想之三，就是最终选中网页元素以

后，可以对它进行一系列操作，并且所有操作可

以连接在一起，以链条的形式写出来，比如：

$(div).find(h3).eq(2).html(Hello);

分解开来，就是下面这样：

$(div)//找到div元素

.find(h3)//选择其中的h3元素

.eq(2)//选择第3个h3元素

.html(Hello);//将它的内容改为Hello

这是jQuery最令人称道、最方便的特点。它的原

理在于每一步的jQuery操作，返回的都是一个

jQuery对象，所以不同操作可以连在一起。

jQuery还提供了.end()方法，使得结果集可以后

退一步：

$(div)

.find(h3)

.eq(2)

.html(Hello)

.end()//退回到选中所有的h3元素的那一步

.eq(0)//选中第一个h3元素

.html(World