学习JQuery之路 01

来源:岁月联盟 编辑:exp 时间:2012-03-26

根据图书《锋利的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类型
 

摘自  繁华、莫名其妙