|
|
本章主要先對(duì)Jquery的選擇器進(jìn)行說(shuō)明下,本人也不敢說(shuō)講解,哈,因?yàn)槲乙彩钦趯W(xué)習(xí)中,本系列文章所寫目的只在與對(duì)自己學(xué)習(xí)過(guò)程中的心得等記錄下來(lái),一方面加強(qiáng)自己的印象,另一方面共享下學(xué)習(xí)的經(jīng)驗(yàn),呵,小弟剛開(kāi)始寫這種文章，希望大家多多支持^^，有哪些方法不好可以跟貼指導(dǎo)指導(dǎo)^^
現(xiàn)在,讓我們一起開(kāi)始在JQuery的世界里飛翔吧^^
首先,本章先來(lái)學(xué)習(xí)JQuery最基本的選擇器的使用咯
先聲明下,使用JQuery最基本的規(guī)則
$(document).ready(function(){
//do something
})
而在本系列文章中,采用縮寫
$(
function(){
//do something
}
)
關(guān)于例子中使用的外部JS文件jquery-1.3.2.js則是使用JQuery的最基本的庫(kù)文件，沒(méi)有的同學(xué)可以去 這里下載也可到我CSDN的資源里去下
好咯,以下是我做測(cè)試用的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>無(wú)標(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">獲取頁(yè)面所有HTML內(nèi)容</a><br />
Result:
<div style=" border-bottom-color:#000; border:1px solid " >
<span id="sResult"></span>
</div>
</body>
</html>
本章講的內(nèi)容分別就是四個(gè)連接元素aFirst、aSecond、aThird、aFourthly所完成的功能
先對(duì)代碼中一起不屬性選擇器的內(nèi)容進(jìn)行解釋下吧
1.element.html(string content)
這個(gè)方法也是屬于比較常用的功能吧
當(dāng)此方法無(wú)傳參數(shù)時(shí)，則用于讀取當(dāng)前element的純HTML內(nèi)容，如果傳參進(jìn)去使用時(shí)，則為修改element的HTML內(nèi)容，這應(yīng)該還算好理解吧^^
2.each()
此方法主要就是用于遍歷element數(shù)組，比如例子中的aSecond連接，當(dāng)點(diǎn)擊aSecond時(shí),將會(huì)遍歷頁(yè)面中的兩個(gè)Form表單,并用.html()方法來(lái)顯示每個(gè)表單的內(nèi)容
課外就簡(jiǎn)單講到這,現(xiàn)在該講正題咯
1.$("#ID")
描述:此方法用于根據(jù)Element的ID來(lái)獲取該元素,學(xué)過(guò)JS的人應(yīng)該很容易了解此意思,就相當(dāng)于JS里的document.getElementById("ID");
在例子中,就用此方法來(lái)獲取ID為oneP的元素,并顯示其HTML內(nèi)容.
返回值:Element
2.$("TagName")
描述:此方法用于獲取某種元素的的集合,相當(dāng)于JS里的document.getElementsTagName("TagName").如例子中獲取所有的Form表單元素集合.
返回值:Array(Element);
3.$(".className")
描述:此方法用于獲取使用某個(gè)樣式的元素集合,如例子中獲取樣式為test的元素集合.
返回值:Array(Element);
4.$("*")
描述:用于獲取頁(yè)面上所有的HTML,目前還不知道這個(gè)有哪些實(shí)用的地方,哈,先存著
返回值:Array(Element);
5.$("#ID,TagName,.className,...N")
描述:此方法其實(shí)就是把前四種選擇器合起來(lái)一起用,以","進(jìn)行分隔,返回一個(gè)元素集合,上面沒(méi)例子,我就在這稍做個(gè)解釋,比如要獲取ID為oneP、DIV元素、樣式為test的元素，即可使用$("#oneP,div,.test")。
返回值：Array(Element)；
JavaScript技術(shù)：JQuery 學(xué)習(xí)筆記 選擇器之一，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
