jQuery基礎(chǔ)教程筆記適合js新手
更新時間：2008年07月06日 10:05:40 作者：
看完jquery基礎(chǔ)教程做的筆記，筆記并不適合所有人，覺得好，可以看，覺得不好，可以不看。
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);
//排隊效果會一個個執(zhí)行。
})
})
</SCRIPT>
<DIV id="a" style="position:absolute;width:40px;height:40px;top:100px;background:red;">a</div>
<input type="button" id="test" value="test" />
//當(dāng)animate()跟其他動畫效果執(zhí)行的時候，也是排隊執(zhí)行的。也就是一個個來。
對比：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寫在最后，但點(diǎn)擊一開始就會執(zhí)行。
//排隊效果并不適合 .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");
})
//我們可以把他寫在 最后一個效果的 回調(diào)函數(shù)里。
})
})
</SCRIPT>
<DIV id="a" style="position:absolute;width:40px;height:40px;top:100px;background:red;">a</div>
<input type="button" id="test" value="test" />
總結(jié)：
當(dāng)在animate 中以多個屬性的方式應(yīng)用時， 效果是同時發(fā)生的。
當(dāng)以 連續(xù)方式 應(yīng)用時， 是按順序來的。
非效果方法，比如.css()方式不是按照順序來的，解決方法是 放在回調(diào)函數(shù)里。
17, 做一個實(shí)例 ： 段落
<!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>
改進(jìn)：
<!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) );
//瞄點(diǎn)：在 標(biāo)簽a 上可以用name
//在標(biāo)簽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（）的時候， 發(fā)現(xiàn)k的內(nèi)容 被倒置了。我暈。。。
//所以 改用 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>
<!--
結(jié)果為：
<div class="chapter">
<p>
段落1段落1段落1段落1
</p>
</div>
<div class="chapter">
<p>
段落2段落2段落2段落2
</p>
</div>
而不是：
<div class="chapter">
<p>
段落1段落1段落1段落1
</p>
<p>
段落2段落2段落2段落2
</p>
</div>
-->
19, 關(guān)于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");
//我們發(fā)現(xiàn) clone(true) 會連帶綁定的事件一起復(fù)制，
//false只復(fù)制元素，而綁定的事件已經(jīng)被它扔掉。
$("p").clone().appendTo("body");//默認(rèn)是 false
/*
這點(diǎn) jquery的clone（）跟dom里的clone有點(diǎn)區(qū)別了。
如果想實(shí)現(xiàn)dom 里的clone（）
可以這么做;
$("p").clone(true).empty().appendTo("body");
*/
})
</SCRIPT>
</head>
<body>
<p>段落1段落1段落1段落1</p>
</body>
</html>
20, DOM操作總結(jié)：
創(chuàng)建節(jié)點(diǎn)：
直接 $("<p>cssrain</p>")
復(fù)制節(jié)點(diǎn):
.clone()
插入節(jié)點(diǎn)：
.append()
.appendTo()
.prepend()
.prependTo()
.after()
.insertAfter()
.before()
.insertBefore()
刪除節(jié)點(diǎn)：
.remove()
清空節(jié)點(diǎn):
.empty()
包裝節(jié)點(diǎn)：
.wrap()
設(shè)置屬性
.attr()
刪除屬性
.removeAttr()
基本跟javascript中的DOM操作一樣，clone()稍微不一樣，前面例子說過區(qū)別了。。
前6章的筆記，差不多就這些了。
相關(guān)文章
js整數(shù)字符串轉(zhuǎn)換為金額類型數(shù)據(jù)(示例代碼)
本篇文章主要是對js整數(shù)字符串轉(zhuǎn)換為金額類型數(shù)據(jù)的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
jquery.toArray()是將jQuery對象轉(zhuǎn)換成數(shù)組,我們來分析下2014-06-06
jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHei
jQuery的位置函數(shù)(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小應(yīng)用2010-03-03
jquery的父、子、兄弟節(jié)點(diǎn)查找,節(jié)點(diǎn)的子節(jié)點(diǎn)循環(huán)方法
下面小編就為大家?guī)硪黄猨query的父、子、兄弟節(jié)點(diǎn)查找,節(jié)點(diǎn)的子節(jié)點(diǎn)循環(huán)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
解決jquery實(shí)現(xiàn)的radio重新選中的問題
這篇文章主要介紹了解決jquery實(shí)現(xiàn)的radio重新選中的問題的方法和示例，十分的實(shí)用，有需要的小伙伴可以參考下。2015-07-07
下面小編就為大家?guī)硪黄狫query跨域獲得Json的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jquery 全局AJAX事件使用代碼，需要的朋友可以參考下。2010-11-11
使用jquery實(shí)現(xiàn)select添加實(shí)現(xiàn)后臺權(quán)限添加的效果
使用jquery實(shí)現(xiàn)select添加實(shí)現(xiàn)后臺權(quán)限添加的效果，需要的朋友可以參考下。2011-05-05
jquery 最簡單易用的表單驗(yàn)證插件，不論是從應(yīng)用還是學(xué)習(xí)插件的寫法都是值得一看的。2010-02-02
自己動手制作jquery插件之自動添加刪除行的實(shí)現(xiàn)
我們常常會遇到這樣的情況，一個系統(tǒng)中有大量的需要對一個行進(jìn)行復(fù)制添加，希望能夠進(jìn)行批量的操作，這個時候，我們就可以考慮把它做成一個jquery插件了.2011-10-10