打包下載
呃，貌似是廣告哈？呵呵，不過的確是這樣，jQuery為我們提供了豐富的DOM操作方法，使這些復雜的DOM操作變得簡單。
代碼如下:
這裡有個超鏈接，超鏈接的地址為<a href='http:/www.baidu.com' target='_blank' class='link'>百度</a>
<br/>
點擊這個按鈕，讓百度變GOOGLE,再點一下就讓它再變回百度<input type='button' value='變GOOGLE吧' id='but_link'/>
<br/><br/>
這裡有幾個字，字的顏色呢，是紅色的，<font color='red' class='font'>我是紅色，我是紅色</font>
<br/>
點擊這個按鈕，讓紅色變綠色<input type='button' value='變綠色吧' id='but_color'/>
代碼如下:
$(document).ready(function(){
$('#but_link').toggle(function(){
$('.link').attr('href','http://www.google.com');
$('.link').text('GOOGLE');
$(this).attr('value','變BAIDU吧');
},function(){
$('.link').attr('href','http://www.baidu.com');
$('.link').text('百度');
$(this).attr('value','變GOOGLE吧');
});
$('#but_color').toggle(function(){
$('.font').attr('color','green');
$('.font').text('我是綠色，我是綠色');
$(this).attr('value','變紅色吧');
},function(){
$('.font').attr('color','red');
$('.font').text('我是紅色，我是紅色');
$(this).attr('value','變綠色吧');
});
});
如果想要循環對一些DOM對象做處理，比如書中的例子，想要對一個DIV下的每個A標簽都給其一個唯一的ID
那麼就可以用到jQuery的.each()方法，其類似於一個迭代器，有點像PHP的foreach
代碼如下:
$(document).ready(function() {
$('div.chapter a').each(function(index) {
$(this).attr({
'id': 'wikilink-' + index,
});
});
});
這個index參數類似於一個計數器，對第一個鏈接它的值為0，然後對每個後續的鏈接它的值會遞增1。依此類推。
呃，稍候這些例子，我一起給出演示地址。不過很無奈的是，我國外空間的那個地址被牆了。嗯。
深入理解$()工廠函數：
其實，從剛開始記這個筆記我們就在用這個工廠函數。
在某種意義上來說，這個函數在jQuery庫中牌最核心的位置，因為無論在添加效果、事件
還是為匹配的元素集合添加屬性時，都離不開它。
然而，除了選擇元素之外，$()函數的圓括號內還有另一個玄機——這個強大的特性使得$()函數不僅能夠改變頁面的視覺外觀，
更能改變頁面中實際的內容。只要在這對圓括號中放入一組HTML元素，就能輕而易舉地改變整個DOM結構。
例如，書中的例子是很恰當的，因為我確實寫過FAQ。。。
而FAQ總是一問一答型的（自問自答型的）。那麼，因為有的答案太長，所以要在其後面加一個Back to top
可以這樣寫
代碼如下:
$(document).ready(function){
$('<a href="#top">back to top</a>');
$('<a id="top"></a>');
});
這樣就為每個段落後面加了一個超鏈接“Back to top”，並且也添加了一個”top”錨。
啥？你說你沒看見？呃，好吧。。我承認因為我還沒有插入這個新元素至DOM中，只是創建了出來。
插入新元素：
jQuery提供了兩種將元素插入到其他元素前面的方法：.insertBefore()和.before()。
這兩個方法作用相同，它們的區別取決於如何將它們與其他方法進行連綴。
那麼，很自然的，聰明的你一定會想到，插入到其他元素後面的方法就是.insertAfter()和.after()。
對於剛才的”back to top”我們使用.insertAfter()方法，原因就是我們要在每個答案後面加上這個鏈接。。嗯。
代碼如下:
$(document).ready(function){
$('<a href="#top">back to top</a>').insertAfter('div.chapter p');
$('<a id="top"></a>');
});
通過.after()方法也能完成與.insertAfter()相同的任務，只不過必須把選擇符表達式放在這個方法的前面，而不是後面。
在使用.after()方法時，$(document).ready()中的第一行代碼可以改寫成如下所示：
$('div.chapter p').after('<a href="#top">back to top</a>');
使用.insertAfter()，可以通過連綴更多方法連續地對所創建的<a>元素進行操作。
而使用.after()，連綴的其他方法的操作對象就變成了$('div.chapter p')中選擇符匹配的元素。
那麼，要在元素內插入新的元素咋辦啊？剛才說的這些都是使其成為兄弟元素。而怎麼插入子元素呢？
別急，有.prependTo()方法呢。
代碼如下:
$('<a id="top" name="top"></a>').prependTo('body');
.prependTo()方法插入了作為目標的描，我們就為頁面添加了一組功能完備的back to top鏈接。
同樣，jQuery還提供了一個方法是.prepend()，看API其作用為：
向每個匹配的元素內部追加內容。
這個操作與對指定的元素執行appendChild方法，將它們添加到文檔中的情況類似。
例如：
代碼如下:
<p>I would like to say: </p>
<!-- 執行完效果 -->
<!--
<p>I would like to say: <b>Hello</b></p>
-->$("p").append("<b>Hello</b>");
包裝元素：
jQuery中用於將元素包裝在其他元素中的方法，被貼切地命名為：.wrap()。
如果，要將一個
<p>Test Paragraph.</p><div id="content"></div>
裡面的<p>標簽包在div裡面，
<div id="content"><p>Test Paragraph.</p></div><div id="content"></div>
就可以這樣來寫
$("p").wrap(document.getElementById('content'));
復制元素：
重頭戲終於出來了。。嗯。復制元素。。
現年頭都實行克隆，不過最近好像很少喊了。喊的最多的就是要克隆人。想想都奇怪。 克隆完後搶你老婆咋辦？
呃。閒話少說吧。。jQuery的克隆方法就是.clone()。嗯。相對於插入方法，相當於復制和粘貼。
默認情況下，.clone()方法不僅會復制匹配的元素，也會復制其所有的後代元素。
書上說這個方法也是接受參數的，如果參數值為false，那麼就只會復制匹配的元素，而不復制其子元素。
不過我試驗後不是這樣的。。嗯。
代碼如下:
<div id="xxx"><p>我可是有內容的DIV</p></div>
<input type='button' id='but_clone' value='復制嘿嘿' /> $('#but_clone').click(function(){
$('#xxx').clone(false).insertAfter($('#xxx'));
});
書上說clone(false)不會復制子標簽裡的內容，但是我的實驗是仍然會復制子標簽內容。。這是一處不同。
另外，書上說clone()不會復制元素的事件。這個我試驗後也是可以的。。嗯。。還是奇怪。。唉。
當需要多次引用一個jQuery對象時，最佳方式就是把它們保存到變量中。
這樣，通過減少對jQuery的$()工廠函數的調用，能夠提高遍歷DOM的速度。。
呃，這一章就簡單的記錄完了。有些遺憾，因為沒辦法按書中的例子來給大伙講解。那樣就是在抄這本書了。
斷斷續續的，因為中等要吃飯。所以這節寫了很長時間，總體效果嘛，自己還算滿意哈。呵呵。
下面，把書中的這一段抄下來吧。嗯。就是
DOM操作方法的簡單歸納：
要在每個匹配的元素中插入新元素，使用：
.append()
.appendTo()
.prepend()
.prependTo()
要在每個匹配的元素相信的位置上插入新元素，使用：
.after()
.insertAfter()
.before()
.insertBefore()
要在每個匹配的元素外部插入新元素，使用：
.wrap()
要用新元素或文本替換每個匹配的元素，使用：
.html()
.text()
要移除每個匹配的元素中的元素，使用：
.empty()
要從文檔中移除每個匹配的元素及其後代元素，但不實際刪除它們，使用：
.remove()
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
代碼打包下載