1,：eq()和nth-child()
看下面代码：
<SCRIPTLANGUAGE="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(){
//dosomething
})
2;
$().ready(function(){
//dosomething
})
3;
$(function(){
//dosomething
})


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


9,hide()show()会记住上一次的dipslay状态
<scriptsrc="jquery.js"type="text/javascript"></script>
<SCRIPTLANGUAGE="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>
<DIVid="a"style="display:inline;">a</div>
<DIVid="b"style="display:block;">b</div>
<inputtype="button"id="test"value="test"/>


10,hide()show()加时间参数
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh-CN"lang="zh-CN">
<scriptsrc="jquery.js"type="text/javascript"></script>
<SCRIPTLANGUAGE="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>
<DIVid="a"style="display:inline;">a</div>
<DIVid="b"style="display:block;">b</div>
<inputtype="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,做动画之前先确定位置。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh-CN"lang="zh-CN">
<scriptsrc="jquery.js"type="text/javascript"></script>
<SCRIPTLANGUAGE="JavaScript">
$(function(){
$('#a').css("position","absolute");//如果把这句去掉，动画就没了。

$('#test').click(function(){
$('#a').animate({left:'300'},'slow')
})
})
</SCRIPT>
<DIVid="a">a</div>
<inputtype="button"id="test"value="test"/>


14，width()和css('width')
<scriptsrc="jquery.js"type="text/javascript"></script>
<SCRIPTLANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
vart1=$('#a').width();
vart2=$('#a').css('width');
alert(t1);//200，不带单位
alert(t2);//200px，带单位
alert(parseInt(t2))//200，不带单位
})
})
</SCRIPT>
<DIVid="a"style="width:200px">a</div>
<inputtype="button"id="test"value="test"/>


15：animate()做动画效果时，动画执行的顺序。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh-CN"lang="zh-CN">
<scriptsrc="jquery.js"type="text/javascript"></script>
<SCRIPTLANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
$('#a').animate({left:"300px"},"slow")
.animate({top:"300px"},"slow");
})
})
</SCRIPT>
<DIVid="a"style="position:absolute;width:10px;height:10px;">a</div>
<inputtype="button"id="test"value="test"/>
//发生上面是按照顺序来执行的。先改变left，然后再改变top


对比:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh-CN"lang="zh-CN">
<scriptsrc="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"type="text/javascript"></script>
<SCRIPTLANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
$('#a').animate({left:"300px",top:"300px"},"slow")
})
})
</SCRIPT>
<DIVid="a"style="position:absolute;width:10px;height:10px;">a</div>
<inputtype="button"id="test"value="test"/>
//发生上面是一起执行的，也就是left和top一起改变。

区别知道了吧。

12下一页阅读全文