jquery学习笔记(好)(5)_H5之家 - 中国HTML5教程资源分享第一站

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>a</div>
<input type="button" 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>a</div>
<input type="button" 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>a</div>
<input type="button" 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></a>').prependTo('body');//在body后的开始位置添加超链接。
})
</SCRIPT>
</head>
<body>
<h1>Demo</h1>
<div>
<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></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>Demo</h1>
<div>
<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></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()稍微不一样，前面例子说过区别了。。
前6章的笔记，差不多就这些了。

豆瓣网的jquery代码实例

豆瓣网的jquery实例代码，效果不错，方便大家学习