Jquery学习五-1---jQuery常用选择器
2012-02-03 15:29
232 查看
先给出如下的html代码,下面的举例都是对该段html代码的操作或者使用。
注意:文中所有的提到的元素都是指元素自己和自己的所有后代元素,不能隔代匹配。
注意:使用上面所有的选择器返回的都是jquery对象,也就是一个javascript数据集合或者说是dom对象集合
<div id="firstDiv"> <p id="firstPara" class="para">段落一</p> <p id="secPara" class="para">段落二</p> </div> <div id="secDiv"> <p id="thiPara" class="para">段落三</p> <p id="forPara" class="para">段落四</p> </div> <div id="thrDiv" class="123"> <p id="fivPara">段落五</p> <div class="pp"> 我是一个div <p id="sixPara">段落六</p> </div> </div>
Jquery常用选择器 | 说明 |
#id | Id选择器,根据元素的id属性值来匹配特定的元素,和css中的id选择器是对应的。每一个元素的id属性值不同。包括其子元素的文本。 举例: 选择id为thrDiv的元素,并将其边框设置成颜色为红色,边框宽度为1个像素,边框类型为solid。 $("#thrDiv").css("border","solid red 1px"); |
.class | 类选择器,根据元素的class属性值来匹配,匹配一个或者多个元素。包括子元素文本。 举例: 选择class属性值为para的所有元素,并将元素内容文本颜色设置成黄色。 $(".para").css("color","yellow"); |
Element | 标签选择器,根据给定的元素的名称来匹配所有的元素。包括子元素文本。 举例 选择页面上所有的p标签元素,将内容的字体粗细都设置成800。 $("p").css("font-weight","800"); |
* | 通配符,匹配所有元素,当然了可以匹配局部所有元素。 看例子吧: 匹配页面所有元素:让页面中所有的元素的内容的对齐方式都设置成居中对齐。 $("*").css("text-align","center"); 匹配局部元素:获取id为secDiv的div,并将其内容字体大小设置成24px $("#secDiv *").css("font-size","24px"); |
Parent > child | 子选择器:匹配给定的父元素下所有的指定的子元素。 例子:将id为thrDiv的div中下的p元素的字体设置成红色 注意:这里是父元素下的直接子元素,也就是说子元素下的p元素不会被更改颜色。 $("#thrDiv>p").css("color","red"); |
Ancestor descendant | 包含选择器:在指定的元素下匹配该元素下的所有后代元素,而不止是其直接子元素,这个就是包含选择器和子选择器的区别。 例子:将id为thrDiv的div下的所有的p标签的内容颜色更改为红色,包括该元素下子元素下的p标签。 $("#thrDiv p").css("color","red"); |
选择器1,选择器2,选择器3,……选择器n | 选择器分组:就是说将各个选择器匹配的对象进行组合后,来进行统一的设置。 例子:将第一个段落,第四个段落,最后一个div中的内容颜色设置成蓝色。 $("#firstPara,#forPara,#thrDiv").css("color","blue"); |
Pre+next | 相邻选择器:匹配pre元素后所有的next元素。注意,匹配成功的元素是在当前父元素下直接子元素,子元素的子元素不会被匹配,看例子。 $("#secPara+p").css("color","red"); 此时不会有匹配项 $("#firstPara+p").css("color","red"); 此时只有一个匹配项:id为secPara的p标签 $("#fivPara+p").css("color","red"); 此时sixPara不会被匹配,没有一个匹配项。 |
Pre~siblings | 同级,兄弟节点:匹配pre元素后的兄弟元素,包括该兄弟元素的所有后代元素。 例子:第二个div后的兄弟元素文本设置为红色 $("#secDiv~div").css("color","red"); |
【attribute】 | 属性选择器:匹配包含给定属性的元素 例子: $("[id]").css("color","red"); 这样元素为id的文本内容都会被设置成红色。 |
【attribute=value】 | 属性选择器:匹配给定属性等于某个值的元素。 例子: $("[class=para]").css("color","red"); 这样class属性值为para的元素的文本都会被设置成红色。 |
【attribute!=value】 | 属性选择器:匹配给定属性值不是某个值的元素 例子: $("p[class!=para]").css("color","red"); 这样,p标签中,class属性值不是para的都会被修饰。 |
【attribute^=value】 | 匹配给定的属性是以某个值开始的元素 例子: $("[class^=p]").css("color","red"); |
【attribute$=value】 | 匹配给定的属性是以某个值结束的元素 例子: $("[class$=p]").css("color","red"); |
【attribute*=value】 | 匹配给定的属性值是包含给定值的元素。 例子: $("[id*=a]").css("color","red"); |
【属性选择器1】【属性选择器2】…【属性选择器n】 | 复合属性选择器:多个属性选择器选择的对象的重叠部分,也即是满足所有属性选择器的元素。 $("[id][class=123]").css("color","red"); 看来只有一个符合,第三个div。 |
注意:使用上面所有的选择器返回的都是jquery对象,也就是一个javascript数据集合或者说是dom对象集合
相关文章推荐
- jQuery选择器大全详解[常用学习](1/3)
- 二.javaweb笔记之JQuery学习路线+语法+常用选择器
- jquery选择器(常用选择器说明)
- [原]Java程序员的JavaScript学习笔记(8——jQuery选择器)
- jQuery学习2 选择器的使用说明
- jQuery学习--Chapter02小结(jQuery选择器)
- JQuery 学习笔记 选择器之六
- 【8】jQuery学习——入门jQuery选择器之过滤选择器-子元素过滤选择器
- jquery学习笔记之选择器
- Jquery实战学习--Jquery选择器
- 学习小记(2015/10/19)——工作中遇见的一个关于jQuery选择器的小要点。
- h5学习之3(h5的常用选择器和css常见样式)
- jQuery学习笔记——jQuery选择器详解种类与方法
- 【10】jQuery学习——入门jQuery选择器之表单选择器
- 【11】jQuery学习——入门jQuery选择器之过滤选择器-表单对象属性过滤选择器
- jQuery学习之一-----jQuery常用的函数用法
- JQuery学习笔记-基本过滤选择器
- jQuery学习笔记之可见性过滤选择器
- jQuery学习-------jQuery选择器
- jQuery基础----03jQuery选择器和事件-事件之事件常用方法