第二章 jQuery选择器 读书笔记(二)

2.2.7 子元素过滤选择器
突出指定某行的需求
jQuery可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。
表 2-13 子元素过滤选择器语法
选择器 功能 返回值
:nth-child(eq|even|odd|index) 获取每个父元素下的特定位置元素,索引号从1开始 元素集合
:first-child 获取每个父元素下的第一个子元素 元素集合
:last-child 获取每个父元素下的最后一个子元素 元素集合
:only-child 获取每个父元素下的仅有一个子元素 元素集合
2-11 使用jQuery子元素过滤选择器选择元素
  
  
  
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>使用jQuery子元素过滤选择器</title> 
  6. <script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script> 
  7. <style type="text/css"> 
  8.     body{font-size:12px;text-align:center}  
  9.     ul{width:241px;list-style-type:none;padding:0px}  
  10.     ul li{height:23px;width:60px;line-height:23px;float:left;border-top:solid 1px #eee;border-bottom:solid 1px #eee;margin-bottom:5px}  
  11.     .GetFocus{width:58px;border:solid 1px #666;background-color:#eee}  
  12.       
  13. </style> 
  14. <script type="text/javascript"> 
  15.     /*$(function(){//增加每个父元素下的第2个子元素类别  
  16.         $("li:nth-child(2)").addClass("GetFocus");  
  17.     })  
  18.     $(function(){//增加每个父元素下的第一个子元素类别  
  19.         $("li:first-child").addClass("GetFocus");  
  20.     })  
  21.     $(function(){//增加每个父元素下的最后一个子元素类别  
  22.         $("li:last-child").addClass("GetFocus");  
  23.     })*/  
  24.     $(function(){//增加每个父元素下只有一个子元素类别  
  25.         $("li:only-child").addClass("GetFocus");  
  26.     })  
  27. </script> 
  28. </head> 
  29. <body> 
  30.     <ul> 
  31.         <li>Item 1-0</li> 
  32.         <li>Item 1-1</li> 
  33.         <li>Item 1-2</li> 
  34.         <li>Item 1-3</li> 
  35.     </ul> 
  36.     <ul> 
  37.         <li>Item 2-0</li> 
  38.         <li>Item 2-1</li> 
  39.         <li>Item 2-2</li> 
  40.         <li>Item 2-3</li> 
  41.     </ul> 
  42.     <ul> 
  43.         <li>Item 3-0</li> 
  44.     </ul> 
  45. </body> 
  46. </html> 

表2-14 页面执行效果

关键代码 功能描述 页面效果
$("li:nth-child(2)").addClass("GetFocus"); 增加每个父元素下的第二个子元素类别  
$("li:first-child").addClass("GetFocus"); 增加每个父元素下的第一个子元素类别  
$("li:last-child").addClass("GetFocus"); 增加每个父元素下的最后一个子元素类别  
$("li:only-child").addClass("GetFocus"); 增加每个父元素下的仅有一个子元素类别  
2.2.8 表单对象属性过滤选择器
表单对象属性过滤器通过表单中的某对象属性特征获取该元素,如enabled、disabled、checked、selected
表2-15 表单对象属性过滤选择器
选择器 功能 返回值
:enable 获取表单中所有属性为可用的元素 元素集合
:disable 获取表单中所有属性为不可用的元素 元素集合
:checked 获取表单中所有被选中的元素 元素集合
:selected 获取表单中所有被选中option的元素 元素集合
示例2-12 通过表单对象属性过滤选择器获取表单对象
  
  
  
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>使用jQuery子元素过滤选择器</title> 
  6. <script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script> 
  7. <style type="text/css"> 
  8.     body{font-size:12px;text-align:center}  
  9.     div{display:none}  
  10.     select{height:65px}  
  11.     .clsIpt{width:100px;padding:3px}  
  12.     .GetFocus{border:solid 1px #666;background-color:#eee}  
  13.       
  14. </style> 
  15. <script type="text/javascript"> 
  16.     /*$(function(){//增加表单中所有属性为可用的元素类别  
  17.         $("#divA").show(3000);  
  18.         $("#form1 input:enabled").addClass("GetFocus")  
  19.     })  
  20.       
  21.     $(function(){//增加表单中所有属性为不可用的元素类别  
  22.         $("#divA").show(3000);  
  23.         $("#form1 input:disabled").addClass("GetFocus")  
  24.     })  
  25.     $(function(){//增加表单中所有被选中的元素类别  
  26.         $("#divB").show(3000);  
  27.         $("#form1 input:checked").addClass("GetFocus");  
  28.     })*/  
  29.     $(function(){//显示表单中所有被选中option的元素内容  
  30.         $("#divC").show(3000);  
  31.         $("#Span2").html("选中项是:"+$("select option:selected").text());  
  32.     })  
  33. </script> 
  34. </head> 
  35. <body> 
  36.     <form id="form1" style="width:241px"> 
  37.         <div id="divA"> 
  38.             <input type="text" value="可用文本框" class="clsIpt"/> 
  39.             <input type="text" disabled="disabled" value="不可用文本框" class="clsIpt"/> 
  40.         </div> 
  41.         <div id="divB"> 
  42.             <input type="checkbox" checked="checked" value="1">选中  
  43.             <input type="checkbox" value="0">未选中  
  44.         </div> 
  45.         <div id="divC"> 
  46.             <select multiple="multiple"> 
  47.                 <option value="0">Item 0</option> 
  48.                 <option value="1" selected="selected">Item 1</option> 
  49.                 <option value="2">Item 2</option> 
  50.                 <option value="3" selected="selected">Item 3</option> 
  51.             </select> 
  52.             <span id="Span2"></span> 
  53.         </div> 
  54.     </form> 
  55. </body> 
  56. </html> 

表2-16 页面执行效果

关键代码 功能描述 页面效果
$("#form1 input:enabled").addClass("GetFocus") 增加表单中所有属性为可用的元素类别  
$("#form1 input:disabled").addClass("GetFocus") 增加表单中所有属性为不可用的元素类别  
$("#form1 input:checked").addClass("GetFocus"); 增加表中所有被选中的元素类别  
$("#Span2").html("选中项是:"+$("select option:selected").text()); 显示表单中所有被选中option的元素内容  
2.2.9 表单选择器
表2-17 表单选择器语法
选择器 功能 返回值
:input 获取所有input textarea select 元素集合
:text 获取所有单行文本框 元素集合
:password 获取所有密码框 元素集合
:radio 获取所有单选按钮 元素集合
:checkbox 获取所有复选框 元素集合
:submit 获取所有提交按钮 元素集合
:image 获取所有图像域 元素集合
:reset 获取所有重置按钮 元素集合
:button 获取所有按钮 元素集合
:file 获取所有文件域 元素集合
代码清单2-13 使用jQuery表单过滤选择器获取元素
  
  
  
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>使用jQuery表单过滤选择器</title> 
  6. <script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script> 
  7. <style type="text/css"> 
  8.     body{font-size:12px;text-align:center}  
  9.     form{width:241px}  
  10.     textarea,select,button,input,span{display:none}  
  11.     .btn{border:#666 1px solid;padding:2px;width:60px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#Ece9D8)}  
  12.     .txt{border:#666 1px solid;padding:3px}  
  13.     .img{padding:2px;border:solid 1px #ccc}  
  14.     .div{border:solid 1px #ccc;background-color:#eee;padding:5px}     
  15. </style> 
  16. <script type="text/javascript"> 
  17.     /*$(function(){//显示Input类型元素的总数量  
  18.         $("#form1 div").html("表单共找出Input类型元素:"+$("#form1 :input").length);  
  19.         $("#form1 div").addClass("div");  
  20.     })  
  21.     $(function(){//显示所有文本框对象  
  22.         $("#form1 :text").show(3000);  
  23.     })  
  24.     $(function(){//显示所有密码框对象  
  25.         $("#form1 :password").show(3000);  
  26.     })  
  27.     $(function(){//显示单选按钮对象  
  28.         $("#form1 :radio").show(3000);  
  29.         $("#form1 #Span1").show(3000);  
  30.     })  
  31.     $(function(){//显示所有复选框对象  
  32.         $("#form1 :checkbox").show(3000);  
  33.         $("#form1 #Span2").show(3000);  
  34.     })  
  35.     $(function(){//显示所有提交按钮对象  
  36.         $("#form1 :submit").show(3000);  
  37.     })  
  38.     $(function(){//显示所有图片域对象  
  39.         $("#form1 :image").show(3000);  
  40.     })  
  41.     $(function(){//显示所有重置按钮对象  
  42.         $("#form1 :reset").show(3000);  
  43.     })  
  44.     $(function(){//显示所有按钮对象  
  45.         $("#form1 :button").show(3000);  
  46.     })*/  
  47.     $(function(){//显示所有文件域对象  
  48.         $("#form1 :file").show(3000);  
  49.     })  
  50.       
  51. </script> 
  52. </head> 
  53. <body> 
  54.     <form id="form1"> 
  55.         <textarea class="txt">TextArea</textarea> 
  56.         <select><option value="0">Item 0</option></select> 
  57.         <input type="text" value="Text" class="txt"> 
  58.         <input type="password" value="PassWord" class="txt"> 
  59.         <input type="radio"><span id="Span1">Radio</span></input> 
  60.         <input type="checkbox"/> 
  61.         <span id="Span2">Checkbox</span> 
  62.         <input type="submit" value="Submit" class="btn"/> 
  63.         <input type="image" title="Image" src="../images/twowayAdvertTest/logo_jquery.gif" class="img"/> 
  64.         <input type="reset" value="Reset" class="btn"/> 
  65.         <input type="button" value="Button" class="btn"/> 
  66.         <input type="file" title="File" class="txt"/> 
  67.         <div id="divShow"></div> 
  68.     </form> 
  69. </body> 
  70. </html> 

表 2-18 页面执行效果

关键代码 功能描述 页面效果
$("#form1 div").html("表单共找出Input类型元素:"+$("#form1 :input").length); 显示input类型元素的总数量  
$("#form1 :text").show(3000); 显示所有文本框对象  
$("#form1 :password").show(3000); 显示所有密码框对象  
$("#form1 :radio").show(3000); 显示所有单选按钮  
$("#form1 :checkbox").show(3000); 显示所有复选框对象  
$("#form1 :submit").show(3000); 显示所有提交按钮对象  
$("#form1 :image").show(3000); 显示所有图片域钮对象  
$("#form1 :reset").show(3000); 显示所有重置按钮对象  
$("#form1 :button").show(3000); 显示所有按钮对象  
$("#form1 :file").show(3000); 显示所有文件域对象  

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

   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>导航条在项目中的应用</title> 
  6. <script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script> 
  7. <style type="text/css"> 
  8. <SPAN style="WHITE-SPACE: pre">     </SPAN>body{font-size:13px}  
  9. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#divFrame{border:solid 1px #666;width:301px;overflow:hidden}  
  10. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:hand}  
  11. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#divFrame .clsHead h3{padding:0px;margin:0px;float:left}  
  12. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#divFrame .clsHead span{float:right;margin-top:3px}  
  13. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#divFrame .clsContent{padding:8px}  
  14. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#divFrame .clsContent ul {list-style-type:none;margin:0px;padding:0px}  
  15. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#divFrame .clsContent ul li{ float:left;width:95px;height:23px;line-height:23px}  
  16. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px}  
  17. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.GetFocus{background-color:#eee}  
  18. </style> 
  19. <script type="text/javascript"> 
  20. <SPAN style="WHITE-SPACE: pre"> </SPAN> 
  21. <SPAN style="WHITE-SPACE: pre"> </SPAN>$(function(){//页面加载事件  
  22. <SPAN style="WHITE-SPACE: pre">     </SPAN>$(".clsHead").click(function(){//图片单击事件  
  23. <SPAN style="WHITE-SPACE: pre">         </SPAN>if($(".clsContent").is(":visible")){//如果内容可见  
  24. <SPAN style="WHITE-SPACE: pre">             </SPAN>$(".clsHead span img").attr("src","../images/2/a1.gif");//改变图片  
  25. <SPAN style="WHITE-SPACE: pre">             </SPAN>//隐藏内容  
  26. <SPAN style="WHITE-SPACE: pre">             </SPAN>$(".clsContent").css("display","none");  
  27. <SPAN style="WHITE-SPACE: pre">         </SPAN>}else{  
  28. <SPAN style="WHITE-SPACE: pre">             </SPAN>$(".clsHead span img").attr("src","../images/2/a2.gif");//改变图片  
  29. <SPAN style="WHITE-SPACE: pre">             </SPAN>//显示内容  
  30. <SPAN style="WHITE-SPACE: pre">             </SPAN>$(".clsContent").css("display","block");  
  31. <SPAN style="WHITE-SPACE: pre">         </SPAN>}  
  32. <SPAN style="WHITE-SPACE: pre">     </SPAN>});  
  33. <SPAN style="WHITE-SPACE: pre">     </SPAN>$(".clsBot > a").click(function(){//热点链接单击事件  
  34. <SPAN style="WHITE-SPACE: pre">         </SPAN>//如果内容为"简化"字样  
  35. <SPAN style="WHITE-SPACE: pre">         </SPAN>if($(".clsBot > a").text()=="简化"){  
  36. <SPAN style="WHITE-SPACE: pre">             </SPAN>//隐藏index号大于4且不是最后一项的元素  
  37. <SPAN style="WHITE-SPACE: pre">             </SPAN>$("ul li:gt(4):not(:last)").hide();  
  38. <SPAN style="WHITE-SPACE: pre">             </SPAN>//将字符内容改为"更多"  
  39. <SPAN style="WHITE-SPACE: pre">             </SPAN>$(".clsBot > a").text("更多");  
  40. <SPAN style="WHITE-SPACE: pre">         </SPAN>}else{  
  41. <SPAN style="WHITE-SPACE: pre">             </SPAN>$("ul li:gt(4):not(:last)").show().addClass("GetFocus");//显示所选元素且增加样式  
  42. <SPAN style="WHITE-SPACE: pre">             </SPAN>//将字符内容更改为"简化"  
  43. <SPAN style="WHITE-SPACE: pre">             </SPAN>$(".clsBot > a").text("简化")  
  44. <SPAN style="WHITE-SPACE: pre">         </SPAN>}  
  45. <SPAN style="WHITE-SPACE: pre">     </SPAN>});  
  46. <SPAN style="WHITE-SPACE: pre"> </SPAN>})  
  47. </script> 
  48. </head> 
  49. <body> 
  50. <SPAN style="WHITE-SPACE: pre"> </SPAN><div id="divFrame"> 
  51. <SPAN style="WHITE-SPACE: pre">     </SPAN><div class="clsHead"> 
  52. <SPAN style="WHITE-SPACE: pre">         </SPAN><h3>图书分类</h3> 
  53. <SPAN style="WHITE-SPACE: pre">         </SPAN><span><img src="../images/2/a2.gif" alt=""/></span> 
  54. <SPAN style="WHITE-SPACE: pre">     </SPAN></div> 
  55. <SPAN style="WHITE-SPACE: pre">     </SPAN><div class="clsContent"> 
  56. <SPAN style="WHITE-SPACE: pre">         </SPAN><ul> 
  57. <SPAN style="WHITE-SPACE: pre">             </SPAN><li><a href="#">小说</a><li>(1110)</li></li> 
  58. <SPAN style="WHITE-SPACE: pre">             </SPAN><li><a href="#">文艺</a><li>(230)</li></li> 
  59. <SPAN style="WHITE-SPACE: pre">             </SPAN><li><a href="#">青春</a><li>(1430)</li></li> 
  60. <SPAN style="WHITE-SPACE: pre">             </SPAN><li><a href="#">少儿</a><li>(1560)</li></li> 
  61. <SPAN style="WHITE-SPACE: pre">             </SPAN><li><a href="#">生活</a><li>(870)</li></li> 
  62. <SPAN style="WHITE-SPACE: pre">             </SPAN><li><a href="#">社科</a><li>(1460)</li></li> 
  63. <SPAN style="WHITE-SPACE: pre">             </SPAN><li><a href="#">管理</a><li>(1450)</li></li> 
  64. <SPAN style="WHITE-SPACE: pre">             </SPAN><li><a href="#">计算机</a><li>(1780)</li></li> 
  65. <SPAN style="WHITE-SPACE: pre">             </SPAN><li><a href="#">教育</a><li>(930)</li></li> 
  66. <SPAN style="WHITE-SPACE: pre">             </SPAN><li><a href="#">工具书</a><li>(3450)</li></li> 
  67. <SPAN style="WHITE-SPACE: pre">             </SPAN><li><a href="#">引进版</a><li>(980)</li></li> 
  68. <SPAN style="WHITE-SPACE: pre">             </SPAN><li><a href="#">其他类</a><li>(3230)</li></li> 
  69. <SPAN style="WHITE-SPACE: pre">         </SPAN></ul> 
  70. <SPAN style="WHITE-SPACE: pre">     </SPAN></div> 
  71. <SPAN style="WHITE-SPACE: pre">     </SPAN><div class="clsBot"> 
  72. <SPAN style="WHITE-SPACE: pre">         </SPAN><a href="#">简化</a> 
  73. <SPAN style="WHITE-SPACE: pre">         </SPAN><img src="../images/2/a5.gif" alt=""/> 
  74. <SPAN style="WHITE-SPACE: pre">     </SPAN></div> 
  75. <SPAN style="WHITE-SPACE: pre"> </SPAN></div> 
  76. </body> 
  77. </html> 
以上代码在chrome浏览器下,点击“简化”按钮出现如下警告:
event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

2.3.4在页面代码中,首先通过如下代码:

  
  
  
  
  1. $(".clsContent").css("display","none"); 
获取类名称为"clsContent"的元素集合,并实现其内容的显示或者隐藏。与此同时,通过下面代码变换图片:
  
  
  
  
  1. $(".clsHead span img").attr("src","../images/2/a2.gif"); 
其中“.clsHead span img”表示获取类型clsHead中<span>下的<img>标记,即图片元素;attr(key,value)是jQuery中一个设置元素属性的函数,其功能是为所匹配的元素设置属性值,key是属性名称,value是属性值或内容。因此,此行代码的功能是,获取图片元素并改变其图片来源。
首先通过如下代码,检测当前内容的隐藏或显示状态
  
  
  
  
  1. if($(".clsContent").is(":visible")){ 

其中“$(".clsContent”)获取内容元素,“is”是判断,":visible"表示是否可见,此行代码用于判断内容元素是否可见,它返回一个布尔值,如果为true,则执行if后面的语句块,否则执行else后面的语句块

在超级链接单击事件中,通过下面的代码检测单击的是“简化”还是“更多”字样
  
  
  
  
  1. if($(".clsBot > a").text()=="简化"){ 

其中$(".clsBot > a")获取超链接元素,text()是jQuery中一个获取元素内容的函数。

在代码中
 
  
  
  
  
  1. <PRE class=javascript name="code">$("ul li:gt(4):not(:last)").hide();</PRE> 
  2. <PRE></PRE> 
  3. 其中,“ul li”获取元素,":gt(4)"和":not(:last)"分别为两个并列的过滤选择条件,前者表示Index号大于4,后者表示不是最后一个元素,二者组合成一个过滤条件,即选Index号大于4并且不是最后一个的元素集合;hide()是jQuery中一个隐藏元素的函数。  
  4. <PRE></PRE> 

 

你可能感兴趣的:(JavaScript,java,jquery,读书笔记)