快捷導(dǎo)航

jQuery基礎(chǔ)教程筆記適合js新手第1/2頁(yè)

更新時(shí)間：2008年07月06日 10:05:40 作者：

看完jquery基礎(chǔ)教程做的筆記，筆記并不適合所有人，覺得好，可以看，覺得不好，可以不看。

1, ：eq()和nth-child()
看下面代碼：
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$("#selected-plays > li:eq(1)").addClass("a");
//等價(jià)于  $("#selected-plays > li:nth-child(2)").addClass("a");

//注意：js數(shù)組是從 0 開始的，所以eq（1）是取第二個(gè)元素。
//而css選擇器:nth-child（）是從 1 開始的，所以要選擇第二個(gè)元素，得使用 :nth-child(2)  ，而不是:nth-child(1)。
     })
</SCRIPT>

2，:odd 和  :even
:odd      : 奇數(shù)行
:even     : 偶數(shù)行
新手經(jīng)常會(huì)說(shuō)，好像跟我們做的相反？
其實(shí)與 :eq() 選擇器一樣，下標(biāo)都是從 0開始的，
也就是  表格的第一行編號(hào)是 0  （偶數(shù)）；
第二行編號(hào)是 1   （奇數(shù)）；以此類推。。。

3, $("tr:odd").addClass()
可以寫成  $("tr").filter(":odd").addClass()

4，$('td:contains("cssrain")')          //取得包含字符串 cssrain 的所有td

5，jquery 轉(zhuǎn) dom ：
$("td").get(0).tagName 或 $("td")[0].tagName

6，load():
jquery中的load（）有2層意思，
第一層意思可以等價(jià)于 dom中 window.onload
第二層意思可以load（url ）。

7：ready簡(jiǎn)寫：
1;
$(document).ready(function(){
   //do something
})
2;
$().ready(function(){
   //do something
})
3;
$(function(){
   //do something
})

8，事件冒泡：
正常的來(lái)說(shuō)：點(diǎn)擊B  會(huì)觸發(fā)a的click。
如果我們不想觸發(fā)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();//阻止冒泡，從來(lái)不輸出 “A" 。可以去掉，試試對(duì)比效果。
})
})
</SCRIPT>

9, hide()show()會(huì)記住上一次的dipslay狀態(tài)
<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()加時(shí)間參數(shù)
<!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()會(huì)同時(shí)修改多個(gè)樣式屬性  : 高度，寬度和不透明度。
fadeIn() fadeOut() : 不透明度
fadeTo()   : 不透明度
slideDown() , slideUp()  :高度

如果都不能滿意，只能用animate（）了
animate()提供了更為強(qiáng)大的，復(fù)雜的效果。

12，animate() :
之前 .show('slow');  // slow代表的是0.6秒內(nèi)同時(shí)改變高度，寬度和透明度。如果用時(shí)間表示是 600 ；===  .show(600);
那么我們?cè)賮?lái)看看 animate()

animate({heigth : 'slow' ,width : 'slow' } , 'slow' )
這里之所以可以 height : 'slow'   其實(shí)就跟 .show('slow')  類似，當(dāng)然他前面規(guī)定了height  。。

13,做動(dòng)畫之前先確定位置。
<!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");//如果把這句去掉，動(dòng)畫就沒了。
/*
在使用.animate之前，請(qǐng)先把位置確定，不管你是用的 absolute 還是relative
總之要設(shè)置其中的一種，因?yàn)樗械膲K級(jí)元素默認(rèn)是static。
其實(shí)是跟css有關(guān)。
*/
$('#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()做動(dòng)畫效果時(shí)，動(dòng)畫執(zhí)行的順序。
<!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" />
//發(fā)生上面是按照順序來(lái)執(zhí)行的。先改變left，然后再改變top

對(duì)比:
<!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" />
//發(fā)生上面是一起執(zhí)行的，也就是 left和top 一起改變。

區(qū)別知道了吧。

12 下一頁(yè)閱讀全文

您可能感興趣的文章: