jQuery基礎教程筆記適合js新手第1/2頁
2024-05-06 14:17:42
供稿:網友
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