快捷導(dǎo)航

JQuery 學(xué)習(xí)筆記選擇器之一

更新時間：2009年07月23日 17:26:47 作者：

對于JQuery是啥東東的描述我在此也就不多說了,哈,如果有興趣的話我相信不會懶的去查吧,哈^^

本章主要先對Jquery的選擇器進(jìn)行說明下,本人也不敢說講解,哈,因為我也是正在學(xué)習(xí)中,本系列文章所寫目的只在與對自己學(xué)習(xí)過程中的心得等記錄下來,一方面加強自己的印象,另一方面共享下學(xué)習(xí)的經(jīng)驗,呵,小弟剛開始寫這種文章，希望大家多多支持^^，有哪些方法不好可以跟貼指導(dǎo)指導(dǎo)^^
現(xiàn)在,讓我們一起開始在JQuery的世界里飛翔吧^^
首先,本章先來學(xué)習(xí)JQuery最基本的選擇器的使用咯
先聲明下,使用JQuery最基本的規(guī)則
$(document).ready(function(){
//do something
})
而在本系列文章中,采用縮寫
$(
function(){
//do something
}
)
關(guān)于例子中使用的外部JS文件jquery-1.3.2.js則是使用JQuery的最基本的庫文件，沒有的同學(xué)可以去這里下載也可到我CSDN的資源里去下
好咯,以下是我做測試用的HTML文件內(nèi)容,大家可參考下

復(fù)制代碼代碼如下:

 
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"><!-- 
.test{ 
background:red;} 
--></style><style type="text/css" bogus="1"> .test{ 
background:red;}</style> 
<script src="js/jquery-1.3.2.js"></script> 
<script type="text/javascript"><!-- 
$( 
function(){ 
var result = $("#sResult"); 
$("#aFirst").click(function(){ 
result.html($("#oneP").html()); 
}) 
$("#aSecond").click( 
function(){ 
result.html(""); 
$("form").each(function(){ 
result.html(result.html() + $(this).html()); 
}) 
} 
) 
$("#aThird").click( 
function(){ 
result.html(""); 
$(".test").each( 
function(){ 
result.html(result.html() + $(this).html()); 
} 
) 
} 
) 
$("#aFourthly").click(function(){ 
result.html($("*").html()); 
}) 
} 
) 
// --></script> 
<title>無標(biāo)題文檔</title> 
</head> 

<body> 
<form> 
<p id="oneP">one</p> <div><p>two</p></div> 
</form> 
<form> 
<p class="test">three</p> 
</form> 
<a href="#" id="aFirst">獲取ID為"oneP"的HTML內(nèi)容</a>| 
<a href="#" id="aSecond">獲取所有Form元素的HTML的內(nèi)容</a>| 
<a href="#" id="aThird">獲取CSS樣式為test的HTML的內(nèi)容</a>| 
<a href="#" id="aFourthly">獲取頁面所有HTML內(nèi)容</a><br /> 
Result: 
<div style=" border-bottom-color:#000; border:1px solid " > 
<span id="sResult"></span> 
</div> 
</body> 
</html> 

本章講的內(nèi)容分別就是四個連接元素aFirst、aSecond、aThird、aFourthly所完成的功能
先對代碼中一起不屬性選擇器的內(nèi)容進(jìn)行解釋下吧
1.element.html(string content)
這個方法也是屬于比較常用的功能吧
當(dāng)此方法無傳參數(shù)時，則用于讀取當(dāng)前element的純HTML內(nèi)容，如果傳參進(jìn)去使用時，則為修改element的HTML內(nèi)容，這應(yīng)該還算好理解吧^^
2.each()
此方法主要就是用于遍歷element數(shù)組，比如例子中的aSecond連接，當(dāng)點擊aSecond時,將會遍歷頁面中的兩個Form表單,并用.html()方法來顯示每個表單的內(nèi)容
課外就簡單講到這,現(xiàn)在該講正題咯
1.$("#ID")
描述:此方法用于根據(jù)Element的ID來獲取該元素,學(xué)過JS的人應(yīng)該很容易了解此意思,就相當(dāng)于JS里的document.getElementById("ID");
在例子中,就用此方法來獲取ID為oneP的元素,并顯示其HTML內(nèi)容.
返回值:Element
2.$("TagName")
描述:此方法用于獲取某種元素的的集合,相當(dāng)于JS里的document.getElementsTagName("TagName").如例子中獲取所有的Form表單元素集合.
返回值:Array(Element);
3.$(".className")
描述:此方法用于獲取使用某個樣式的元素集合,如例子中獲取樣式為test的元素集合.
返回值:Array(Element);
4.$("*")
描述:用于獲取頁面上所有的HTML,目前還不知道這個有哪些實用的地方,哈,先存著
返回值:Array(Element);
5.$("#ID,TagName,.className,...N")
描述:此方法其實就是把前四種選擇器合起來一起用,以","進(jìn)行分隔,返回一個元素集合,上面沒例子,我就在這稍做個解釋,比如要獲取ID為oneP、DIV元素、樣式為test的元素，即可使用$("#oneP,div,.test")。
返回值：Array(Element)；

您可能感興趣的文章: