元素的基本选择
访问量:1119

jQuery提供了大量的方法,供使用者来选取DOM元素,如通过元素的属性、元素的类型、元素的位置、元素的内容、CSS类等进行选择,当然还可以组合这些方法进行选择。选择元素的语法如下:

$([selector, [context]])

或是

jQuery([selector, [context]])

其中,selector是元素选择符,若selector为空,则返回当前JQuery对象,感觉这样没有实际意义,一般不为空。context作为待查找的 DOM 元素集、文档或 jQuery 对象,是用来限制查找的访问。

如在文档的第一个表单中,查找所有的单选按钮(即: type 值为 text 的 input 元素),jQuery 代码如下:

$("input:text", document.forms[0]);

下面我们来看一下常用的选择器。

一、CSS样式选择器

在使用css样式选择器的时候,可以参照下表:

选择器描述
*通配符,如$('*'),查找所有的元素
#id选择器,如$('#div1'),查找id为div1的元素
.类选择器,如$(".myClass"),查找所有的class为myClass的元素
组合选择器通过逗号,空格,大于号,加号,破折号等将选择器进行组合,如$("div span"),查找div下面的所有span。详情可以点击这里

案例解析

获取页面中所有class为table的元素,并打印其里面的内容

$(".table").each(function(){
	alert($(this).html());
});

二、属性选择器

jQuery中使用属性选择器可以参照下表:

属性选择器描述
[attr]选择具有attr属性的元素。如$("[dir]"),获取含有dir属性的元素
[attr = val]选择属性attr等于val的元素。
[attr ^= val]选择所有属性attr以val开头的所有元素,如$("[dir ^= al]"),获取属性dir以al开头的元素。
[attr |= val]选择所有属性attr以val开头或者等于val的元素。
[attr $= val]选择属性attr以val结尾的所有元素。
[attr != val]选择具有attr属性,但是attr不等于val的元素
[attr ~= val]选择具有attr属性,且以空格分隔属性,分隔的列表中包含val
[attr *= val]选择具有attr属性,且属性中包含val

三、位置选择器

位置选择器是依赖元素在文档中的层次关于或是相对其他元素的位置,来进行选择操作。如匹配第一个或是最后一个元素。

ele:even
选择ele中的偶数元素。如$(".title:even"),查找class为title集合中的偶数元素
ele:odd
选择ele中的偶数元素
ele:first选择属性attr等于val的元素。
ele:last选择所有属性attr以val开头的所有元素,如$("[dir ^= al]"),获取属性dir以al开头的元素。
ele:eq(n)选择所有属性attr以val开头或者等于val的元素。如$(".title:eq(2)"),查找class为title集合中第三个元素
ele:gt(n)选择属性attr以val结尾的所有元素。如$(".title:qt(2)"),查找class为title集合中索引值大于2的元素
ele:lt(n)选择属性attr以val结尾的所有元素。如$(".title:qt(2)"),查找class为title集合中索引值小于2的元素

四、过滤选择器

jQuery里面包含了很多过滤器,可以根据可见性、元素位置、内容、属性等进行过滤。


选择器描述
:not选择与选择器不匹配的元素
:button选择所有button元素以及type为button的元素
:checked匹配所有被选中的元素
:enabled选择所有可用元素
:disabled选择所有不可用的元素
:file选择file元素
:image选择类型为image元素
:password选择类型为password元素
:radio选择类型为radio元素
:reset选择类型为reset的元素
:selected选择被选中的元素
:submit

选择类型为submit元素

:text选择类型为text元素
:hidden选择类型为hidden元素
:contains选择包含特定文本的元素
:empty选择不包含子元素或是文本的空元素
:has()选择这至少包含一个与指定选择器相互匹配的元素
:parent选择包含子元素或是文本节点的元素
:first-child选择匹配元素中第一个元素
:last-child选择匹配元素中最后一个元素
:nth-child(n)选择匹配元素中第n个元素
:only-child选择具有唯一一个子元素的元素
请在下面输入需要执行的语句