jQuery学习笔记之jQuery选择器

常用的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>