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 相关文章推荐
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
微信小程序8种数据通信的方式小结
Feb 03 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
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
php实现数字补零的方法总结
2018/09/12 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
利用Python实现kNN算法的代码
2019/08/16 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
浅谈Python中的模块
2020/06/10 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
教育学专业毕业生的自我鉴定
2013/11/26 职场文书