本章主要先對(duì)Jquery的選擇器進(jìn)行說明下,本人也不敢說講解,哈,因?yàn)槲乙彩钦趯W(xué)習(xí)中,本系列文章所寫目的只在與對(duì)自己學(xué)習(xí)過程中的心得等記錄下來,一方面加強(qiáng)自己的印象,另一方面共享下學(xué)習(xí)的經(jīng)驗(yàn),呵,小弟剛開始寫這種文章，希望大家多多支持^^，有哪些方法不好可以跟貼指導(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的資源里去下
好咯,以下是我做測(cè)試用的HTML文件內(nèi)容,大家可參考下
代碼如下:
<!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)容分別就是四個(gè)連接元素aFirst、aSecond、aThird、aFourthly所完成的功能
先對(duì)代碼中一起不屬性選擇器的內(nèi)容進(jìn)行解釋下吧
新聞熱點(diǎn)
疑難解答
圖片精選
