jQuery常见的选择器及用法介绍


Posted in Javascript onDecember 20, 2016

选择器的意义就是将众多html代码中准确的找出我们想找的单元。

接下来将常见的选择器以及作用列举出来。

基本选择器

$('#test1').css('background' , 'gray');
可以找到id = test1的单元。
$('p').css('background' , 'blue');
所有的P标签都会被选中。
 $('.test2').css('background' , 'green');
Class = test2的单元全部被选中。
 $('*').css('background','pink');
*指的就是所有元素,慎用。

层次选择器

$('div span').css('background' , 'orange');
div下的span将全部选中
<div><span>www.zixue.it</span></div>
<div><p><span>www.itbool.com</span></p></div>
这样的也会被选中
$('p ~ span').css('background' , 'gray');
<div><p></p><span>www.itbool.com</span></div>
像这样的span和P属于同一级别。将被选中。

基础过滤器

例:

<ul>
<li> 导航 1</li>
<li> 导航 2</li>
<li> 导航 3</li>
<li> 导航 4</li>
<li> 导航 5</li>
<li> 导航 6</li>
</ul>

例如这样的,你想细致到具体的某一个。则需要加上特殊的说明

$('li:first').css('background','red');

找第 1 个

$('li:odd').css('background','blue');

找第奇数个 , 从 0 计数这里有一个细节,就是我们通常认为的第一个,在这里认为成第0个,就是说如果用这个的话,则是我们经常输出来的2 4 6 8个将被选中。换成even则是选出所有偶数的li了

$('li:eq(2)').css('background' , 'purple');

同上选出第二个,就是我们通常所属的第三个。

内容过滤器

可以通过内容找到要找的目标

$('td:contains(" 女 ")').css('background' , 'blue');

可以选出内容是女的单元

<td> 女 </td>

但是不会选出

<td> 赵云女 </td>

这样的

$('td:empty').css('background' , 'green');

Empty是空的意思,所以内容为空的都会选出来,但是,如果内容内有空格的话,就不会选中了

$('td:has(span)').css('background' , 'pink');

td里含有某元素的话,就会被找出来。

<td><span>22</span></td>

被选中的,则整个td都会被选中。比如这样的

<td><span>22</span><p>11</p>24</td>

不是改变span而是改变td这个单元。

$('p:parent').css('background' , 'black');

单元里面有东西的都会被选中,但是空格不算。

表单类型过滤器

$('input[type="text"]').css('background' , 'gray');
$('input:text').css('background' , 'blue');

这两个是一个性质的

<input type="text" />

选中input里的type属性作为目标。

其他属性password则替换text就可以了同理。

可见性过滤器

$('div:hidden').css('display','block');

利用触发器,可以选中原本display属性为hidden的div。

子元素过滤器

$('p:last-of-type').css('background','gray');

可以选中同一级别下最后一个P标签。

<div><p>a</p><p>b</p></div>

这样的话,含有b的p标签就会被涂上颜色。

特殊情况

<div></div>
<div class='a1'>
<div></div>
<div></div>
<div class='a2'></div>
</div>

两个有class名的div会被产生作用。

$('li a:only-child').css('background','blue')

匹配 li 下作为独生子的 a 标签。例如

<li><a href=""> 导航 </a></li>

不能有其他标签,但是可以有内容。

以上所述是小编给大家介绍的jQuery常见的选择器及用法介绍,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript新手语法小结
Jun 15 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
node.js express框架简介与实现
Jul 23 Javascript
JavaScript实现音乐导航效果
Nov 19 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 #Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 #Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 #Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 #Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 #Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 #Javascript
JS简单实现表格排序功能示例
Dec 20 #Javascript
You might like
php不用正则采集速度探究总结
2008/03/24 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
python db类用法说明
2020/07/07 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
春节超市活动方案
2014/08/14 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
老人节主持词
2015/07/04 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs