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 相关文章推荐
用JavaScript获取网页中的js、css、Flash等文件
Dec 20 Javascript
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
JS实现横向跑马灯效果代码
Apr 20 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
快速入门Vue
2016/12/19 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
python类继承用法实例分析
2015/05/27 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
PyQt实现计数器的方法示例
2021/01/18 Python
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
计算机专业个人求职信范例
2013/09/23 职场文书
优秀教师先进事迹
2014/01/22 职场文书
渡河少年教学反思
2014/02/12 职场文书
农村党员一句话承诺
2014/05/30 职场文书
安全施工标语
2014/06/07 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书