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


Posted in Javascript onMarch 06, 2014

选择器并没有一个固定的定义,在某种程度上说,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选择器了。

Javascript 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
javascript基础知识讲解
Jan 11 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 #Javascript
Jquery easyUI 更新行示例
Mar 06 #Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 #Javascript
button没写type=button会导致点击时提交
Mar 06 #Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 #Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 #Javascript
浅析JS中document对象的一些重要属性
Mar 06 #Javascript
You might like
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
python实现自动更换ip的方法
2015/05/05 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
UNIX特点都有哪些
2016/04/05 面试题
军神教学反思
2014/02/04 职场文书
药店收银员岗位职责
2015/04/07 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
详解在OpenCV中如何使用图像像素
2022/03/03 Python
OpenCV实现常见的四种图像几何变换
2022/04/01 Python