Jquery基础教程读书笔记一
一、选择元素
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 Tragedies 11 <ul> 12 <li>子栏目</li> 13 <li>子栏目</li> 14 </ul> 15 </li> 16 <li> 17 History 18 <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开始的。
今天先到这 。。。明天继续加油！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
