《jQuery权威指南》学习笔记之第2章 jQuery选择器

来源:互联网 发布:吊杆控制台编程 编辑:程序博客网 时间:2024/05/20 00:12

2.1 jQuery选择器概述

 

2.1.1 什么使选择器


2.1.2 选择器的优势: 代码更简单,完善的检测机制
 1.代码更简单
  示例2-1     使用javascript实现隔行变色

<html><head><title>使用Javascript实现隔行变色</title><style type="text/css">body {font-size: 12px;text-align: center;}#tbStu {width: 260px;border: solid 1px #666; background-color: #eee;}#tbStu tr {line-height: 23px;text-align: center;}#tbStu tr th {background-color: #ccc;color: #fff;}#tbStu .trOdd {background-color: #fff;}</style><script type="text/javascript">window.onload = function() {var oTb = document.getElementById("tbStu");for(var i=0; i<oTb.rows.length-1; i++) {if(i%2) {oTb.rows[i].className = "trOdd";}}}</script></head><body><table id="tbStu" cellpadding="0" cellspacing="0"><tbody><tr><th>学号</th><th>姓名</th><th>性别</th><th>总分</th></tr><!--奇数行 --> <tr><td>1001</td><td>张小明</td><td>男</td><td>320</td></tr><!--偶数行 --> <tr><td>1002</td><td>李明琪</td><td>女</td><td>350</td></tr></tbody></table></body></html>



  示例2-2     使用jQuery选择器实现隔行变色

<html><head><title>使用jQuery选择器实现隔行变色</title><style type="text/css">body {font-size: 12px;text-align: center;}#tbStu {width: 260px;border: solid 1px #666; background-color: #eee;}#tbStu tr {line-height: 23px;text-align: center;}#tbStu tr th {background-color: #ccc;color: #fff;}#tbStu .trOdd {background-color: #fff;}</style><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><script type="text/javascript">$(function() {$("#tbStu tr:nth-child(even)").addClass("trOdd");});</script></head><body><table id="tbStu" cellpadding="0" cellspacing="0"><tbody><tr><th>学号</th><th>姓名</th><th>性别</th><th>总分</th></tr><!--奇数行 --> <tr><td>1001</td><td>张小明</td><td>男</td><td>320</td></tr><!--偶数行 --> <tr><td>1002</td><td>李明琪</td><td>女</td><td>350</td></tr></tbody></table></body></html>



 2.完善的检测机制
  示例2-3     使用javascript输出文字信息

<html><head><title>Javascript 代码检测页面元素</title><style type="text/css">body {font-size: 12px;text-align: center;}</style><script type="text/javascript">window.onload = function() {if(document.getElementById("divT")) {var oDiv = document.getElementById("divT");oDiv.innerHTML = "这是一个检测页面";}}</script></head><body></body></html>



  示例2-4     使用jQuery输出文字信息

<html><head><title>Javascript 代码检测页面元素</title><style type="text/css">body {font-size: 12px;text-align: center;}</style><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><script type="text/javascript">$(function() {$("#divT").html("这是一个检测页面");});</script></head><body></body></html>

 

2.2 jQuery选择器详解
基本选择器
层次选择器
过滤选择器
      |-简单过滤选择器
      |-内容过滤选择器
      |-可见性过滤选择器
      |-属性过滤选择器
      |-子元素过滤选择器
      |-表单对象属性过滤选择性
表单选择器
  
2.2.1 基本选择器
基本选择器语法:

选择器

功能

返回值

#id 

根据给定的ID匹配一个元素

单个元素

element

根据给定的元素名匹配所有元素 

元素集合

.class 

根据给定的类匹配元素

元素集合

*  

匹配所有元素

元素集合

selector1,selectorN

将每一个选择器匹配到的元素合并后一起返回 

元素集合

     示例2-5     使用jQuery基本选择器选择元素

<html><head><title>使用jQuery基本选择器</title><style type="text/css">body {font-size: 12px;text-align: center;}.clsFrame {width: 300px;height: 100px;}.clsFrame div,span {float: left;width: 65px;height: 65px;border: solid 1px #ccc;margin: 8px;display: none;}.clsOne {background-color: #eee;}</style><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><script type="text/javascript">/*$(function() {$("#divOne").css("display", "block");});$(function() {$("div span").css("display", "block");});$(function() {$(".clsFrame .clsOne").css("display", "block");});$(function() {$("*").css("display", "block");});*/$(function() {$("#divOne,span").css("display", "block");});</script></head><body><div class="clsFrame"><div id="divOne">ID</div><div class="clsOne">CLASS</div><span>SPAN</span></div></body></html>


 

2.2.2   层次选择器
层次选择器语法:

选择器 

功能

返回值

ancestor descendant

根据祖先元素匹配所有的后代元素

元素集合

parent>child

根据父元素匹配所有的子元素

元素集合

prev+next

匹配所有紧接在prev元素后的相邻元素

元素集合

prev~siblings 

匹配prev元素之后的所有兄弟元素

元素集合

 

 

元素集合

说明: ancestor descendant与 parent>child所选择的的元素集合是不同的,前者的层次关系是祖先和后代,而后者是父子关系;另外,prev+next可以使用.next()代替,而prev~siblings可以使用nextAll()代替。
示例2-6     使用jQuery层次选择器选择元素

<html><head><title>使用jQuery层次选择器</title><style type="text/css">body {font-size: 12px;text-align: center;}div,span {float: left;border: solid 1px #ccc;margin: 8px;display: none;}.clsFraA {width: 65px;height: 65px;}.clsFraP {width: 45px;height: 45px;background-color: #eee;}.clsFraC {width: 25px;height: 25px;background-color: #ddd;}</style><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><script type="text/javascript">/*$(function() { //匹配后代元素$("#divMid").css("display", "block");$("div span").css("display", "block");});$(function() {//匹配子元素$("#divMid").css("display", "block");$("div>span").css("display", "block");});$(function() {  //匹配后面元素$("#divMid + div").css("display", "block");$("#divMid").next().next().css("display", "block");});$(function() {  //匹配后面所有元素$("#divMid ~ div").css("display", "block");$("#divMid").nextAll().css("display", "block");});*/$(function() {  //匹配所有相邻元素$("#divMid").siblings("div").css("display", "block");});</script></head><body><div class="clsFraA">Left</div><div class="clsFraA" id="divMid"><span class="clsFraP" id="Span1"><span class="clsFraC" id="Span2"></span></span></div><div class="clsFraA">Right_1</div><div class="clsFraA">Right_2</div></body></html>


说明:siblings()方法与选择器prev ~ siblings区别在于,前者获取全部的相邻元素,不分前后,而后者仅获取标记后面全部相邻元素,不能获取前面部分

2.2.3 简单过滤选择器
简单过滤选择器语法:

选择器 

功能

返回值

first()或:first

获取第一元素

单个元素

last()或:last 

获取最后一个元素

单个元素

:not(selector)

获取除给定选择器外的所有元素

元素集合

:even 

获取所有索引值为偶数的元素,索引号从0开始

元素集合

:odd 

获取所有索引值为奇数的元素,索引号从0开始

元素集合

:eq(index) 

获取指定索引值的元素,索引号从0开始 

单个元素

:gt(index)

获取所有大于给定索引值的元素,索引号从0开始

元素集合

:lt(index) 

获取所有小于给定索引值的元素,索引号从0开始

元素集合

:header

获取所有标题类型的元素,如h1,h2....

元素集合

:animated

获取正在执行动画效果的元素

元素集合


示例2-7     使用jQuery基本过滤选择器选择元素

<html><head><title>使用jQuery基本过滤选择器</title><style type="text/css">body {font-size: 12px;text-align: center;}div {width: 241px;height: 83px;border: solid 1px #eee;}h1 {font-size: 13px;}ul {list-style-type: none;padding: 0px;}.DefClass, .NotClass {height: 23px;width: 60px;line-height: 23px;float: left;border-top: solid 1px #eee;border-bottom: solid 1px #eee}.GetFocus {width: 58px;border: solid 1px #666;background-color: #eee;}#spnMove {width: 238px;height: 23px;line-height: 23px;}</style><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><script type="text/javascript">/*$(function() {$("li:first").addClass("GetFocus");});$(function() {$("li:last").addClass("GetFocus");});$(function() {$("li:not(.NotClass)").addClass("GetFocus");});$(function() {$("li:even").addClass("GetFocus");});$(function() {$("li:odd").addClass("GetFocus");});$(function() {$("li:eq(1)").addClass("GetFocus");});$(function() {$("li:gt(1)").addClass("GetFocus");});$(function() {$("li:lt(4)").addClass("GetFocus");});$(function() {$("div h1").css("width", "238");$(":header").addClass("GetFocus");});*/$(function() {animateIt();$("#spnMove:animated").addClass("GetFocus");});function animateIt() {$("#spnMove").slideToggle("slow", animateIt);}</script></head><body><div><h1>基本过滤选择器</h1><ul><li class="DefClass">Item 0</li><li class="DefClass">Item 1</li><li class="NotClass">Item 2</li><li class="DefClass">Item 3</li></ul><span id="spnMove">Span Move</span></div></body></html>



说明: 选择器animated在捕捉动画效果元素时,先自定义一个动画效果函数animateIt(),然后执行该函数,选择器才能获取动画效果,并增加其类别

 

2.2.4 内容过滤选择器
内容过滤选择器语法:

选择器 

功能

返回值

:contains(text)

获取包含给定文本的元素

元素集合

:empty 

获取所有不包含子元素或者文本的空元素

元素集合

:has(selector) 

获取含有选择器所匹配的元素的元素

元素集合

:parent 

获取含有子元素或者文本的元素

元素集合


示例2-8     使用jQuery内容过滤选择器选择元素

<html><head><title>使用jQuery内容过滤选择器</title><style type="text/css">body {font-size: 12px;text-align: center;}div {float:left;border: solid 1px #ccc;margin: 8px;width: 65px;height: 65px;display: none;}span {float: left;border: solid 1px #ccc;margin: 8px;width: 45px;height: 45px;background-color: #eee;}</style><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><script type="text/javascript">/*$(function() { //显示包含给定文本的元素$("div:contains('A')").css("display", "block");});$(function() {//显示所有不包含子元素或者文本的空元素$("div:empty").css("display", "block");});$(function() {//显示含有选择器所匹配的元素$("div:has(span)").css("display", "block");});*/$(function() { //显示含有子元素或者文本的元素$("div:parent").css("display", "block");});</script></head><body><div>ABCD</div><div><span></span></div><div>EFaH</div><div></div></body></html>


说明:在:contains(text)内容过滤选择器中,如果是查找字母,则有大小写的区别

 

2.2.5 可见性过滤选择器
可见性过滤选择器语法:

选择器    

功能

返回值

:hidden

获取所有不可见元素,或者type为hidden的元素

元素集合

:visible

获取所有的可见元素

元素集合

示例2-9     使用jQuery可见性过滤选择器选择元素

<html><head><title>使用jQuery可见性过滤选择器</title><style type="text/css">body {font-size: 12px;text-align: center;}div, span {float:left;border: solid 1px #ccc;margin: 8px;width: 65px;height: 65px;}.GetFocus {border: solid 1px #666;background-color: #eee;}</style><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><script type="text/javascript">/*$(function() {//增加所有可见元素的类别$("span:hidden").show();$("div:visible").addClass("GetFocus");});*/$(function() {//增加所有不可见元素类别$("span:hidden").show().addClass("GetFocus");});</script></head><body><span style="display:none">Hidden</span><div>Visible</div></body></html>

说明: :hidden选择器所选择的不仅包括样式为display:none所有元素,而且还包括属性type="hidden"和样式为visibility:hidden的所有元素


2.2.6  属性过滤选择器
属性过滤选择器语法:

选择器  

功能 

返回值

[attribute]

获取包含给定属性的元素

元素集合

[attribute=value]

获取等于给定的属性是某个特定值的元素

元素集合

[attribute!=value] 

获取不等于给定的属性是某个特定值的元素

元素集合

[attribute^=value] 

获取给定的属性是以某些值开始的元素 

元素集合

[attribute$=value]  

获取给定的属性是以某些值结束的元素

元素集合

[attribute*=value] 

获取给定的属性是以包含某些值的元素

元素集合

[selector1][selectorN]  

获取满足多个条件的复合属性的元素

元素集合

示例2-10    使用jQuery属性过滤选择器选择元素

<html><head><title>使用jQuery属性过滤选择器</title><style type="text/css">body {font-size: 12px;text-align: center;}div {float: left;border: solid 1px #ccc;margin: 8px;width: 65px;height: 65px;display: none;}</style><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><script type="text/javascript">/*$(function() {//显示所有含有id属性的元素$("div[id]").show(3000);});$(function() {//显示所有属性title的值是"A"的元素$("div[title='A']").show(3000);});$(function() {//显示所有属性title的值不是"A"的元素$("div[title!='A']").show(3000);});$(function() {//显示所有属性title的值以"A"开始的元素$("div[title^='A']").show(3000);});$(function() {//显示所有属性title的值以"C"结束的元素$("div[title$='C']").show(3000);});$(function() {//显示所有属性title的值包含"A"的值的元素$("div[title*='A']").show(3000);});*/$(function() {//显示所有属性title的值中包含"B"且属性id的值时"divAB"的元素$("div[id='divAB'][title*='B']").show(3000);});</script></head><body><div id="divID">ID</div><div title="A">Title A</div><div id="divAB" title="AB">ID <br /> Title AB</div><div title="ABC">Title ABC </div></body></html>


说明:show()是jQuery库中的一个显示元素的函数,括号中的参数表示显示时间,单位是毫秒,show(3000)表示用3000毫秒显示。

2.2.7 子元素过滤选择器
子元素过滤选择器语法:

选择器  

功能

返回值

:nth-child(eq|even|odd|index)

获取每个父元素下的特定位置元素,索引号从1开始

元素集合

:first-child

获取每个父元素下的第一个子元素

元素集合

:last-child

获取每个父元素下的最后一个子元素 

元素集合

:only-child

获取每个父元素下的仅有一个子元素  

元素集合

示例2-11    使用jQuery子元素过滤选择器选择元素

<html><head><title>使用jQuery子元素过滤选择器</title><style type="text/css">body {font-size: 12px;text-align: center;}ul {width: 241px;list-style-type:none;padding: 0px;}ul li {height: 23px;width: 60px;line-height: 23px;float: left;border-top: solid 1px #eee;border-bottom: solid 1px #eee;margin-bottom: 5px;}.GetFocus {width: 58px;border: solid 1px #666;background-color: #eee;}</style><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><script type="text/javascript">/*$(function() { //增加每个父元素下的第2个子元素类别$("li:nth-child(2)").addClass("GetFocus");});$(function() {//增加每个父元素下的第1个子元素类别$("li:first-child").addClass("GetFocus");});$(function() {//增加每个父元素下的最后1个子元素类别$("li:last-child").addClass("GetFocus");});*/$(function() {//增加每个父元素下的只有一个子元素的类别$("li:only-child").addClass("GetFocus");});</script></head><body><ul><li>Item 1-0</li><li>Item 1-1</li><li>Item 1-2</li><li>Item 1-3</li></ul><ul><li>Item 2-0</li><li>Item 2-1</li><li>Item 2-2</li><li>Item 2-3</li></ul><ul><li>Item 3-0</li></ul></body></html>

2.2.8  表单对象属性过滤选择器
表单对象属性过滤选择器语法:

选择器

功能 

返回值

:enabled

获取表单中所有属性为可用的元素

元素集合

:disabled

获取表单中所有属性为不可用的元素

元素集合

:checked

获取表单中所有被选中的元素 

元素集合

:selected

获取表单中所有被选中option的元素

元素集合

示例2-12    通过表单对象属性过滤选择器获取表单对象

<html><head><title>使用jQuery表单对象属性过滤选择器</title><style type="text/css">body {font-size: 12px;text-align: center;}div {display: none;}select {height: 65px;}.clsIpt {width: 100px;padding: 3px;}.GetFocus {border: solid 1px #666;background-color: #eee;}</style><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><script type="text/javascript">/*$(function() {//增加表单中所有属性为可用的元素类别$("#divA").show(3000);$("#form1 input:enabled").addClass("GetFocus");});$(function() {//增加表单中所有属性为不可用的元素类别$("#divA").show(3000);$("#form1 input:disabled").addClass("GetFocus");});$(function() {//增加表单中所有被选中的元素类别$("#divB").show(3000);$("#form1 input:checked").addClass("GetFocus");});*/$(function() {//显示表单中所有被选中option的元素内容$("#divC").show(3000);$("#Span2").html("选中项是:" + $("select option:selected").text());});</script></head><body><form id="form1" style="width:241px"><div id="divA"><input type="text" value="可用文本框" class="clsIpt" /><input type="text" disabled="disabled" value="不可用文本框" class="clsIpt" /></div><div id="divB"><input type="checkbox" checked="checked" value="1" />选中<input type="checkbox" value="0" /> 未选中</div><div id="divC"><select multiple="multiple"><option value="0"> Item 0 </option><option value="1" selected="selected"> Item 1</option><option value="2"> Item 2 </option><option value="3" selected="selected"> Item 3</option></select><span id="Span2"></span></div></form></body></html>

2.2.9   表单选择器
表单选择器语法:

选择器 

功能

返回值

:input

获取所有input,textarea,select        

元素集合

:text 

获取所有单行文本框

元素集合

:password

获取所有密码框 

元素集合

:radio

获取所有单选按钮 

元素集合

:checkbox

获取所有复选框

元素集合

:submit 

获取所有提交按钮

元素集合

:image

获取所有图像域

元素集合

:reset 

获取所有重置按钮 

元素集合

:button

获取所有按钮

元素集合

:file

获取所有文件域

元素集合

示例2-13    使用jQuery表单过滤选择器获取元素

<html><head><title>使用jQuery表单过滤选择器</title><style type="text/css">body {font-size: 12px;text-align: center;}form {width:241px;}textarea, select, button, input, span {display: none;}.btn {border: solid 1px #666;padding: 2px;width: 60px;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff,EndColorStr=#ECE9D8);}.txt {border: solid 1px #666;padding: 3px;}.img {padding: 2px;border: solid 1px #ccc;}.div {border: solid 1px #ccc;background-color: #eee; padding: 5px;}</style><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><script type="text/javascript">/*$(function() {//显示Input类型元素的总数量$("#form1 div").html("表单共找出Input类型元素: " +$("#form1 :input").length);$("#form1 div").addClass("div");});$(function() {//显示所有文本框对象$("#form1 :text").show(3000);});$(function() {//显示所有密码框对象$("#form1 :password").show(3000);});$(function() {//显示所有单选按钮对象$("#form1 :radio").show(3000);$("#form1 #Span1").show(3000);});$(function() {//显示所有复选框对象$("#form1 :checkbox").show(3000);$("#form1 #Span2").show(3000);});$(function() {//显示所有提交按钮对象$("#form1 :submit").show(3000);});$(function() {//显示所有图片域对象$("#form1 :image").show(3000);});$(function() {//显示所有重置按钮对象$("#form1 :reset").show(3000);});$(function() {//显示所有按钮对象$("#form1 :button").show(3000);});*/$(function() {//显示所有文件域对象$("#form1 :file").show(3000);});</script></head><body><form id="form1"><textarea class="txt"> TextArea </textarea><select><option value="0">Item 0</option></select><input type="text" value="Text" class="txt" /><input type="password" value="PassWord" class="txt" /><input type="radio"/> <span id="Span1"> Radio</span><input type="checkbox"/><span id="Span2">CheckBox</span><input type="submit" value="Submit" class="btn" /><input type="image" title="Image" src="images/logo.gif" class="img" /><input type="reset" value="Reset" class="btn" /><input type="button" value="Button" class="btn" /><input type="file" title="File" class="txt" /><div id="divShow"></div></form></body></html>

 

2.3 综合案例分析---导航条在项目中的应用

2.3.1 需求分析
2.3.2   效果界面
2.3.3   功能实现
示例2-14    导航条在项目中的应用

<html><head><title>导航条在项目中的应用</title><style type="text/css">body {font-size: 12px;text-align: center;}#divFrame {border: solid 1px #666;width: 310;overflow: hidden;}#divFrame  .clsHead{background-color: #eee;padding: 8px;height: 18px;cursor: hand;}#divFrame .clsHead h3 {padding: 0px;margin: 0px;float: left;}#divFrame .clsHead span {float: right;margin-top: 3px;}#divFrame .clsContent {padding: 8px;}#divFrame .clsContent ul {list-style-type: none;margin: 0px;padding: 0px;}#divFrame .clsContent ul li {float: left;width: 95px;height: 23px;line-height: 23px;}#divFrame .clsBot {float: right;padding-top: 5px;}.GetFocus {background-color: #eee;}</style><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><script type="text/javascript">$(function() {$(".clsHead").click(function() {if($(".clsContent").is(":visible")) {$(".clsHead span img").attr("src", "images/a1.gif");$(".clsContent").css("display","none");} else {$(".clsHead span img").attr("src", "images/a2.gif");$(".clsContent").css("display", "block");}});$(".clsBot > a").click(function() {if($(".clsBot > a").text() == "简化") {$("ul li:gt(4):not(:last)").hide();$(".clsBot > a").text("更多");} else {$("ul li:gt(4):not(:last)").show().addClass("GetFocus");$(".clsBot > a").text("简化");}});});</script></head><body><div id="divFrame"><div class="clsHead"><h3>图书分类</h3><span><img src="images/a2.gif" alt="" /></span></div><div class="clsContent"><ul><li><a href="#">小说</a><i>(  1110  )</i></li><li><a href="#">文艺</a><i>(  1110  )</i></li><li><a href="#">青春</a><i>(  1110  )</i></li><li><a href="#">少儿</a><i>(  1110  )</i></li><li><a href="#">生活</a><i>(  1110  )</i></li><li><a href="#">社科</a><i>(  1110  )</i></li><li><a href="#">管理</a><i>(  1110  )</i></li><li><a href="#">计算机</a><i>(  1110  )</i></li><li><a href="#">教育</a><i>(  1110  )</i></li><li><a href="#">工具书</a><i>(  1110  )</i></li><li><a href="#">引进版</a><i>(  1110  )</i></li><li><a href="#">其他类</a><i>(  1110  )</i></li></ul><div class="clsBot"><a href="#">简化</a><img src="images/a5.gif" alt="" /></div></div></div></body></html>


2.3.4 代码分析

 

2.4 本章小结

代码下载地址:《jQuery权威指南》学习笔记之第2章 jQuery选择器 《jQuery权威指南》学习笔记之第2章 jQuery选择器