jquery选择器大全 全面详解jquery选择器

选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似。选择器具有如下特点:
1.简化代码的编写
2.隐式迭代
3.无须判断对象是否存在
其中“$”是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的。如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式。
现在我们正式进入jQuery选择器的学习。根据选择器的功能习惯将选择器进行分类,下面将不同类型的分类器进行分类,并且分别进行解释说明,使读者达到掌握程度。
一、基本选择器
基本选择器包括5种选择器:#id、element、.class、*和selectorl,selector2.selectorN,下面将配合实例分别介绍每种选择器的作用及使用方法。
1.#id选择器
#id选择器根据给定的ID匹配一个元素。如果选择器中包含特殊字符,可以用两个斜杠转义,其返回值为Array<Element>。
2.element选择器
element选择器是一个用于搜索的元素。指向DOM节点的标签名。其返回值为Array<Element(s)>。
3.class选择器
.class选择器根据给定的类匹配元素,是一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到,其返回值为Array<Element(s)>。

举例:

复制代码 代码如下:


<input type="text" value="根据ID选择" />
<a>根据元素名称选择</a>
<input type="text" value="根据元素css类名选择" />
jQuery("#ID").val();
jQuery("a").text();
jQuery(".classname").val();


即可分别得到元素的值。以上三种为最常见的选择器,其中ID选择器是效率最高的,在可能的情况下应该尽量使用它。

4.*选择器
*选择器多用于结合上下文来搜索,匹配所有元素的选择器。其返回值为Array<Element(s)>。
5.selector1,selector2,selectorN选择器
这类选择器选择器即将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内,其返回值为:Array<Element(s)>。在下例中通过对选择的项进行CSS操作来使读者清晰地了解selector1,selector2,selectorN选择器的作用。
二、层级选择器
层级选择器包括5种形式:ancestor、descendant、parent > child、prev + next和prev ~ siblings。下面配合实例分别详细介绍每种选择器的作用及使用方法。
1.ancestor descendant选择器
其指在给定的祖先元素下匹配所有的后代元素,作为参数的ancestor代表任何有效的选择器,而descendant则用以匹配元素的选择器,并且它是第一个选择器的后代。其返回值为:Array<Element(s)>。
2.parent>child选择器
parent>child选择器代表在给定的父元素下匹配所有的子元素。两个参数分别代表的意思如下:parent代表任何有效选择器;child用以匹配元素的选择器,并且它是第一个选择器的子元素。其返回值为Array<Element(s)>。
3.prev+next选择器
这类选择器的作用是匹配所有紧接在prev元素后的next元素。两个参数分别代表的意思如下:prev代表任何有效选择器;next代表一个有效选择器并且紧接着第一个选择器。其返回值为Array<Element(s)>。
4.prev ~ siblings选择器
prev ~ siblings选择器代表匹配prev元素之后的所有siblings元素。两个参数分别代表的意思如下:prev代表任何有效选择器;siblings代表一个选择器,并且它作为第一个选择器的同辈。其返回值为Array<Element(s)>。

举例:

复制代码 代码如下:


<div>
        <input type="text" value="投资" />
        <input type="text" />
        <input type="text"  value="担当" />
        <input type="text" title="学习" value="学习" />
        <a>1</a>
        <a>2</a>
</div>
//得到div中的a标签内容 结果为12
jQuery("#divTest a").text();
//输出div直接子节点 结果为投资
jQuery("#divTest>input").val();
//输出id为next的后一个同级别元素 结果为担当
jQuery("#next+input").val();
//同上,并且是有title的元素 结果为学习
jQuery("#next~[title]").val();


三、过滤选择器
过滤选择器主要通过特定的过滤规则来筛选出所需要的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号开头。
过滤选择器涉及的内容较多,总共有6 种类型,但是其可以进行归类。下面我们将对各种类型的选择器进行详细讲解。
1.基本过滤选择器
基本过滤选择器是过滤选择器中最常用的一种,其主要包括以下几种形式,在此做详细说明:
(1):first/:last选择器。
(2):not选择器。
(3):even和:odd选择器。
(4):eq:gt、:lt、选择器。
(5):header选择器。
(6):animated选择器。
举例:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdyddd.html