jQuery基础教程笔记适合js新手

　　1, ：eq()和nth-child()

　　看下面代码：

　　$(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简写：

　　$(document).ready(function(){

　　//do something

　　})

　　$().ready(function(){

　　//do something

　　})

　　$(function(){

　　//do something

　　})

　　8，事件冒泡：

　　正常的来说：点击B 会触发a的click。

　　如果我们不想触发A，可以用stopPropagation() 阻止冒泡.

　　具体例子：

　　<div id="a">aaaaaaa

　　<div id="b">bbbbbbbb</div>

　　aaaaaa</div>

　　$(function(){

　　$('#a').click(function(){

　　alert("A")

　　})

　　$('#b').click(function(e){

　　alert("B")

　　e.stopPropagation();//阻止冒泡，从来不输出 “A" 。可以去掉，试试对比效果。

　　})

　　</SCRIPT>

　　9, hide()show()会记住上一次的dipslay状态

　　$(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>

　　10, hide() show()加时间参数

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　$(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>

　　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">

　　$(function(){

　　$('#a').css("position","absolute");//如果把这句去掉，动画就没了。

　　在使用.animate之前，请先把位置确定，不管你是用的 absolute 还是relative

　　总之要设置其中的一种，因为所有的块级元素默认是static。

　　其实是跟css有关。

　　$('#test').click(function(){

　　$('#a').animate({ left : '300' } , 'slow' )

　　})

　　</SCRIPT>

　　14，width()和css('width')

　　$(function(){

　　$('#test').click(function(){

　　var t1 = $('#a').width();

　　var t2 = $('#a').css('width');

　　alert( t1 ); //200 ，不带单位

　　alert( t2 ); //200px ，带单位

　　alert( parseInt(t2) ) //200 ，不带单位

　　})

　　</SCRIPT>

　　15：animate()做动画效果时，动画执行的顺序。

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　$(function(){

　　$('#test').click(function(){

　　$('#a').animate({left : "300px" } , "slow" )

　　.animate({ top : "300px" } , "slow" );

　　})

　　</SCRIPT>

　　//发生上面是按照顺序来执行的。先改变left，然后再改变top

　　对比:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　$(function(){

　　$('#test').click(function(){

　　$('#a').animate({left : "300px" , top : "300px"} , "slow" )

　　})

　　</SCRIPT>

　　//发生上面是一起执行的，也就是 left和top 一起改变。

　　区别知道了吧。

　　16,同理，我们再看一个例子：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　$(function(){

　　$('#test').click(function(){

　　$('#a').animate({left : "300px" } , "slow" )

　　.fadeTo('slow',0.2)

　　.animate({ top : "300px" } , "slow" )

　　.fadeTo('slow',1);

　　//排队效果会一个个执行。

　　})

　　</SCRIPT>

　　//当animate()跟其他动画效果执行的时候，也是排队执行的。也就是一个个来。

　　对比：css()

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　$(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>

　　解决：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　$(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>

　　总结：

　　当在animate 中以多个属性的方式应用时，效果是同时发生的。

　　当以连续方式应用时，是按顺序来的。

　　非效果方法，比如.css()方式不是按照顺序来的，解决方法是放在回调函数里。

　　17, 做一个实例：段落

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　<head>

　　<title>DOM Manipulation</title>

　　$(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>

　　</body>

　　</html>

　　改进：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　<head>

　　<title>DOM Manipulation</title>

　　$(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>

　　</body>

　　</html>

　　18，包装元素 : wrap():

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　<head>

　　<title>DOM Manipulation</title>

　　$(function(){

　　$("p").wrap("<div class='chapter'></div>");

　　})

　　</SCRIPT>

　　</head>

　　<body>

　　</body>

　　</html>

<!--

　　结果为：

　　<p>

　　段落1段落1段落1段落1

　　</p>

　　</div>

　　<p>

　　段落2段落2段落2段落2

　　</p>

　　</div>

　　而不是：

　　<p>

　　段落1段落1段落1段落1

　　</p>

　　<p>

　　段落2段落2段落2段落2

　　</p>

　　</div>

　　-->

　　19, 关于clone：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　<head>

　　<title>DOM Manipulation</title>

　　$(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>

　　</body>

　　</html>

　　20, DOM操作总结：

　　创建节点：

　　直接 $("<p>cssrain</p>")

　　复制节点:

　　.clone()

　　插入节点：

　　.append()

　　.appendTo()

　　.prepend()

　　.prependTo()

　　.after()

　　.insertAfter()

　　.before()

　　.insertBefore()

　　删除节点：

　　.remove()

　　清空节点:

　　.empty()

　　包装节点：

　　.wrap()

　　设置属性

　　.attr()

　　删除属性

　　.removeAttr()

　　基本跟javascript中的DOM操作一样，clone()稍微不一样，前面例子说过区别了。。

　　前6章的笔记，差不多就这些了。

教程首页更多教程