码迷,mamicode.com
首页 > Web开发 > 详细

Jquery基础教程读书笔记一

时间:2015-01-27 20:01:29      阅读:302      评论:0      收藏:0      [点我收藏+]

标签:

一、选择元素

   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开始的。

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

 

Jquery基础教程读书笔记一

标签:

原文地址:http://www.cnblogs.com/phpall/p/4253597.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!