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