|
|
繼上一回寫jQuery的筆記貌似已經(jīng)過(guò)去很長(zhǎng)時(shí)間了，這一節(jié)也確實(shí)有必要寫一下了，呵呵，Let's Go~
操作屬性：
之前，我們說(shuō)過(guò).addClass()及.removeClass()方法，更改的其實(shí)也是DOM的屬性：className。
說(shuō)到這就得再提一下，為啥元素的類名叫做className而不是直接叫class，因?yàn)閏lass是js的保留字。嗯。
那么除了class，DOM元素的其它屬性，如：id、rel及href之類的，對(duì)于這些屬性我們咋操作？
別急，jQuery提供了.attr()和.removeAttr()方法。
甚至，你也可以用這兩個(gè)方法來(lái)替代.class()方法――如果你想給自己找點(diǎn)麻煩的話，呵呵。。
下面，讓我們把紅色的字，變成綠色的，而且，我喜歡GOOGLE，但是有一些人喜歡百度，那么好，讓我們選擇自己喜歡的。
復(fù)制代碼 代碼如下:
這里有個(gè)超鏈接，超鏈接的地址為<a href='http:/www.baidu.com' target='_blank' class='link'>百度</a>
<br/>
點(diǎn)擊這個(gè)按鈕，讓百度變GOOGLE,再點(diǎn)一下就讓它再變回百度<input type='button' value='變GOOGLE吧' id='but_link'/>
<br/><br/>
這里有幾個(gè)字，字的顏色呢，是紅色的，<font color='red' class='font'>我是紅色，我是紅色</font>
<br/>
點(diǎn)擊這個(gè)按鈕，讓紅色變綠色<input type='button' value='變綠色吧' id='but_color'/>
復(fù)制代碼 代碼如下:
$(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','變綠色吧');
});
});
如果想要循環(huán)對(duì)一些DOM對(duì)象做處理，比如書中的例子，想要對(duì)一個(gè)DIV下的每個(gè)A標(biāo)簽都給其一個(gè)唯一的ID
那么就可以用到j(luò)Query的.each()方法，其類似于一個(gè)迭代器，有點(diǎn)像php的foreach
復(fù)制代碼 代碼如下:
$(document).ready(function() {
$('div.chapter a').each(function(index) {
$(this).attr({
'id': 'wikilink-' + index,
});
});
});
這個(gè)index參數(shù)類似于一個(gè)計(jì)數(shù)器，對(duì)第一個(gè)鏈接它的值為0，然后對(duì)每個(gè)后續(xù)的鏈接它的值會(huì)遞增1。依此類推。
呃，稍候這些例子，我一起給出演示地址。不過(guò)很無(wú)奈的是，我國(guó)外空間的那個(gè)地址被墻了。嗯。
深入理解$()工廠函數(shù)：
其實(shí)，從剛開始記這個(gè)筆記我們就在用這個(gè)工廠函數(shù)。
在某種意義上來(lái)說(shuō)，這個(gè)函數(shù)在jQuery庫(kù)中牌最核心的位置，因?yàn)闊o(wú)論在添加效果、事件
還是為匹配的元素集合添加屬性時(shí)，都離不開它。
然而，除了選擇元素之外，$()函數(shù)的圓括號(hào)內(nèi)還有另一個(gè)玄機(jī)――這個(gè)強(qiáng)大的特性使得$()函數(shù)不僅能夠改變頁(yè)面的視覺(jué)外觀，
更能改變頁(yè)面中實(shí)際的內(nèi)容。只要在這對(duì)圓括號(hào)中放入一組HTML元素，就能輕而易舉地改變整個(gè)DOM結(jié)構(gòu)。
例如，書中的例子是很恰當(dāng)?shù)模驗(yàn)槲掖_實(shí)寫過(guò)FAQ。。。
而FAQ總是一問(wèn)一答型的（自問(wèn)自答型的）。那么，因?yàn)橛械拇鸢柑L(zhǎng)，所以要在其后面加一個(gè)Back to top
可以這樣寫
復(fù)制代碼 代碼如下:
$(document).ready(function){
$('<a href="#top">back to top</a>');
$('<a id="top"></a>');
});
這樣就為每個(gè)段落后面加了一個(gè)超鏈接“Back to top”，并且也添加了一個(gè)”top”錨。
啥？你說(shuō)你沒(méi)看見？呃，好吧。。我承認(rèn)因?yàn)槲疫€沒(méi)有插入這個(gè)新元素至DOM中，只是創(chuàng)建了出來(lái)。
插入新元素：
jQuery提供了兩種將元素插入到其他元素前面的方法：.insertBefore()和.before()。
這兩個(gè)方法作用相同，它們的區(qū)別取決于如何將它們與其他方法進(jìn)行連綴。
那么，很自然的，聰明的你一定會(huì)想到，插入到其他元素后面的方法就是.insertAfter()和.after()。
對(duì)于剛才的”back to top”我們使用.insertAfter()方法，原因就是我們要在每個(gè)答案后面加上這個(gè)鏈接。。嗯。
復(fù)制代碼 代碼如下:
$(document).ready(function){
$('<a href="#top">back to top</a>').insertAfter('div.chapter p');
$('<a id="top"></a>');
});
通過(guò).after()方法也能完成與.insertAfter()相同的任務(wù)，只不過(guò)必須把選擇符表達(dá)式放在這個(gè)方法的前面，而不是后面。
在使用.after()方法時(shí)，$(document).ready()中的第一行代碼可以改寫成如下所示：
$('div.chapter p').after('<a href="#top">back to top</a>');
使用.insertAfter()，可以通過(guò)連綴更多方法連續(xù)地對(duì)所創(chuàng)建的<a>元素進(jìn)行操作。
而使用.after()，連綴的其他方法的操作對(duì)象就變成了$('div.chapter p')中選擇符匹配的元素。
那么，要在元素內(nèi)插入新的元素咋辦啊？剛才說(shuō)的這些都是使其成為兄弟元素。而怎么插入子元素呢？
別急，有.prependTo()方法呢。
復(fù)制代碼 代碼如下:
$('<a id="top" name="top"></a>').prependTo('body');
.prependTo()方法插入了作為目標(biāo)的描，我們就為頁(yè)面添加了一組功能完備的back to top鏈接。
同樣，jQuery還提供了一個(gè)方法是.prepend()，看API其作用為：
向每個(gè)匹配的元素內(nèi)部追加內(nèi)容。
這個(gè)操作與對(duì)指定的元素執(zhí)行appendChild方法，將它們添加到文檔中的情況類似。
例如：
復(fù)制代碼 代碼如下:
<p>I would like to say: </p>
<!-- 執(zhí)行完效果 -->
<!--
<p>I would like to say: <b>Hello</b></p>
-->$("p").append("<b>Hello</b>");
包裝元素：
jQuery中用于將元素包裝在其他元素中的方法，被貼切地命名為：.wrap()。
如果，要將一個(gè)
<p>Test Paragraph.</p><div id="content"></div>
里面的<p>標(biāo)簽包在div里面，
<div id="content"><p>Test Paragraph.</p></div><div id="content"></div>
就可以這樣來(lái)寫
$("p").wrap(document.getElementById('content'));
復(fù)制元素：
重頭戲終于出來(lái)了。。嗯。復(fù)制元素。。
現(xiàn)年頭都實(shí)行克隆，不過(guò)最近好像很少喊了。喊的最多的就是要克隆人。想想都奇怪。 克隆完后搶你老婆咋辦？
呃。閑話少說(shuō)吧。。jQuery的克隆方法就是.clone()。嗯。相對(duì)于插入方法，相當(dāng)于復(fù)制和粘貼。
默認(rèn)情況下，.clone()方法不僅會(huì)復(fù)制匹配的元素，也會(huì)復(fù)制其所有的后代元素。
書上說(shuō)這個(gè)方法也是接受參數(shù)的，如果參數(shù)值為false，那么就只會(huì)復(fù)制匹配的元素，而不復(fù)制其子元素。
不過(guò)我試驗(yàn)后不是這樣的。。嗯。
復(fù)制代碼 代碼如下:
<div id="xxx"><p>我可是有內(nèi)容的DIV</p></div>
<input type='button' id='but_clone' value='復(fù)制嘿嘿' /> $('#but_clone').click(function(){
$('#xxx').clone(false).insertAfter($('#xxx'));
});
書上說(shuō)clone(false)不會(huì)復(fù)制子標(biāo)簽里的內(nèi)容，但是我的實(shí)驗(yàn)是仍然會(huì)復(fù)制子標(biāo)簽內(nèi)容。。這是一處不同。
另外，書上說(shuō)clone()不會(huì)復(fù)制元素的事件。這個(gè)我試驗(yàn)后也是可以的。。嗯。。還是奇怪。。唉。
當(dāng)需要多次引用一個(gè)jQuery對(duì)象時(shí)，最佳方式就是把它們保存到變量中。
這樣，通過(guò)減少對(duì)jQuery的$()工廠函數(shù)的調(diào)用，能夠提高遍歷DOM的速度。。
呃，這一章就簡(jiǎn)單的記錄完了。有些遺憾，因?yàn)闆](méi)辦法按書中的例子來(lái)給大伙講解。那樣就是在抄這本書了。
斷斷續(xù)續(xù)的，因?yàn)橹械纫燥垺Ｋ赃@節(jié)寫了很長(zhǎng)時(shí)間，總體效果嘛，自己還算滿意哈。呵呵。
下面，把書中的這一段抄下來(lái)吧。嗯。就是
DOM操作方法的簡(jiǎn)單歸納：
要在每個(gè)匹配的元素中插入新元素，使用：
.append()
.appendTo()
.prepend()
.prependTo()
要在每個(gè)匹配的元素相信的位置上插入新元素，使用：
.after()
.insertAfter()
.before()
.insertBefore()
要在每個(gè)匹配的元素外部插入新元素，使用：
.wrap()
要用新元素或文本替換每個(gè)匹配的元素，使用：
.html()
.text()
要移除每個(gè)匹配的元素中的元素，使用：
.empty()
要從文檔中移除每個(gè)匹配的元素及其后代元素，但不實(shí)際刪除它們，使用：
.remove()
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
代碼打包下載
JavaScript技術(shù)：jQuery DOM操作 基于命令改變頁(yè)面，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
