6-1 理解CSS选择器
本节编程练习不计算学习进度，请电脑登录imooc.com操作

理解CSS选择器

jQuery的选择器和CSS的选择器非常相似，所以先从CSS选择器入手，了解下选择器的分类。CSS1-CSS3提供非常丰富的选择器，但是由于某些选择器被各个浏览器支持的情况不一样，所以很多选择器在实际CSS开发中很少用到

CSS1-CSS3提供了非常多的选择器，总的来说我们可以分几大类：

群组选择器：逗号“,”
简单选择器：ID、标签、类、属性、通配符
关系选择器：孩子、后代、相邻、兄弟
伪类选择器：动作伪类、目标伪类、语言伪类、状态伪类、结构伪类、取反伪类

群组选择器用于分组合并多个处理的结构

selector1, selector2, selectorN

简单选择器"#"  "."  "["   "*"  ，这些都有内置原生API的支持，不过存在兼容问题。

属性选择器在CSS2.1中只有四种

[att] [att=val] [att~=val] [att|=val]

在CSS3中又增加了三种：

[attr^=val] [attr$=val] [attr*=val]

当然除此之外jQuery还实现了自定义的属性选择器：

[attribute!='value']
[attributeFilter1][attributeFilter2][attributeFilterN]

关系选择器

关系选择器存在着关联，不能是单独存在的。

ancestor descendant
parent > child
prev + next
prev ~ siblings

伪类

这个细分就很多了，jQuery把这些伪类加工并扩展成几个大块：

基本筛选器： eq get first lang It not odd root...
内容筛选器： contains empty has parent...
可见筛选器： hidden visible
子元素筛选器： first-child nth-child only-child...
表单： bottom checkbox foucs input text...

查阅jQuery的API，针对选择器的处理确实太多了。

 

任务

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. <style>
  7.   div,span,p {
  8.     width: 50px;
  9.     height: 30px;
  10.     float:left;
  11.     padding: 3px;
  12.     margin: 2px;
  13.     background-color: #EEEEEE;
  14.     font-size:10px;
  15.   }
  16. </style>
  17. <title></title>
  18. </head>
  19. <body>
  20.  
  21. <div>
  22.   div
  23.   <li>222</li>
  24. </div>
  25. <p class="notMyClass">p class="notMyClass"</p>
  26. <span>span</span>
  27. <div>John Resig</div>
  28. <input name="milkman" />
  29. <input name="email" disabled="disabled" /></br>
  30. <button id="selector1">分组选择器</button>
  31. <button id="selector2">层级选择器</button>
  32. <button id="selector3">属性选择器</button>
  33. <button id="selector4">内容选择器</button>
  34. <button id="selector5">表单选择器</button>
  35. <button id="selector6">子元素选择器</button>
  36. <script type="text/javascript">
  37.  
  38.   $("#selector1").click(function() {
  39.     $("div,span,p.myClass").css("border", "3px solid red")
  40.   })
  41.  
  42.   $("#selector2").click(function() {
  43.       $("div > li").css("border", "3px double red")
  44.   })
  45.  
  46.   $("#selector3").click(function() {
  47.       $('input[name*="man"]').val('has man in it!')
  48.   })
  49.  
  50.   $("#selector4").click(function() {
  51.       $("div:contains('John')").css("text-decoration", "underline")
  52.   })
  53.  
  54.   $("#selector5").click(function() {
  55.       $("input:disabled").val("this is it")
  56.   })
  57.  
  58.   $("#selector6").click(function() {
  59.     $("div:first-child")
  60.       .css("text-decoration", "underline")
  61.   })
  62.  
  63.  
  64.  
  65. </script> 
  66.  
  67. </body>
  68. </html>
下一节