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 同时提交多个Web表单的方法
Feb 19 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
详解VUE 数组更新
Dec 16 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 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 google或baidu分页代码
2009/11/26 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
教你php如何实现验证码
2016/01/20 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
python mysqldb连接数据库
2009/03/16 Python
在Python中处理XML的教程
2015/04/29 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
python实现多人聊天室
2020/03/31 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
GMP办公室主任岗位职责
2014/03/14 职场文书
2014最新离职证明范本
2014/09/12 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
学校开除通知书
2015/04/25 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
python爬虫--selenium模块
2021/03/31 Python
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL