常用的CSS选择器:
1、标签选择器:E{CSS规则} 以文档元素作为选择符
2、ID选择器:#ID{CSS规则} 以文档元素的唯一标识符ID作为选择符
3、类选择器:E.className{CSS规则} 以文档元素的class作为选择符
4、群组选择器:E1,E2,E3{CSS规则} 多个选择符应用同样的样式规则
5、后代选择器:E F{CSS规则} 元素E的任意后代元素F
6、通配选择器:*{CSS规则} 以文档的所有元素作为选择符
jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
一、基本选择器:
选择器 描述 返回
#id 根据给定的id匹配一个元素 单个元素
.class 根据给定的类名匹配元素 集合元素
element 根据给定的元素名匹配元素 集合元素
* 根据给定的元素名匹配元素 集合元素
selector1,selector2, 将每一个选择器匹配到的元素合并后一起返回 集合元素
... selectorN
二、层次选择器:
选择器 描述 返回
$("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素 集合元素
$("parent>child") 选取parent元素下的child(子)元素, 集合元素
与$("ancestor descendant") 有区别,
$("ancestor descendant") 选择的是后代元素
$('prev+next') 选取紧接在prev元素后的next元素 集合元素
$('prev~siblings') 选取prev元素之后的所有siblings元素 集合元素
可以用next方法代替$('prev+next')
可以用nextAll()方法代替$('prev~siblings')
三、过滤选择器:
1、基本过滤选择器
选择器 描述 返回
:first 选取第1个元素 单个元素
:last 选取最后一个元素 单个元素
:not(selector) 去除所有与给定选择器匹配的元素 集合元素
:even 选取索引是偶数的所有元素,索引从0开始 集合元素
:odd 选取索引是奇数的所有元素,索引从0开始 集合元素
:eq(index) 选取索引等于index的元素(index从0开始) 单个元素
:gt(index) 选取索引大于index的元素(index从0开始) 集合元素
:lt(index) 选取索引大于index的元素(index从0开始) 集合元素
:header 选取所有的标题元素 集合元素
:animated 选取当前正在执行动画的所有元素 集合元素
2、内容过滤选择器
选择器 描述 返回
:contains(text) 选取含有文本内容为"text"的元素 集合元素
:empty 选取不包含子元素或者文本的空元素 集合元素
:has(selector) 选取含有选择器所匹配的元素的元素 集合元素
:parent 选取含有子元素或者文本的元素 集合元素
3、可见性过滤选择器
选择器 描述 返回
:hidden 选取所有不可见元素 集合元素
:visible 选取所有可见元素 集合元素
4、属性过滤选择器
选择器 描述 返回
[attribute] 选取拥有此属性的元素 集合元素
[attribute=value] 选取属性值为value的元素 集合元素
[attribute!=value] 选取属性值不为value的元素 集合元素
[attribute^=value] 选取属性的值以value开始的元素 集合元素
[attribute$=value] 选取属性的值以value结束的元素 集合元素
[attribute*=value] 选取属性的值含有value的元素 集合元素
[selector1][selector2] 用属性选择器合并成一个复合属性 集合元素
..[selectorN] 选择器,满足多个条件。每选择一
次,缩小范围一次
5、子元素过滤选择器
选择器 描述 返回
:nth-child 选取每个父元素下的第index 集合元素
(index/even/ 个子元素或者奇偶元素(index
odd/equation) 从1算起)
:first-child 选取每个父元素的第一个子元素 集合元素
:last-child 选取每个父元素的最后一个子元素 集合元素
:only_child 如果每个元素是它父元素中唯一 集合元素
的子元素,那么将会被分配。如果
父元素中含有其他元素,则不会被
分配
6、表单对象属性过滤选择器
选择器 描述 返回
:enabled 选取所有可用元素 集合元素
:disabled 选取所有不可用元素 集合元素
:checked 选取所有被选中的元素(单选框,复选框)集合元素
:selected 选取所有被选中的选项元素(下拉列表) 集合元素
四、表单选择器
选择器 描述 返回
:input 选取所有的<input><select> 集合元素
<button>元素
:text 选取所有的当行文本框 集合元素
:password 选取所有的密码框 集合元素
:radio 选取所有的单选框 集合元素
:checkbox 选取所哟的多选框 集合元素
:submit 选取所有的提交按钮 集合元素
:image 选取所有的图像按钮 集合元素
:reset 选取所有的充值按钮 集合元素
:button 选取所有的按钮 集合元素
:file 选取所有的上传域 集合元素
:hidden 选取所有的不可见元素 集合元素
示例代码:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery选择器示例</title>
<script type="text/javascript" src="scripts/jquery-1.4.js"></script>
<style type="text/css">
div,span,p{
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini{
width:55px;
height:55px;
background-color:#aaa;
font-size:12px;
}
div.hide{
display:none;
}
</style>
</head>
<body>
<div class="one" id="one">id为one,class为one的div
<div class="mini">class为mimi</div>
</div>
<div class="one" id="two" title="test">id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one" >
<div class="mini">class为mimi</div>
<div class="mini">class为mimi</div>
<div class="mini">class为mimi</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mimi</div>
<div class="mini">class为mimi</div>
<div class="mini">class为mimi</div>
<div class="mini" title="tesst">class为mimi,title为tesst</div>
</div>
<div style="display:none;" class="none" >style为display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素。</span>
<script type="text/javascript">
//一、基本选择器
//$('#one').css("background","#bbffaa");//改变id为one的元素的背景色
//$('.mini').css("background","#bbffaa");//改变class为mini的所有元素的背景色
//$('div').css("background","#bbffaa");//改变元素名为div的所有元素的背景色
//$('*').css("background","#bbffaa");//改变所有元素的背景色
//$('span,#two').css("background","#bbffaa");//改变所有的<span>元素和id为two的元素的背景色
//二、层次选择器
//$('body div').css("background","bbffaa");//改变<body>内所有<div>的背景色
//$('body >div').css("background","bbffaa");//改变<body>内子<div>元素的背景色
//$('.one+div').css("background","#bbffaa");//改变class为one的下一个元素<div>元素背景
//$('.one').next('div').css("background","#bbffaa")
//$('#two~div').css("background","#bbffaa");//改变id为two的元素后面的所有<div>兄弟元素的背景色
//$('#two').nextAlll('div').css("background","#bbffaa");
//$("#two").siblings("div").css("background","#bbffaa");
//问题:
//1、$('body >div')改变的是子<div>的背景颜色,不包括子<div>里面的 子元素
// $('body div')改变的是子<div>的背景颜色,同时包括子<div>里面的子元素
//2、$('.one+div'):当检测到第一个class为one的元素,找到紧接它的下一个div元素,改变背景色,
// 再继续寻找第二个,找到紧接它的下一个div元素,改变背景色,直到找到最后一个class为one的元素。
//3、等价关系:$(".one+div")==$(".one").next("div")
// $("#prev~div")==$("prev").nextAll("div")
//4、siblings()方法与$('prev~siblings')选择器进行比较
// $('prev~siblings')选择器只能选择"prev"选上后面的同辈的<siblings>元素;
// siblings()方法与前后位置无关,只要是同辈节点就能匹配
//三、过滤选择器
//1、基本过滤选择器
//$('div:first').css("background","#bbffaa");//改变第一个<div>元素的背景色
//$('div:last').css("background","#bbffaa");//改变最后一个<div>元素的背景色
//$('div:not(.one)').css("background","#bbffaa");//改变class不为one的<div>元素的背景色
//$('div:even').css("background","#bbffaa");//改变索引值为偶数的<div>元素的背景色
//$('div:odd').css("background","#bbffaa");//改变索引值为奇数的<div>元素的背景色
//$('div:eq(3)').css("background","#bbffaa");//改变索引值为3的<div>元素的背景色
//$('div:gt(3)').css("background","#bbffaa");//改变索引值大于3的<div>元素的背景色
//$('div:lt(3)').css("background","#bbffaa");//改变索引值小于3的<div>元素的背景色
//$(':header').css("background","#bbffaa");//改变所有标题元素
//$(':animated').css("background","#bbffaa");//改变当前正在执行动作画元素的背景色
//注意:索引是从0开始计算的
//2、内容过滤器
//$('div:contains(di)').css("background","#bbffaa");//改变含有文本的"di"的<div>元素的背景色
//$('div:empty').css("background","#bbffaa");//改变不包含子元素(包括文本元素)的<div>空元素的背景色
//$('div:has(.mini)').css("background","#bbffaa");//改变含有class为mini元素的<div>元素的背景色
//$('div:parent').css("background","#bbffaa");//改变含有子元素(包括文本元素)的<div>元素的背景色
//3、可见过滤选择器
//$("div:visible").css("background","#FF6500");//改变所有可见<div>元素的背景色
//$('div:hidden').show(1000);//显示所有隐藏元素
//注意::hidden不仅包括样式属性display为"none"的元素,
// 也包括文本隐藏域(<input type="hidden"/>)和visibility:hidden之类的元素
//4、属性过滤选择器
//$('div[title]').css("background","#bbffaa");//改变含有属性title的<div>元素的背景色
//$('div[title=test]').css("background","#bbffaa");//改变属性title值等于"test"的<div>元素的背景色
//$('div[title!=test]').css("background","#bbffaa");//改变属性title值不等于"test"的<div>元素的背景色
//$('div[title^=te]').css("background","#bbffaa");//改变属性title值以"te"开始的<div>元素的背景色
//$('div[title$=est]').css("background","#bbffaa");//改变属性title值以"te"结束的<div>元素的背景色
//$('div[title*=es]').css("background","#bbffaa");//改变属性title值含有"es"结束的<div>元素的背景色
//$('div[id][title*=es]').css("background","#bbffaa");//改变含有属性id并且属性title值含有"es"的<div>元素的背景色
//5、子元素过滤选择器
//$('div.one:nth-child(2)').css("background","#bbffaa");//改变每个class为one的<div>父元素下的第2个子元素 的背景色
//$('div.one:first-child').css("background","#bbffaa");//改变每个class为one的<div>父元素下的第1个子元素 的背景色
//$('div.one:last-child').css("background","#bbffaa");//改变每个class为one的<div>父元素下的最后一个子元素 的背景色
//$('div.one:only-child').css("background","#bbffaa");//如果class为one的<div>父元素先只有一个子元素,那么则改变这个子元素的背景色
//注意::eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,
// 并且:nth-child(index)的index是从1开始的,而:eq(index)是从0开始的
// :first只返回单个元素,而 :first-child选择符将为每个父元素匹配第一个子元素
// :last只返回单个元素,而 :first-child选择符将为每个父元素匹配最后一个子元素
//nth-child()选择器详细功能
//1、:nth-child(even)能选取每个父元素下的索引值是偶数的元素
//2、:nth-child(odd)能选取每个父元素下的索引值是奇数的元素
//3、:nth-child(2)能选取每个父元素下的索引值等于2的元素
//4、:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素,(n从0开始)
//5、:nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素,(n从0开始)
</script>
</body>
</html>