软件开发培训班 >> 编程开发 >> JavaScript


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

　　本文标签：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" id="ID" value="根据ID选择" />
<a>根据元素名称选择</a>
<input type="text" class="classname" 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 id="divTest">
        <input type="text" value="投资" />
        <input id="next" 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选择器 。
举例：
复制代码 代码如下:

<div id="divTest">
    <ul>
        <li>投资</li>
        <li>理财</li>
        <li>成熟</li>
        <li>担当</li>
        <input type="radio" value="学习" checked="checked" />
        <input type="radio" value="不学习" />
    </ul>
</div>
//第一个li内容 结果为投资
jQuery("li:first").text();
//最后一个li内容 结果为担当
jQuery("li:last").text();
//input未被选中的值 结果为不学习
jQuery("li input:not(:checked)").val();
//索引为偶数的li 结果为投资 成熟
jQuery("li:even").text();
//索引为奇数的li 结果为理财 担当
jQuery("li:odd").text();
//索引大于2的li的内容 结果为担当
jQuery("li:gt(2)").text();
//索引小于1的li的内容 结果为投资
jQuery("li:lt(1)").text();

2.内容过滤选择器
内容过滤选择器主要包括:contains、:empty、:has、:parent 4种过滤器，这部分过滤器是对上面介绍基本过滤选择器的一个补充，对于页面选取、设置元素显示等方面发挥着重要的作用 。下面将对各选择器进行详细的介绍 。
（1）:contains选择器 。
（2）:empty选择器 。
（3）:has选择器 。
（4）:parent选择器 。

举例：

复制代码 代码如下:

<div id="Test">
    <ul>
        <li>hyip投资</li>
        <li>hyip</li>
        <li></li>
        <li>理财</li>
        <li><a>投资</a></li>
    </ul>
</div>  
//包含hyip的li的内容 结果为hyip投资 hyip
jQuery("li:contains(hyip)").text();
//内容为空的li的后一个li内容 结果为理财
jQuery("li:empty+li").text();
//包含a标签的li的内容 结果为投资
jQuery("li:has(a)").text();

3．可见性过滤选择器
可见性过滤选择器比较简单，其包含两种选择器，主要是用来匹配所有可见元素和不可见元素 。下面将会对这两种选择器进行详细介绍 。
（1）:hidden选择器 。
（2）:visible选择器 。

举例：

复制代码 代码如下:

<ul>
    <li>可见</li>
    <li style="display:none;">不可见</li>
</ul>
//不可见的li的内容 结果为不可见
jQuery("li:hidden").text();
//可见的li的内容 结果为可见
jQuery("li:visible").text();

4．属性过滤选择器
属性过滤选择器是用于匹配包含给定属性的元素，当然也可以匹配不包含此属性的元素等 。属性过滤选择器共含有以下7种选择器 。
（1） [attribute]选择器 。
（2）[attribute=value]、[attribute!=value]选择器（此处包含两种） 。
（3）[attribute^=value]、[attribute$=value]、[attribute*=value]选择器（此处包含三种） 。
（4）[selector][selector2]选择器 。
举例：
复制代码 代码如下:

<input type="text" name="hyipinvest" value="hyip投资" />
<input type="text" name="investhyip" value="投资hyip" />
<input type="text" name="google" value="HYIP" />
//name为hyipinvest的值 结果为hyip投资
alert(jQuery("input[name=hyipinvest]").val());
//name以hyip开始的值 结果为hyip投资
alert(jQuery("input[name^=hyip]").val());
//name以hyip结束的值 结果为投资hyip
alert(jQuery("input[name$=hyip]").val());
//name包含oo的值 结果为HYIP
alert(jQuery("input[name*=oo]").val());

5．子元素过滤选择器
html由层层嵌套在一起的标签组成，由于一些标签需要进行单独处理，如何选取一个或者一些特定的嵌套标签在程序中就成为了一个问题 。jQuery提供了子元素过滤选择器解决了这个问题 。它包括4个选择器，具体内容将在下面详细讲解 。
（1）:nth-child选择器 。
（2）:first-child、:last-child选择器（两种） 。
（3）:only-child选择器 。
6．表单对象属性过滤选择器
这部分内容相当简单，只包含四种类型的选择器，这些选择器分别用来匹配可用元素或者不可用元素、选中元素等 。下面将以实例的形式对此部分内容进行讲解 。
（1）:enabled、:disabled选择器 。
（2）:checked选择器 。
（3）:selected选择器 。
表单过滤选择器是用于处理html中表单的选择器，其中不仅仅包括经常用到的按钮、文本域、单选框、复选框等，还涉及了很少用到的图片、隐藏域、文件上传等标签 。下面将会对这些选择器进行具体介绍 。
（1）:input选择器 。
（2）:text、:password选择器 。
（3）:radio、:checkbox选择器 。
（4）:submit、:image、:reset、:button、:file选择器 。
（5）:hidden选择器 。

Query选择器就总结到这里，这些基本上都是在学习过程中遇到的，还有极少部分没有总结出来 。经过一段时间实践，相信大家就能够熟练的使用jQuery选择器了 。