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"
by hacket
