jQuery基础总结

技术2022-05-20 105

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 一起改变。区别知道了吧。 16,同理，我们再看一个例子： <!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" ) .fadeTo('slow',0.2) .animate({ top : "300px" } , "slow" ) .fadeTo('slow',1); //排队效果会一个个执行。 }) }) </SCRIPT> <DIV id="a" style="position:absolute;width:40px;height:40px;top:100px;background:red;">a</div> <input type="button" id="test" value="test" /> //当animate()跟其他动画效果执行的时候，也是排队执行的。也就是一个个来。对比：css() <!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" ) .fadeTo('slow',0.2) .animate({ top : "300px" } , "slow" ) .fadeTo('slow',1) .css("backgroundColor","#000"); //虽然css写在最后，但点击一开始就会执行。 //排队效果并不适合 .css() }) }) </SCRIPT> <DIV id="a" style="position:absolute;width:40px;height:40px;top:100px;background:red;">a</div> <input type="button" id="test" value="test" /> 解决： <!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" ) .fadeTo('slow',0.2) .animate({ top : "300px" } , "slow" ) .fadeTo('slow',1 ,function(){ $(this).css("backgroundColor","#000"); }) //我们可以把他写在最后一个效果的回调函数里。 }) }) </SCRIPT> <DIV id="a" style="position:absolute;width:40px;height:40px;top:100px;background:red;">a</div> <input type="button" id="test" value="test" /> 总结：当在animate 中以多个属性的方式应用时，效果是同时发生的。当以连续方式应用时，是按顺序来的。非效果方法，比如.css()方式不是按照顺序来的，解决方法是放在回调函数里。 17, 做一个实例：段落 <!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="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>DOM Manipulation</title> <script src="jquery.js" type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript"> $(function(){ // $('<a href="#top">回到顶部</a>').insertAfter('div.chapter p');//每个段落后面添加超链接 $('<a href="#top">回到顶部</a>').insertAfter('div.chapter p:gt(2)');//（除掉前3个）每个段落后面添加超链接 $('<a name="top"></a>').prependTo('body');//在body后的开始位置添加超链接。 }) </SCRIPT> </head> <body> <h1 id="excerpt">Demo</h1> <div class="chapter"> <p>段落1段落1段落1段落1<br/><br/><br/><br/><br/><br/></p> <p>段落2段落2段落2段落2<br/><br/><br/><br/><br/><br/></p> <p>段落3段落3段落3段落3<br/><br/><br/><br/><br/><br/><br/></p> <p>段落4段落4段落4段落4<br/><br/><br/><br/><br/><br/><br/></p> <p>段落5段落5段落5段落5<br/><br/><br/><br/><br/><br/><br/></p> <p>段落6段落6段落6段落6<br/><br/><br/><br/><br/><br/><br/></p> <p>段落7段落7段落7段落7<br/><br/><br/><br/><br/><br/><br/></p> </body> </html> 改进： <!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="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>DOM Manipulation</title> <script src=" http://www.cssrain.cn/demo/JQuery+API/jquery-1 [1].2.1.pack.js " type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript"> $(function(){ // $('<a href="#top">回到顶部</a>').insertAfter('div.chapter p');//每个段落后面添加超链接 $('<a href="#top">回到顶部</a>').insertAfter('div.chapter p:gt(2)');//（除掉前3个）每个段落后面添加超链接 $('<a name="top"></a>').prependTo('body');//在body后的开始位置添加超链接。 $('div.chapter p').each(function(index){ $(this).attr("id","node_"+(index+1) ); //瞄点：在标签a 上可以用name //在标签p上我用name不可以，只能用id }) var k =""; $('div.chapter p').each(function(index){ k += "<a href='#node_"+(index+1)+"'>段落"+(index+1)+"</a> "; }) $(k).insertBefore('.chapter');//在body后的开始位置添加超链接。 //用prependTo（）的时候，发现k的内容被倒置了。我晕。。。 //所以改用 insertBefore（）、 }) </SCRIPT> </head> <body> <h1 id="excerpt">Demo</h1> <div class="chapter"> <p>段落1段落1段落1段落1<br/><br/><br/><br/><br/><br/></p> <p>段落2段落2段落2段落2<br/><br/><br/><br/><br/><br/></p> <p>段落3段落3段落3段落3<br/><br/><br/><br/><br/><br/><br/></p> <p>段落4段落4段落4段落4<br/><br/><br/><br/><br/><br/><br/></p> <p>段落5段落5段落5段落5<br/><br/><br/><br/><br/><br/><br/></p> <p>段落6段落6段落6段落6<br/><br/><br/><br/><br/><br/><br/></p> <p>段落7段落7段落7段落7<br/><br/><br/><br/><br/><br/><br/></p> </body> </html> 18，包装元素 : wrap(): <!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="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>DOM Manipulation</title> <script src="jqurey.js" type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript"> $(function(){ $("p").wrap("<div class='chapter'></div>"); }) </SCRIPT> </head> <body> <p>段落1段落1段落1段落1</p> <p>段落2段落2段落2段落2</p> </body> </html>  19, 关于clone： <!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="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>DOM Manipulation</title> <script src="jquery.js" type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript"> $(function(){ $("p").bind("click",function(){ alert("cssrain test:"); }) $("p").clone(true).appendTo("body"); $("p").clone(false).appendTo("body"); //我们发现 clone(true) 会连带绑定的事件一起复制， //false只复制元素，而绑定的事件已经被它扔掉。 $("p").clone().appendTo("body");//默认是 false /* 这点 jquery的clone（）跟dom里的clone有点区别了。如果想实现dom 里的clone（）可以这么做; $("p").clone(true).empty().appendTo("body"); */ }) </SCRIPT> </head> <body> <p>段落1段落1段落1段落1</p> </body> </html> 20, DOM操作总结：创建节点：直接 $("<p>cssrain</p>") 复制节点: .clone() 插入节点： .append() .appendTo() .prepend() .prependTo() .after() .insertAfter() .before() .insertBefore() 删除节点： .remove() 清空节点: .empty() 包装节点： .wrap() 设置属性 .attr() 删除属性 .removeAttr() 基本跟javascript中的DOM操作一样，clone()稍微不一样，前面例子说过区别了。。

专利

最新回复(0)