jQuery 第二課 操作包裝集元素代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Wrapper</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("<p>I am a red line.</p>").css("color", "Red").appendTo("#foo");
});
</script>
</head>
<body>
<div id="foo">
</div>
</body>
</html>
$創(chuàng)造了一個(gè)p元素的包裝元素,這個(gè)包裝元素和用上文提到的選擇符選到的元素是一樣的。同樣也可以調(diào)用jQuery的一些方法,最后用appendTo(以后介紹)把這個(gè)元素移動(dòng)到div里。最終結(jié)果是:
下面介紹對(duì)包裝集操作的函數(shù)。
1. html(),html(text). 第一個(gè)函數(shù)返回包裝集第一個(gè)元素內(nèi)部的html,第二個(gè)函數(shù)將包裝集中的所有元素的內(nèi)部html設(shè)置為text。
2.size()。返回包裝集包含的元素。
3.get(),get(n)。第一個(gè)函數(shù)將包裝集合內(nèi)的HTML元素以javascript數(shù)組的形式返回,第二個(gè)元素返回第n個(gè)HTML元素。
4.index(elem). 返回傳入的HTML元素elem在包裝集中的位置。如果不在包裝集中,則返回-1。
5.add(s),add(elem),add(array). add函數(shù)用于向包裝集中添加元素。如果是選擇器,則添加所有被選中的元素,如果是HTML片段,則根據(jù)此片段創(chuàng)建HTML元素并添加此元素;如果是HTML元素或者HTML元素的數(shù)組,則直接添加。
6. not(expression),filter(expression). 這兩個(gè)函數(shù)是用來篩選包裝集的元素的。expression可以是一個(gè)字符串(選擇符),或者是html元素或者元素?cái)?shù)組。not函數(shù)除去符合選擇符的元素或者包含在數(shù)組中的元素。filter則相反,留下符合選擇符的元素或者包含在數(shù)組中的元素。
7.slice(begin,end) 這個(gè)函數(shù)返回的是一個(gè)新建的包裝集,內(nèi)容是原包裝集從第begin到第end個(gè)元素。end省略則表示最大長度。
先來看幾個(gè)例子。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Wrapper</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('span').html($('li').size());
$('li').not('li:first').add('p:first').css('color', 'Red');
$('li').get(0).innerHTML = "First Special Item";
$('p:last').html($('li').html());
});
</script>
</head>
<body>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Forth Item</li>
<li>Fifth Item</li>
</ul>
<p>I am a lonely p.</p>
<p>The UL has <span></span> elements.</p>
<span>Hello jQuery.</span>
<p></p>
</body>
</html>
第一行演示了html和size的用法。按上面的介紹,兩個(gè)span中的內(nèi)容都應(yīng)該會(huì)變成5. 第二行演示了not和add的一個(gè)用法。最終后四個(gè)li和第一個(gè)p會(huì)變成紅色。第三行演示了get的用法,一旦調(diào)用get之后,返回值就不是包裝元素而是HTML元素,因此可以使用HTML DOM提供的方法設(shè)置innerHTML。最后一行還是演示html()的用法,要注意html()返回的是第一個(gè)元素的內(nèi)部內(nèi)容,但是html(text)會(huì)把所有元素的內(nèi)容都設(shè)置成text。 最終的結(jié)果如下:
9. 這是一大類非常有用的函數(shù),可以根據(jù)位置關(guān)系篩選元素。
children() | 返回包裝集內(nèi)元素的子元素(兒子元素,往下多層的不算) |
contents() | 返回包裝集的內(nèi)容的包裝集,可能有文本節(jié)點(diǎn)(這個(gè)包裝集有些特殊,下面介紹) |
next() | 包裝集元素中不重復(fù)的下一個(gè)元素。 |
nextAll() | 包裝集元素中所有的下一個(gè)元素。 |
parent() | 包裝集中元素不重復(fù)的父元素的包裝集 |
parents() | 同上,但是一直向上追溯到文檔根元素(不包括根元素) |
prev() | 類似next(),所有不重復(fù)的前一個(gè)元素 |
prevAll() | 類型nextAll(),所有前一個(gè)元素 |
siblings() | 包裝集中所有不重復(fù)的兄弟元素。 |
先看前兩個(gè)函數(shù)的區(qū)別,HTML代碼還是用上一個(gè)例子的,js腳本如下:
$(function() {
var ul = $('ul:first');
$('p span').html(ul.children().size());
var content = ul.contents();
alert(content.size());
});
children()返回的包裝集的數(shù)量是6,說明最后一個(gè)嵌套的<ul>僅算作一個(gè)元素。但是contents()返回的包裝集的數(shù)量多達(dá)13。利用調(diào)試器查看一下它的內(nèi)容:

它和children的區(qū)別就是包含了大量的Text節(jié)點(diǎn),包括僅僅是一個(gè)空行的文本節(jié)點(diǎn)。
再看next和nextAll方法,仍然使用上面的HTML的代碼,js腳步如下:
$(function() {
$('span:last').html($('ul').next().html());
$('p:last').html($('ul').nextAll().size());
});ul的下個(gè)元素應(yīng)該是I am a lonely p.所有 下個(gè)元素共有4個(gè)。故結(jié)果為:

其他函數(shù)使用類似,不再舉例。
10.find
find方法和filter方法很容易混淆,同樣也是傳入一個(gè)選擇符篩選包裝集中的元素。不過find篩選的是包裝集內(nèi)元素的子元素,filter是篩選的包裝集內(nèi)的元素。下面會(huì)舉一個(gè)例子。
11 clone
clone方法返回一個(gè)包裝集的副本。
例子:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Wrapper</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('body').children().filter('p:first').css('color', 'Red').appendTo('#container');
$('body').children().find('p').css('color', 'Green').appendTo('#container');
$('p:last').clone().css('color', 'Red').appendTo('body');
});
</script>
</head>
<body>
<p>I am a lonely p.</p>
<div>The UL has <p>Inner P</p> elements.</div>
<p>Hello jQuery.</p>
<div id='container'></div>
</body>
</html>
這是一個(gè)比較有意思的例子。第一行篩選出第一個(gè)p并且設(shè)為紅色,再移動(dòng)到最后的一個(gè)div中。第二行篩選出包含在包裝集中的p,設(shè)為綠色,移動(dòng)到最后一個(gè)div中,注意這里,此時(shí)這句篩選到的p有兩個(gè),一個(gè)是Inner P,還有一個(gè)是被第一句移動(dòng)到最后的div中的 I am a lonely p.再把這兩個(gè)元素添加到最后的div中,由于InnerP本身就在這個(gè)div中,所以相當(dāng)于沒有移動(dòng)。最后,把最后一個(gè)p復(fù)制一份,設(shè)置為紅色,添加到body最后。因此,最終的頁面和色彩如下:

最后介紹連綴鏈的管理。所謂連綴鏈,上面的例子也有體現(xiàn),就是每調(diào)用一個(gè)jQuery方法它都返回一個(gè)包裝集,這個(gè)包裝集作為下一個(gè)方法的調(diào)用者,構(gòu)成一個(gè)鏈。在這個(gè)過程中有可能會(huì)產(chǎn)生新的包裝集(比如調(diào)用clone())方法。在一個(gè)連綴鏈中,如果調(diào)用end方法,則返回上一個(gè)包裝集,如果調(diào)用andSelf方法則把當(dāng)前和上一個(gè)包裝集合并成一個(gè)包裝集并返回??梢韵氲剑琷Query內(nèi)部把這些連綴的包裝集存在一個(gè)堆棧中。下面的簡單例子展示上述原理:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Wrapper</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('div:eq(0)').find('p:lt(2)').css('color', 'red');
$('div:eq(1)').find('p:lt(2)').end().css('color', 'blue');
$('div:eq(2)').find('p:last').prev().andSelf().css('color', 'Green');
});
</script>
</head>
<body>
<div>
<p>div1 p1</p>
<p>div1 p2</p>
<p>div1 p3</p>
</div>
<div>
<p>div2 p1</p>
<p>div2 p2</p>
<p>div2 p3</p>
</div>
<div>
<p>div3 p1</p>
<p>div3 p2</p>
<p>div3 p3</p>
</div>
</body>
</html>

- JQuery對(duì)表單元素的基本操作使用總結(jié)
- jQuery操作元素css樣式的三種方法
- jQuery之過濾元素操作小結(jié)
- JQuery操作iframe父頁面與子頁面的元素與方法(實(shí)例講解)
- JQueryiframe頁面操作父頁面中的元素與方法(實(shí)例講解)
- jQuery .attr()和.removeAttr()方法操作元素屬性示例
- js/jQuery對(duì)象互轉(zhuǎn)(快速操作dom元素)
- jquery 操作日期、星期、元素的追加的實(shí)現(xiàn)代碼
- jQuery對(duì)表單元素的取值和賦值操作代碼
- 從零開始學(xué)習(xí)jQuery (四) jQuery中操作元素的屬性與樣式
- jQuery學(xué)習(xí)3:操作元素屬性和特性
- jQuery針對(duì)各類元素操作基礎(chǔ)教程
相關(guān)文章
jquery入門—選擇器實(shí)現(xiàn)隔行變色實(shí)例代碼
JQuery入門—選擇器實(shí)現(xiàn)隔行變色如何實(shí)現(xiàn)呢?JQuery選擇器繼承了CSS、path語音的部分語法,允許通過標(biāo)簽名、屬性名、內(nèi)容對(duì)DOM元素進(jìn)行快速、準(zhǔn)確的選擇,接下來詳細(xì)介紹,需要的朋友可以參考下2013-01-01淺談jQuery中的$.extend方法來擴(kuò)展JSON對(duì)象
下面小編就為大家?guī)硪黄獪\談jQuery中的$.extend方法來擴(kuò)展JSON對(duì)象。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02jQuery.event兼容各瀏覽器的event詳細(xì)解析
jQuery在遵循W3C規(guī)范的情況下,對(duì)事件的常用屬性進(jìn)行了封裝,使得事件處理在各大瀏覽器下都可以正常的運(yùn)行而不需要進(jìn)行瀏覽器類型判斷2013-12-12jQuery擴(kuò)展實(shí)現(xiàn)text提示還能輸入多少字節(jié)的方法
這篇文章主要介紹了jQuery擴(kuò)展實(shí)現(xiàn)text提示還能輸入多少字節(jié)的方法,涉及jQuery擴(kuò)展及字符串操作相關(guān)技巧,需要的朋友可以參考下2016-11-11JQuery使用屬性addClass、removeClass和toggleClass實(shí)現(xiàn)增加和刪除類操作示例
這篇文章主要介紹了JQuery使用屬性addClass、removeClass和toggleClass實(shí)現(xiàn)增加和刪除類操作,涉及jquery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-11-11利用jQuery簡單實(shí)現(xiàn)產(chǎn)品展示圖片左右滾動(dòng)功能(示例代碼)
本篇文章主要是對(duì)利用jQuery簡單實(shí)現(xiàn)產(chǎn)品展示圖片左右滾動(dòng)功能的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-01-01