首页 / 脚本样式 / JavaScript / jQuery基础教程笔记适合js新手第1/2页

1, ：eq（）和nth-child（）
看下面代码：
<SCRIPT LANGUAGE="JavaScript">
$（function（）{
$（"#selected-plays > li:eq（1）"）.addClass（"a"）;
//等价于  $（"#selected-plays > li:nth-child（2）"）.addClass（"a"）;

//注意：js数组是从 0 开始的，所以eq（1）是取第二个元素。
//而css选择器:nth-child（）是从 1 开始的，所以要选择第二个元素，得使用 :nth-child（2）  ，而不是:nth-child（1）。
     }）
</SCRIPT>

2，:odd 和  :even
:odd      : 奇数行
:even     : 偶数行
新手经常会说，好像跟我们做的相反？
其实与 :eq（）选择器一样，下标都是从 0开始的，
也就是  表格的第一行编号是 0  （偶数）；
第二行编号是 1   （奇数）；以此类推。。。

3, $（"tr:odd"）.addClass（）
可以写成  $（"tr"）.filter（":odd"）.addClass（）

4，$（"td:contains（"cssrain"）"）          //取得包含字符串 cssrain 的所有td

5，jquery 转 dom ：
$（"td"）.get（0）.tagName 或 $（"td"）[0].tagName

6，load（）:
jquery中的load（）有2层意思，
第一层意思可以等价于 dom中 window.onload
第二层意思可以load（url ）。

7：ready简写：
1;
$（document）.ready（function（）{
   //do something
}）
2;
$（）.ready（function（）{
   //do something
}）
3;
$（function（）{
   //do something
}）

8，事件冒泡：
正常的来说：点击B  会触发a的click。
如果我们不想触发A，可以用stopPropagation（）阻止冒泡.
具体例子：
<div id="a">aaaaaaa
<div id="b">bbbbbbbb</div>
aaaaaa</div>
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$（function（）{
$（"#a"）.click（function（）{
alert（"A"）
}）
$（"#b"）.click（function（e）{
alert（"B"）
e.stopPropagation（）;//阻止冒泡，从来不输出 “A" 。可以去掉，试试对比效果。
}）
}）
</SCRIPT>

9, hide（）show（）会记住上一次的dipslay状态
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$（function（）{
$（"#test"）.toggle（function（）{
$（"#a"）.hide（）;//display : none ，记住display 为 inline
$（"#b"）.hide（）;//display : none ，记住display 为 block
},function（）{
$（"#a"）.show（）; //display : inline
$（"#b"）.show（）; //display : block
}）
}）
</SCRIPT>
<DIV id="a" style="display:inline;">a</div>
<DIV id="b" style="display:block;">b</div>
<input type="button" id="test" value="test" />

10, hide（）  show（）加时间参数
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$（function（）{
$（"#test"）.toggle（function（）{
$（"#a"）.hide（500）;//display : none
$（"#b"）.hide（500）;//display : none
},function（）{
$（"#a"）.show（500）; //display : inline
$（"#b"）.show（500）; //display : block
}）
}）
</SCRIPT>
<DIV id="a" style="display:inline;">a</div>
<DIV id="b" style="display:block;">b</div>
<input type="button" id="test" value="test" />

11，效果：
show（）, hide（）会同时修改多个样式属性  : 高度，宽度和不透明度。
fadeIn（） fadeOut（） : 不透明度
fadeTo（）   : 不透明度
slideDown（） , slideUp（）  :高度

如果都不能满意，只能用animate（）了
animate（）提供了更为强大的，复杂的效果。

12，animate（） :
之前 .show（"slow"）;  // slow代表的是0.6秒内同时改变高度，宽度和透明度。如果用时间表示是 600 ；===  .show（600）;
那么我们再来看看 animate（）

animate（{heigth : "slow" ,width : "slow" } , "slow" ）
这里之所以可以 height : "slow"   其实就跟 .show（"slow"）  类似，当然他前面规定了height  。。

13,做动画之前先确定位置。
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$（function（）{
$（"#a"）.css（"position","absolute"）;//如果把这句去掉，动画就没了。
/*
在使用.animate之前，请先把位置确定，不管你是用的 absolute 还是relative
总之要设置其中的一种，因为所有的块级元素默认是static。
其实是跟css有关。
*/
$（"#test"）.click（function（）{
$（"#a"）.animate（{ left : "300" } , "slow" ）
}）
}）
</SCRIPT>
<DIV id="a" >a</div>
<input type="button" id="test" value="test" />

14，width（）和css（"width"）
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$（function（）{
$（"#test"）.click（function（）{
var t1  =  $（"#a"）.width（）;
var t2  =  $（"#a"）.css（"width"）;
alert（ t1 ）; //200 ，不带单位
alert（ t2 ）; //200px ，带单位
alert（ parseInt（t2）） //200 ，不带单位
}）
}）
</SCRIPT>
<DIV id="a" style="width:200px">a</div>
<input type="button" id="test" value="test" />

15：animate（）做动画效果时，动画执行的顺序。
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$（function（）{
$（"#test"）.click（function（）{
$（"#a"）.animate（{left : "300px" } , "slow" ）
.animate（{ top : "300px" } , "slow" ）;
}）
}）
</SCRIPT>
<DIV id="a" style="position:absolute;width:10px;height:10px;">a</div>
<input type="button" id="test" value="test" />
//发生上面是按照顺序来执行的。先改变left，然后再改变top

对比:
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$（function（）{
$（"#test"）.click（function（）{
$（"#a"）.animate（{left : "300px" ,  top : "300px"} , "slow" ）
}）
}）
</SCRIPT>
<DIV id="a" style="position:absolute;width:10px;height:10px;">a</div>
<input type="button" id="test" value="test" />
//发生上面是一起执行的，也就是 left和top 一起改变。

区别知道了吧。

当前1/2页 12下一页