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 相关文章推荐
用JS剩余字数计算的代码
Jul 03 Javascript
js 图片缩放(按比例)控制代码
May 27 Javascript
javascript Array.remove() 数组删除
Aug 06 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
js实现窗口全屏示例详解
Sep 17 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
python爬虫常用的模块分析
2014/08/29 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
python3代码中实现加法重载的实例
2020/12/03 Python
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
自动化专业毕业生自荐信
2013/11/01 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
装饰活动策划方案
2014/02/11 职场文书
辞职信怎么写
2015/02/27 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
中秋节感想
2015/08/10 职场文书
导游词之江南周庄
2019/12/06 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
python的变量和简单数字类型详解
2021/09/15 Python
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技