2-10 jQuery选择器之属性筛选选择器
本节编程练习不计算学习进度,请电脑登录imooc.com操作

jQuery选择器之属性筛选选择器

属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性,这样所有使用该属性而不管它的值,这个元素都将被定位,也可以更加明确并定位在这些属性上使用特定值的元素,这就是属性选择器展示它们的威力的地方。

描述如下:

浏览器支持:

CSS选择器无论CSS2.1版本还是CSS3版本,IE7和IE8都支持,webkit、Gecko核心及Opera也都支持,只有IE6以下浏览器才不支持

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的

[attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等
[attr*="value"]能在网站中帮助我们匹配不同类型的文件

任务

在代码编辑器中第31行填写相应代码

 $('div[name=p1]')

在代码编辑器中第36行填写相应代码

$('div[p2]')

在代码编辑器中第41行填写相应代码

$('div[name|="-"]')

在代码编辑器中第46行填写相应代码

 $('div[name~="a"]')

在代码编辑器中第69行填写相应代码

$('div[name^=imooc]')

在代码编辑器中第74行填写相应代码

$('div[name$=imooc]')

在代码编辑器中第79行填写相应代码

$('div[name*="test"]')

在代码编辑器中第84行填写相应代码

$('div[testattr!="true"]')

 

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6. <title></title>
  7. <link rel="stylesheet" href="imooc.css" type="text/css">
  8. <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  9. </head>
  10.  
  11. <body>
  12. <h2>属性筛选选择器</h2>
  13. <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
  14. <div class="left" testattr="true" >
  15. <div class="div" testattr="true" name='p1'>
  16. <a>[att=val]</a>
  17. </div>
  18. <div class="div" testattr="true" p2>
  19. <a>[att]</a>
  20. </div>
  21. <div class="div" testattr="true" name="-">
  22. <a>[att|=val]</a>
  23. </div>
  24. <div class="div" testattr="true" name="a b">
  25. <a>[att~=val]</a>
  26. </div>
  27. </div>
  28.  
  29. <script type="text/javascript">
  30. //查找所有div中,属性name=p1的div元素
  31. ?.css("border", "3px groove red");
  32. </script>
  33.  
  34. <script type="text/javascript">
  35. //查找所有div中,有属性p2的div元素
  36. ?.css("border", "3px groove blue");
  37. </script>
  38.  
  39. <script type="text/javascript">
  40. //查找所有div中,有属性name中的值只包含一个连字符“-”的div元素
  41. ?.css("border", "3px groove #00FF00");
  42. </script>
  43.  
  44. <script type="text/javascript">
  45. //查找所有div中,有属性name中的值包含一个连字符“空”和“a”的div元素
  46. ?.css("border", "3px groove #668B8B");
  47. </script>
  48.  
  49.  
  50. <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
  51. <div class="left" testattr="true" >
  52. <div class="div" testattr="true" name='imooc-aaorn'>
  53. <a>[att^=val]</a>
  54. </div>
  55. <div class="div" testattr="true" name='aaorn-imooc'>
  56. <a>[att$=val]</a>
  57. </div>
  58. <div class="div" testattr="true" name="attr-test-selector">
  59. <a>[att*=val]</a>
  60. </div>
  61. <div class="div" name="a b">
  62. <a>[att!=val]</a>
  63. </div>
  64. </div>
  65.  
  66.  
  67. <script type="text/javascript">
  68. //查找所有div中,属性name的值是用imooc开头的
  69. ?.css("border", "3px groove red");
  70. </script>
  71.  
  72. <script type="text/javascript">
  73. //查找所有div中,属性name的值是用imooc结尾的
  74. ?.css("border", "3px groove blue");
  75. </script>
  76.  
  77. <script type="text/javascript">
  78. //查找所有div中,有属性name中的值包含一个test字符串的div元素
  79. ?.css("border", "3px groove #00FF00");
  80. </script>
  81.  
  82. <script type="text/javascript">
  83. //查找所有div中,有属性testattr中的值没有包含"true"的div
  84. ?.css("border", "3px groove #668B8B");
  85. </script>
  86.  
  87.  
  88. </body>
  89.  
  90. </html>
  1. .left {
  2. width: auto;
  3. height: 120px;
  4. }
  5.  
  6. .left div {
  7. width: 100px;
  8. height: 70px;
  9. padding: 5px;
  10. margin: 5px;
  11. float: left;
  12. background: #bbffaa;
  13. border: 1px solid #ccc;
  14. }
  15.  
  16. .bottom {
  17. width: 800px;
  18. }
  19.  
  20. .bottom div,
  21. .bottom span {
  22. display: block;
  23. width: 80px;
  24. height: 80px;
  25. margin: 5px;
  26. background: #bbffaa;
  27. float: left;
  28. font-size: 14px;
  29. }
  30.  
  31. .bottom .small {
  32. width: 60px;
  33. height: 25px;
  34. font-size: 12px;
  35. background: #fab;
  36. }
下一节