一、选择元素

   1.理解DOM  理解父元素、子元素、同级元素。。。。可以利用火狐浏览器firebug辅助查看。

   2.使用$()函数

     有3种基本的选择符：标签名、ID、类。

     实例：标签名：css中p{}写法 Jquery可以用$("p") 取得文档中所有的段落。

              Id ： css中 #some-id{}写法 Jquery可以用$("#some-id") 取得文档中ID为some-id的一个元素。

              类 ： css中.some-class{}写法 $(".some-class") 取得文档中类为some-class所有的元素

   3.CSS选择符

      示例代码：

 1 <ul id="selected-plays"> 2     <li>Comedies 3       <ul> 4         <li><a href="#"></a>As you like it</li> 5         <li>子栏目</li> 6         <li>子栏目二</li>      7       </ul> 8     </li> 9     <li>10         Tragedies11         <ul>12             <li>子栏目</li>13             <li>子栏目</li>14         </ul>15     </li>16     <li>17         History18         <ul>19             <li>子栏目</li>20             <li>子栏目</li>21         </ul>22     </li>23 </ul>

  基于列表项在级别添加样式，比如我们想让顶级的项水平排列，那么我们可以先在样式表中定义一个horizontal类

1 .horizontal{2  float:left;3  list-style:none;4  margin:10px;5 }

那么接下来 我们用Jquery中的选择符实现这个小小效果。

1 $(document).ready(function(){2 $("#selected-plays > li").addclass("horizontal");3 });

我们使用子元素组合符（>）将horizontal类添加到顶级项中，这段jq语句的含义就是 查找ID为selected—plays（#selected-plays）的元素的子元素(>)中所有的列表项（li）。

接下来我们要给非顶级项的列表添加样式，使用否定式伪类选择符实现。代码如下：

$(document).ready(function(){$("#selected-plays > li").addClass("horizontal");$("#selected-plays li :not(.horizontal)").addClass("sub-level");});

这一次是取得每个列表项（li）：

是ID为selected-plays的元素（#selected-plays）的后代元素；没有horizontal类:not(.horizontal)

4.属性选择符---通过HTML元素的属性选择元素，例如链接的title属性或者图像的alt属性。

   $("img[alt]"

  属性选择符使用一种从正则表达式中借鉴来的通配符语法，以^表示值在字符串的开始，以$表示值在字符串的结尾，也是用星号*表示要匹配的值可以出现在字符串中的任意位置，用叹号！表示对值的取反。

实例代码：

$(document).ready(function(){$(‘a[href^="mailto:"]‘).addClass(‘mailto‘);$(‘a[href$=".pdf"]‘).addClass(‘pdflink‘);});

5.自定义选择符

  自定义选择符的语法与CSS中的伪类选择符语法相同，即选择符以冒号（：）开头。

 Javascript数组采用从0开始的编号方式，而CSS则从1开始的。

 今天先到这 。。。明天继续加油！

Jquery基础教程读书笔记一