上文介紹了利用$函數(shù)篩選頁(yè)面上的元素和替代onload事件。$函數(shù)還有一個(gè)作用,當(dāng)它的參數(shù)是一個(gè)HTML片段的時(shí)候,它返回的是包含這個(gè)HTML元素的包裝集。例如:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Wrapper - Liehuo.net</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ù)是用來(lái)篩選包裝集的元素的。expression可以是一個(gè)字符串(選擇符),或者是html元素或者元素?cái)?shù)組。not函數(shù)除去符合選擇符的元素或者包含在數(shù)組中的元素。filter則相反,留下符合選擇符的元素或者包含在數(shù)組中的元素。
7.slice(begin,end) 這個(gè)函數(shù)返回的是一個(gè)新建的包裝集,內(nèi)容是原包裝集從第begin到第end個(gè)元素。end省略則表示最大長(zhǎng)度。
先來(lái)看幾個(gè)例子。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Wrapper - Liehuo.net</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>