Jquery基础教程读书笔记一-优快云博客

本文详细介绍了如何使用jQuery选择器获取DOM元素，并应用CSS选择符进行样式控制，通过实例代码展示了标签名、ID、类、属性选择符及自定义选择符的使用方法，以及如何在列表项中添加样式。

一、选择元素

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

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

转载于:https://www.cnblogs.com/phpall/p/4253597.html