学习JQuery之路 01
根据图书《锋利的JQuery》做出的笔记希望大家给与意见
$是JQuery的一个简写方式,也是JQuery的顶级对象,在写JQuery程序的时候需要导入一个js的文件库,我们在使用JQuery的时候,其实是在调用js的函数.
JQuery 并不是代替了JavaScript,JQuery只是把JavaScript封装成函数库而已,内部还是用JavaScript实现的
第一个JQuery程序:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../js/jquery-1.6.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
alert("hello");
})
</script>
</head>
<body>
</body>
</html>
这段代码类似与JavaScript的winodw.onload方法,不过还是有区别的:
window.onload需要等所有内容加载完(包括图标才能执行),并且多句window.onload只执行一句;而$(document).ready()是等所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西没有加载完,并且$(document).ready有几句就执行几句。例如:
<script type="text/javascript">
$(document).ready(function () {
alert("hello");
}) <!--这两句都输出-->
$(document).ready(function () {
alert("hello2");
})
window.onload = function () {
alert("hello3");
} <!-- 这两句window.onload 只执行最后一句,结果是:hello4-->
window.onload = function () {
alert("hello4");
}
</script>
JQuery对象和DOM对象
DOM(文档对象模型):每一个DOM都可以代表一个树,
JQuery对象就是JQuery包装DOM对象后产生的对象,JQuery对象是JQuery独有的,如果一个对象是JQuery对象那么就可调用JQuery方法
JQuery对象和DOM对象是不能互相调用的,互相转换
JQuery对象转为DOM对象
(1):JQuery对象是一组数组对象,可以通过[index]来获取相依的DOM对象
(2):另一种方法是JQuery本身提供的,通过get(idenx)来获取
DOM对象转成JQuery对象
对于一个DOM对象,只需要用$()把DOM的对象包装起来就可以了,方式为$(DOM对象)
平时用到的JQuery对象都是通过$()函数制造出来的,$()函数是JQuery对象的制造工厂.
实例操作:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../js/jquery-1.6.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var $cr = $("#cr");
$cr.click(function () {
if ($cr.is(":checked")) {
alert("感谢你的支持,你可以继续操作!");
}
})
})
</script>
</head>
<body>
<input type="checkbox" id="cr" /><label for="cr">我已经阅读了协议</label>
</body>
</html>
if ($cr.is(":checked")) 这是JQuery的判断方式,返回值是bool类型