CSS 选择器、jQuery选择器大全
CSS 选择器
CSS选择器参考手册:http://www.w3school.com.cn/cssref/css_selectors.asp
jQuery选择器大全
一、基本选择器
1. id选择器(指定id元素)id选择器返单个元素)
$('#one').css('background', '#000');
2. class选择器(遍历css类元素)
$('.one').css('background', '#000');
3. element选择器(遍历html元素)
$('p').css('font-size', '12px');
4. * 选择器(遍历所有元素)
// 遍历form下的所有元素,将字体颜色设置为红色$('form *').css('color', '#FF0000');
5. 并列选择器
// 将所有p元素和div元素的margin设为0$('p, div').css('margin', '0');
二、 层次选择器
1. parent > child(直系子元素)
// 选取div下的第一代span元素,将字体颜色设为红色$('div > span').css('color', '#FF0000');
2. prev + next(下一个兄弟元素,等同于next()方法)
// 选取class为item的下一个div兄弟元素$('.item + div').css('color', '#FF0000');// 等价代码//$('.item').next('div').css('color', '#FF0000');
3. prev ~ siblings(prev元素的所有兄弟元素,等同于nextAll()方法)
// 选取class为inside之后的所有div兄弟元素$('.inside ~ div').css('color', '#FF0000');// 等价代码//$('.inside').nextAll('div').css('color', '#FF0000');
三、 过滤选择器
1. 基本过滤选择器
——1.1 :first和:last(取第一个元素或最后一个元素)
$('span:first').css('color', '#FF0000');$('span:last').css('color', '#FF0000');
——1.2 :not(取非元素)
// 当非这个元素的div和非这个元素是父子关系时, 都会变色$('div:not(.wrap)').css('color', '#FF0000');
——1.3 :even和:odd(取偶数索引或奇数索引元素,索引从0开始,even表示偶数,odd表示奇数)
$('tr:even').css('background', '#EEE'); // 偶数行颜色$('tr:odd').css('background', '#DADADA'); // 奇数行颜色
——1.4 :eq(x) (取指定索引的元素)
$('tr:eq(2)').css('background', '#FF0000');
——1.5 :gt(x)和:lt(x)(取大于x索引或小于x索引的元素)
$('ul li:gt(2)').css('color', '#FF0000');$('ul li:lt(2)').css('color', '#0000FF');
*——1.6 :header(取H1~H6标题元素)
// H1~H6的背景色都会变$(':header').css('background', '#EFEFEF');
2. 内容过滤选择器
——2.1 :contains(text)(取包含text文本的元素)
// dd元素中包含"jQuery"文本的会变色$('dd:contains("jQuery")').css('color', '#FF0000');
——2.2 :empty(取不包含子元素或文本为空的元素)
$('dd:empty').html('没有内容');
——2.3 :has(selector)(取选择器匹配的元素)
/ 为包含span元素的div添加边框$('div:has(span)').css('border', '1px solid #000');
——2.4 :parent(取包含子元素或文本的元素)
$('ol li:parent').css('border', '1px solid #000');
3. 可见性过滤选择器
——3.1 :hidden(取不可见的元素)
jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素,而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素,像visibility:hidden或opactity:0的元素占据了空间,会被排除在外。
——3.2 :visible(取可见的元素)
4. 属性过滤选择器
——4.1 [attribute](取拥有attribute属性的元素)
// a标签带title属性,取消下划线
$('a[title]').css('text-decoration', 'none');
——4.2 [attribute = value]和[attribute != value](取attribute属性值等于value或不等于value的元素)
、
CSS 选择器、jQuery选择器大全相关推荐
- Jmeter之CSS选择器/JQuery选择器关联
选择器: CSS选择器或JQuery选择器是Jmeter支持的两种语法,下面对其两种语法进行简单介绍 CSS选择器 JQuery选择器 Chrome - 复制CSS选择器 Google Chrome在 ...
- 常用CSS与Jquery选择器
1.常用CSS选择器 在介绍CSS选择器之前先介绍CSS各个选择器的权重,权重用于解决CSS样式的冲突问题. a.选择器权重 选择器 权重 继承 * 0,0,0,0 伪元素,元素选择器 0,0,0,1 ...
- 前端 -> js原生选择器,jQuery选择器 基本选择器(ID选择器,元素选择器,类名选择器,复合选择器,通配符选择器)
文章目录 jQuery基本选择器 js选择器(原生选择器) jQuery基本选择器 1. ID选择器ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素,并以iQuery包装集的形式返回给对 ...
- jQuery选择器大全总结
jQuery选择器 jQuery的选择器 基本选择器 层次选择器 过滤选择器 基本过滤选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 表单选择器 子元素选择器 表单对象属性过滤选择器 jQu ...
- [翻译]帮助文档-jQuery 选择器
jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言.如果你了解CSS(绝大部分WEB开发者都用到的),那 ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- 精通jQuery选择器使用 转一篇
精通jQuery选择器使用 转一篇 jQuery 具有一个相当强大的选择器引擎,提供了完整的选择器语法,允许我们选择几乎所有的元素组合.jQuery 的选择器语法主要是基于 CSS3 和 XPath ...
- JQuery-学习笔记02【基础——JQuery选择器】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- Jqurey学习笔记---3、jQuery 选择器
jQuery 选择器 jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery ...
- jQuery选择器和选取方法
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
最新文章
- python实现socket编程,服务端开启多线程(和多个客户端聊天)
- 如何将字符串前后的空白去除(C/C++) (STL)
- linux 开机启动文件夹,Linux开机启动流程
- Linux计划任务(at,crontab)
- win10默认浏览器不显示谷歌浏览器_win10系统谷歌浏览器怎么用不了?谷歌浏览器打不开网页的解决方法...
- docker安装Oracle 11g
- SSDP:DDoS***的“新宠”
- Windows Mobile 进阶系列.WCF Mobile(Part 2)
- 2021 年 6 个GitHub推荐前端项目
- R语言进行系统聚类分析并作图(数据来源国家统计局)
- matlab 存成bmp格式,MAT、BMP、PNG文件格式说明及MATLAB中文件的保存方式
- YAPI自动生成接口文档,解放测试人生产力...
- 用优启通制作U盘启动盘教程(UEFI版)
- 联想Y7000P win11笔记本双硬盘安装Ubuntu20双系统和显卡驱动
- 第三方支付和聚合支付
- Hello Qt——Qt自定义标题栏
- banner设圆角_com.youth.banner.Banner 使用glide加载圆角图片无效
- 热血格斗场和冷血格斗场
- php7反序列化问题,PHP7:反序列化漏洞案例及分析
- 线阵相机的线扫描速率的计算方法