jquery选择器的使用方式
|
选择器
|
描述
|
返回
|
示例
|
代码说明
|
1
|
id选择器
|
根据指定的id匹配元素
|
单个元素
|
$("#one").css("background","#bbffaa");
|
找到id为one的元素,改变其background属性
|
2
|
class选择器
|
根据给定的类名匹配元素
|
集合元素
|
$(".mini").css("background","#1f496c");
|
找到class为mini的所有元素,改变其background属性
|
3
|
element
|
根据给定的元素名匹配元素
|
集合元素
|
$("div").css("background","#bbffaa");
|
找到所有的div元素,改变其background属性
|
4
|
*
|
匹配所有元素
|
集合元素
|
$("*").css("background","#bbffaa");
|
选取所有的元素 |
5
|
select1,select2,......selectN
|
将每一个选择器匹配到的元素合并后一起返回
|
集合元素
|
$("span , #two").css("background","#bbffaa"); | 改变所有的span元素和id为two的元素的背景色 |
2.层次选择器
|
选择器
|
描述
|
返回
|
示例
|
代码说明
|
1
|
$("ancestor descendant) | 选取ancestor元素里的所有descendant元素 | 集合元素 | $("body div").css("background","#bbffaa"); | 选取所有body下的div元素,改变背景色 |
2
|
$("parent>child") | 选取parent元素下的子元素 | 集合元素 | $("body>div").css("background","#bbffaa"); | 选取body下的元素名称为div的子元素 |
3
|
$("prev+next") | 选择紧接在prev元素后的next元素 | 集合元素 | $(".one+div").css("background","#bbffaa"); | 改变class为one的下一个div同辈元素的背景色 |
4
|
$("prev~sibling") | 选择紧接在prev元素后的sibling 元素 | 集合元素 | $("#two~div").css("background","#bbffaa"); | 改变id为two的元素后面的所有div同辈元素的背景色 |
说明:在层次选择器中,前两个比较常用。
|
选择器
|
描述
|
返回
|
示例
|
代码说明
|
1
|
:first | 选取第一个元素 | 单个元素 | $("div:first").css("background","#bbffaa"); | 改变第一个div的颜色 |
2
|
:last | 选取最后一个元素 | 单个元素 | $("div:last").css("background","#bbffaa"); | 改变最后一个div的颜色 |
3
|
:not(selector) | 去掉所有与给定的选择器的元素 | 集合元素 | $("div:not(.one)").css("background","#bbffaa"); | 改变class不为one的div元素的背景色 |
4
|
:even | 选取索引为偶数的元素 | 集合元素 | $("div:even").css("background","#bbffaa"); | 改变索引值为偶数的div的背景色 |
5
|
:odd |
选取索引为奇数的元素
|
集合元素
|
$("div:odd").css("background","#bbffaa");
|
改变索引值为奇数的div的背景色
|
6
|
:eq(index)
|
选取索引值为index的元素,index 从0开始 |
单个元素
|
$("div:eq(3)").css("background","#bbffaa");
|
改变索引值为3的div的背景色
|
7
|
:gt(index)
|
选取索引值大于index的元素,index 从0开始
|
集合元素
|
$("div:gt(3)").css("background","#bbffaa");
|
改变索引值大于3的div的背景色
|
8
|
:lt(index)
|
选取索引值小于index的元素,index 从0开始
|
集合元素
|
$("div:lt(3)").css("background","#bbffaa");
|
改变索引值小于3的div的背景色
|
9
|
:header |
选取所有的标题元素
|
集合元素
|
$(":header").css("background","#bbffaa");
|
改变所有标题(h1,h2等)元素背景色
|
10
|
:focus
|
选取当前焦点的元素 |
单个元素
|
$(":focus ").css("background","#bbffaa");
|
改变当前获得焦点的元素的背景色
|
3.2内容过滤选择器
|
选择器
|
描述
|
返回
|
示例
|
代码说明
|
1
|
:contains(text) | 选取含有文本内容为text的文本元素 |
集合元素
|
$("div:contains(我)").css("background","#bbffaa");
|
改变含有文本“我”的div的元素的背景色
|
2
|
:empty | 选取不包含子元素或者文本的元素 |
集合元素
|
$("div:empty").css("background","#bbffaa");
|
改变不包含文本(或子元素)的div的背景色
|
3
|
:has(select)
|
选取选择器所匹配的元素的元素 |
集合元素
|
$("div:has('.mini')").css("background","#bbffaa");
|
改变div里面包含clss为mini的元素的div的背景色
|
4
|
:parent
|
选取包含含子元素或者文本的元素
|
集合元素
|
$("div:parent").css("background","#bbffaa");
|
改变包含文本(或子元素)的div的背景色
|
3.3内容过滤选择器
|
选择器
|
描述
|
返回
|
示例
|
代码说明
|
1
|
[attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]").css("background","#bbffaa"); | 改变具有id属性的div的背景色 |
2
|
[attribute=value] | 选取属性的值为value的元素 | 集合元素 | $("div[id=one]").css("background","#bbffaa"); | 改变具有id属性为one的div的背景色 |
3
|
[attribute!=value] | 选取属性的值不为value的元素 | 集合元素 | $("div[id!=one]").css("background","#bbffaa"); | 改变具有id属性不为one的div的背景色 |
4
|
[attribute^=value] | 选取属性的值以value开始元素 | 集合元素 | $("div[title^=te]").css("background","#bbffaa"); | 改变title值为te开头的div元素的背景色 |
5
|
[attribute$=value]
|
选取属性的值以value结尾的元素
|
集合元素
|
$("div[title$=s]").css("background","#bbffaa");
|
改变title值为s结尾的div元素的背景色
|
6
|
[attribute*=value]
|
选取属性的值含有value的元素
|
集合元素
|
$("div[title*=s]").css("background","#bbffaa");
|
改变title值含有s的div元素的背景色 |
7
|
[attribute|=value]
|
选取属性等于给定字符串或以该字符串为前缀(该字符串后面跟一个连接符(-))的元素
|
集合元素
|
$("div[title|=test]").css("background","#bbffaa");
|
改变title值为test或者该字符串后面跟-符号的div的元素的背景色
|
8
|
[attribute~=value]
|
选取属性用空格分割的值中包含一个给定值的元素
|
集合元素
|
$("div[title~=test]").css("background","#bbffaa");
|
改变title用空格分割的值中包含字符test的div的元素的背景色
|
9
|
[arrtibute1][arrtibute2][arrtibute3]
|
合并为符合选择器 |
集合元素
|
$("div[id=one][title^=te]").css("background","#bbffaa");
|
改变id属性为one并且title属性以te开头的div元素的背景色 |
3.4子元素滤选择器
|
选择器
|
描述
|
返回
|
示例
|
代码说明
|
1
|
:nth-child(index/even/odd/equation) | 选取每个父元素下的第index个子元素,或者奇偶元素 |
集合元素
|
$("div .one :nth-child(2)").css("background","#bbffaa"); | 改变class为one的div父元素下的第二个元素的背景色 |
2
|
:first-child
|
选取每个父元素下的第一个子元素 |
集合元素
|
$("div .one :first-child").css("background","#bbffaa");
|
改变class为one的div的父元素下的第一个子元素的背景色 |
3
|
:last-child
|
选取每个父元素下的最后一个子元素
|
集合元素
|
$("div .one :last-child").css("background","#bbffaa");
|
改变class为one的div的父元素下的最后一个子元素的背景色
|
4
|
:only-child
|
如果每个元素是他父元素中唯一的子元素,那么将会被选择,父元素中不含其他元素,不会被匹配
|
集合元素
|
$("div .one :only-child").css("background","#bbffaa");
|
如果class为one的div父元素下只有一个子元素,改变子元素的背景色
|
jquery选择器的使用方式的更多相关文章
- jQuery选择器——全新的总结方式
jQuery 选择器的总结 用于定位的选择器: 基本选择器:(用来进行绝对定位) $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档 ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器
1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器续1
在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jQuery选择器(一)
晚上闲着没事,正好用来整理下jQuery的选择器,毕竟没有总结就不算学习嘛. 首先,对事件处理.遍历DOM和Ajax操作,都依赖于选择器. 1.CSS选择器 要使用某个HTML元素,就先要找到它,而c ...
随机推荐
- Android ActivityManager.killBackgroundProcesses方法去结束
android2.2以后,如果服务在ondestroy里加上了start自己,用kill backgroudprocess通常无法结束自己.有一种最新发现的方法,利用反射调用forceStopPack ...
- [FJSC2014]异或之
[题目描述] 给定n个非负整数A[1], A[2], ……, A[n]. 对于每对(i, j)满足1 <= i < j <= n,得到一个新的数A[i] xor A[j],这样共有n ...
- Matlab与CCS的连接
1.CCS概述 Matlab 6.5(R13)或以上集成了CCSLink工具,可以支持CCS能够识别的任何板卡及其硬件DSP. 验证CCSLink是否在主机上安装成功,Matlab输入命令:help ...
- java多线程编程(1) 线程的基本知识
在前面研究过多线程与进程的区别. 这里在稍微总结一下: 进程:程序动态的一次执行过程. 线程:可以只是程序员的一部分的执行过程 每个进程有多个线程组成,在java程序中,至少两个线程一个是垃圾回收线程 ...
- 《University Calculus》-chaper13-多重积分-二重积分的计算
之前关于二重积分的笔记,介绍了二重积分概念的引入,但是对于它的计算方法(化为累次积分),介绍的较为模糊,它在<概率论基础教程>中一系列的推导中发挥着很重要的作用. 回想先前关于二重积分的几 ...
- Kadj Squares - POJ 3347
题目大意:给一些序列的正方形的边长,然后让这个正方形倾斜45度,放在第一象限,一个角要紧挨着x轴,按照输入的顺序放下去,然后问最后从上往下看可以看到那些正方形? 分析:不能算是计算几何题..... ...
- Spring AOP配置与应用
1. 两种方式: a) 使用Annotation b) 使用xml 2. Annotation a) 加上对应的xsd文件spring-aop.xsd b) ...
- linux下配置固定ip
今天在VM上装linux6.3,装的时候没有配置ip,虚拟机连接方式选的NAT方式,可以直接上网.我装这几次虚拟机系统只有这次虚拟机上去网了,挺爽.但是问题又出来了,就是我本机Windows远程不上虚 ...
- js 中cookie 使用
一个系统有多种 角色, 每一种角色不同权限.后台请求的数据根据权限展示 ,所以要把权限保存在浏览器中. 首先 引入 在页面 <script type="text/javascript& ...
- css开发经验&错误习惯
CSS开发经验 1.尽量用class来定义样式.尽量少使用 .div1 ul li{}这样的样式下去,因为如果li里面还有<div><ul><li>这些元素的话会 ...