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"> $(document).ready(function() { //等待DOM元素加载完毕,类似于传统JS中的window.onload,但是两者是有区别的
alert("hello world!"); //弹出hello world!框
}); </script>
</head>
<body>
</body>
</html>
好吧。第一次就写少一点,不过笔记还是要做的。
NOTE:
1、is(":checked")是jQuery中的方法,判断 jQuery对象是否被选中,返回boolean值。
例子
html页面:
<body>
<input type="checkbox" id="show" />
<label for="show">请选中它</label>
</body>jQuery:
$(document).ready(function() { //等待DOM元素加载完毕
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>元素$("prev~siblings")是选取prev元素之后的所有siblings元素
例子: $("#a1~div") //选取ID为a1的元素之后所有的div兄弟元素
备注:
一般情况下,用next()方法来代替$("prev+next")
例如: $("#a1").next("div") 代替:$("#a1+div") 用nextAll()方法来代替$("#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元素,不在乎是前是后
本文出自 “窝KIM” 博客,请务必保留此出处http://kimsum.blog.51cto.com/2095414/528788