今天開始,要開始學jQuery了,原因很簡單,哥以前都沒接觸過,不過只要有恆心就不怕學不會。
first,
首先當然是要下載jQuery庫啦。
jQuery的項目下載放在了Google Code上, 下載地址:
http://code.google.com/p/jqueryjs/downloads/list
上面的地址是總下載列表, 裏面有很多版本和類型的jQuery庫, 主要分爲如下幾類:
min: 壓縮後的jQuery類庫, 在正式環境上使用.如:jquery-1.3.2.min.js
vsdoc: 在Visual Studio中需要引入此版本的jquery類庫才能啓用智能感知.如:jquery-1.3.2-vsdoc2.js
release包: 裏面有沒有壓縮的jquery代碼, 以及文檔和示例程序. 如:jquery-1.3.2-release.zip
second,
hello world。這個熟悉的例子在哪裏都是經典。
<html>
<head>
<title>hello world</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--引入jQuery-->
<script src="script/jquery-1.3.2-vsdoc2.js" type="text/javascript">
</script>
<script type="text/javascript"> </script>
</head>
<body>
</body>
</html>
<head>
<title>hello world</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--引入jQuery-->
<script src="script/jquery-1.3.2-vsdoc2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() { //等待DOM元素加載完畢,類似於傳統JS中的window.onload,但是兩者是有區別的
alert("hello world!"); //彈出hello world!框
});
alert("hello world!"); //彈出hello world!框
});
</head>
<body>
</body>
</html>
好吧。第一次就寫少一點,不過筆記還是要做的。
NOTE:
1、is(":checked")是jQuery中的方法,判斷 jQuery對象是否被選中,返回boolean值。
例子
html頁面:
<body>
<input type="checkbox" id="show" />
<label for="show">請選中它</label>
</body>
<input type="checkbox" id="show" />
<label for="show">請選中它</label>
</body>
$(document).ready(function() { //等待DOM元素加載完畢
var $show = $("#show"); //jQuery對象
$show.click(function() {
if ($show.is(":checked")) { //jQuery方式判斷
alert("你已經選中ID爲show的控件!");
}
})
})
var $show = $("#show"); //jQuery對象
$show.click(function() {
if ($show.is(":checked")) { //jQuery方式判斷
alert("你已經選中ID爲show的控件!");
}
})
})
2、層次選擇器中的$("prev+next")與$("prev~siblings")
$("prev+next")是選取緊連在prev元素後的next元素,返回集合元素。
例子:
$("#a1+div") //選取ID爲a1的下一個<div>元素
例子:
$("#a1~div") //選取ID爲a1的元素之後所有的div兄弟元素
備註:
一般情況下,用next()方法來代替$("prev+next")
例如: $("#a1").next("div") 代替:$("#a1+div")
例如: $("#a1").nextAll("div") 代替:$("#a1~div")
3、比較siblings()方法與$("prev~siblings")[或者$("prev").nextAll(siblings)]
$("prev~siblings")只能選擇prev元素後的同輩<div>元素,而siblings()方法則不是。
例如:
$("#a1").nextAll("div").css("background","#bbffaa"); //選取a1元素之後的所有同輩的div元素
$("#a1").siblings("div").css("background","bbffaa");//選取a1元素的所有同輩div元素,不在乎是前是後
例如:
$("#a1").nextAll("div").css("background","#bbffaa"); //選取a1元素之後的所有同輩的div元素
$("#a1").siblings("div").css("background","bbffaa");//選取a1元素的所有同輩div元素,不在乎是前是後