jQuery简单入门

流行的JavaScript库

为了简化 JavaScript 的开发, 一些 JavsScript库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器

当前流行的 JavaScript 库有400种左右:

jQuery[JS标准], MooTools, Prototype, Dojo, YUI,

EXT_JS, DWR[基于服务端], …

jQuery是什么

jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多JavaScript高手加入其team。

jQuery是继prototype之后又一个优秀的JavaScript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。

它是轻量级的js库(压缩后只有20k左右) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML DOM、事件、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

jQuery:简单例子

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>jQuery入门</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
 7   </head>
 8   <body>
 9     <input id="inputID" type="button" value="这就是jQuery框架,写少代码，做多事情"/>
10     <div id="divID">哈哈</div>
11     <script type="text/javascript">
12     
13         /*//传统方式
14         var inputElement = document.getElementById("inputID");//DOM对象
15         var input = inputElement.value;//取得dom对象的value属性的值
16         alert(input);
17         //div
18         var divElement = document.getElementById("divID");
19         alert(divElement.innerHTML);*/
20         
21         //jQuery
22         var $input = $("#inputID");
23         var input = $input.val();//调用val()
24         //alert(input);
25         var $div = $("#divID");
26         alert($div.html());
27     </script>
28   </body>
29 </html>

什么是jQuery对象？

　jQuery 对象就是通过jQuery包装DOM对象后产生的对象。

　jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

比如：$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：

document.getElementById(" test ").innerHTML;

　　虽然jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.

•var $variable = jQuery 对象

•var variableElement = DOM 对象

•Var variable = “文本值”

DOM对象转成jQuery对象

　　对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

　　转换后就可以使用 jQuery中的方法了

jQuery对象转成DOM对象　　

　　两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

　　(1) jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象

　　(2) jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

DOM对象和jQuery对象相互之间的转换：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>dom对象和jquery对象的相互转换</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="js/jquery-1.6.js"></script>
 7   </head>
 8   <body>
 9     <input id="inputID" type="button" value="这就是jQuery框架,写少代码，做多事情"/>
10     <div id="divID">呵呵</div>
11     <script type="text/javascript">
12     
13         //取得<input>标签中的value属性的内容[dom对象->jquery对象]
14         //dom对象
15         //var inputElement = document.getElementById("inputID");
16         //将dom对象转成jquery对象
17         //var $input = $(inputElement);    
18         //使用jquery对象的方法取值
19         //var input = $input.val();
20         //显示
21         //alert(input);
22         
23         //取得<div>标签中的文本内容[jquery对象->dom对象]
24         //jquery对象[数组]
25         var $div = $("#divID");
26         //将jquery对象转成dom对象
27         var divElement = $div.get(0);
28         //var divElement = $div[0];
29         //使用dom对象的属性取值
30         var div = divElement.innerHTML;
31         //显示
32         alert(div);
33     </script>
34   </body>
35 </html>

DOM操作与jQuery操作对错误的处理方式比较

1)使用三种方式定位html中的元素
　　a)通过ID
　　　　$("#ID")
　　b)通过标签名
　　　　$("标签名")
　　c)通过样式名
　　　　$(".样式名")
2)dom中，需要判段查找到的元素是否为null，
　　而jquery中，无需判断，因为jquery本身内置判段器，在查找不到的情况下，返回"undefined"

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 5     <script type="text/javascript" src="../js/jquery-1.6.js">
 6     </script>
 7     <style type="text/css">
 8         .oneClass{
 9             font-size:44px;
10             color:red
11         }
12     </style>
13    <body>
14       <input type="text" id="usernameID" value="这就是jQuery"/>
15       <div id="divID" class="oneClass">这是div中的内容</div>
16       <script type="text/javascript">
17       
18           //通过"#id"定位<input>
19           //alert($("#usernameID").val());    
20           
21           //通过"标签名"定位<input><div>
22           //alert($("div").html());
23           //alert($("input").val());
24           
25           //通过"样式名"定位<div>
26           //alert($(".oneClass").html());
27           
28           //dom错误处理和jquery错误处理
29           var $input = $("#usernameIDD");
30           alert($input.val());
31           
32           /*
33           var inputElement = document.getElementById("usernameID");
34           if(inputElement!=null){
35               alert(inputElement.value);
36           }else{
37               alert("查无此元素");
38           }
39           */
40       </script>
41   </body>
42 </html>

总结：

 1 1 jQuery快速入门
 2    1)服务端和客户端有三种方式传递数据
 3      a)HTML(无需与其它应用程序共享数据的情况下）
 4      b)XML(需与其它应用程序共享数据，尤其是在不同的系统中，平台中，同时内容较多的情况下)
 5      c)JSON(需与其它应用程序共享数据，同时内容不多的情况下）    
 6    2)为了将JS代码简化，同时要达到业务的需要，  
 7    3）jQuery的目标是做更多事情，写更少代码
 8    4）jQuery是一个开源，免费的JavaScript库，有不同的版本，真正上线运行时，可以使用min版本。
 9    5)jQuery开发步骤：
10      a)通过<script/>导入jquery的js类库       
11      b)使用$("#id")，通过id来定位html元素
12      c)通过val()和html()分别取得html元素的值
13        注意：val()和html()是能由jQuery对象调用，不能由dom对象调用
14          val()---value属性
15          html()---innerHMTL属性
16    6)将dom对象，通过$()转换，就变成了jquery对象，dom对象能做的情况，jquery对象也能，只是方式不一样，
17      反之，jquery对象能做的事情，dom不一定行 
18 
19 *2 DOM对象和jQuery对象相互转换
20    1)jquery对象是一个数组对象，下标从0开始
21    2）dom->jquery，通过$(dom对象)->jquery对象
22    3)jquery->dom，通过
23     a)$div[index下标从0开始]
24     b)$div.get(index下标从0开始)
25    
26 *3 DOM操作与jQuery操作对错误的处理方式比较
27    1)使用三种方式定位html中的元素
28      a)通过ID
29     $("#ID")
30      b)通过标签名
31         $("标签名")
32      c)通过样式名
33     $(".样式名")
34    2)dom中，需要判段查找到的元素是否为null，
35      而jquery中，无需判段，因为jquery本身内置判段器，在查找不到的情况下，返回"undefined"