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开始的。
今天先到这 。。。明天继续加油!