jQuery实战:创建元素包装集,选择将被操作的元素

看完你能学到什么?

1、利用基本CSS选择器 2、利用子选择器、容器选择器和特性选择器 3、通过位置选择 4、利用自定义jQuery选择器

几乎使用任何jQuery方法的时候,我们必须做的第一件事,就是选择将被操作的页面元素。有时,想要选择的元素集合是易于描述的,例如“页面上的所有链接元素”。有时,需要比较复杂的描述,比如“拥有CSS类leftchild的偶数的段落 ”。

庆幸的是,,jQuery提供了健壮的选择器语法,让我们能轻松,优雅和简明地指定几乎人和元素集合。现在我们就来学习一下jQuery强大的选择器功能。

利用基本CSS选择器

利用子选择器、容器选择器和特性选择器

子选择器:

p>a:选择只匹配< p >元素的直接子节点的链接 ul>li>a:选择ul的直接子节点li的直接子节点的链接

容器选择器:

li:has(a):这个选择器匹配包含< a >元素的所有< li >元素

特性选择器:

a[href^=http://]:这个选择器匹配包含以开头的所有链接 input[type=text]:匹配type特性值为text的所有< input >元素

补充一下:jQuery所支持的基本CSS选择器

选择器 描述

* 匹配所有元素

E 匹配标签名称为E的所有元素

E F 匹配标签名称为F、作为E的后代节点的所有元素

E>F 匹配标签名称为F、作为E的直接子节点的所有元素

E+F 匹配前面是邻近兄弟节点E的所有元素F(E和F紧挨着)

E~F 匹配前面是人和兄弟节点E的所有元素F(E和F可以不紧挨着)

E:has(F) 匹配标签名称为E、至少有一个标签名称为F的后代节点的所有元素

E.C 匹配带有类名C的所有元素E

E#F 匹配id特性值为I的元素E

E[A] 匹配带有特性A的所有元素E(不论特性A的值是什么)

通过位置选择 这里我就列举几个,有需要的可以查看jQueryAPI文档 a:first 此格式的选择器匹配页面上的第一个< a >元素 p:odd 匹配所有序数为奇数的段落元素 p:even 匹配所有序数为偶数的段落元素 li:last-child 选择父元素的最后子节点 :eq(n) 第n个匹配元素(n从0开始) :gt(n) 第n个匹配元素(不包括)之后的元素(n从0开始) :lt(n) 第n个匹配元素(不包括)之前的元素(n从0开始)

利用自定义jQuery选择器(这里列举少量的)

选择器 描述

:button 选择任何按钮

:checkbox 只选择复选框元素

:contain(foo) 只选择包含文本foo的元素

:hidden 只选择隐藏元素

:text 只选择文本字段元素(input[type=text])

:not(filter) 根据指定的筛选器进行求反

小结:

jQuery的选择器多种多样,大家可以根据自己的习惯来选择,基本上都可以指定任何元素的集合。

本文作者:By:罗坚元

来说是非者,便是是非人。

jQuery实战:创建元素包装集,选择将被操作的元素

相关文章:

你感兴趣的文章:

标签云: