查看文章 |
jQuery基础教程笔记1
2008-06-30 10:02
看完jquery基础教程做的笔记，笔记并不适合所有人，觉得好，可以看，觉得不好，可以不看。 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" /> |
最近读者：
