jQuery简单入门
2013-05-09 18:16
483 查看
流行的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:简单例子
什么是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对象相互之间的转换：
DOM操作与jQuery操作对错误的处理方式比较
1)使用三种方式定位html中的元素
a)通过ID
$("#ID")
b)通过标签名
$("标签名")
c)通过样式名
$(".样式名")
2)dom中，需要判段查找到的元素是否为null，
而jquery中，无需判断，因为jquery本身内置判段器，在查找不到的情况下，返回"undefined"
总结：
为了简化 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:简单例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery入门</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
</head>
<body>
<input id="inputID" type="button" value="这就是jQuery框架,写少代码，做多事情"/>
<div id="divID">哈哈</div>
<script type="text/javascript">
/*//传统方式
var inputElement = document.getElementById("inputID");//DOM对象
var input = inputElement.value;//取得dom对象的value属性的值
alert(input);
//div
var divElement = document.getElementById("divID");
alert(divElement.innerHTML);*/
//jQuery
var $input = $("#inputID");
var input = $input.val();//调用val()
//alert(input);
var $div = $("#divID");
alert($div.html());
</script>
</body>
</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对象相互之间的转换：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dom对象和jquery对象的相互转换</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.6.js"></script>
</head>
<body>
<input id="inputID" type="button" value="这就是jQuery框架,写少代码，做多事情"/>
<div id="divID">呵呵</div>
<script type="text/javascript">
//取得<input>标签中的value属性的内容[dom对象->jquery对象]
//dom对象
//var inputElement = document.getElementById("inputID");
//将dom对象转成jquery对象
//var $input = $(inputElement);
//使用jquery对象的方法取值
//var input = $input.val();
//显示
//alert(input);
//取得<div>标签中的文本内容[jquery对象->dom对象]
//jquery对象[数组]
var $div = $("#divID");
//将jquery对象转成dom对象
var divElement = $div.get(0);
//var divElement = $div[0];
//使用dom对象的属性取值
var div = divElement.innerHTML;
//显示
alert(div);
</script>
</body>
</html>DOM操作与jQuery操作对错误的处理方式比较
1)使用三种方式定位html中的元素
a)通过ID
$("#ID")
b)通过标签名
$("标签名")
c)通过样式名
$(".样式名")
2)dom中，需要判段查找到的元素是否为null，
而jquery中，无需判断，因为jquery本身内置判段器，在查找不到的情况下，返回"undefined"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.6.js">
</script>
<style type="text/css">
.oneClass{
font-size:44px;
color:red
}
</style>
<body>
<input type="text" id="usernameID" value="这就是jQuery"/>
<div id="divID" class="oneClass">这是div中的内容</div>
<script type="text/javascript">
//通过"#id"定位<input>
//alert($("#usernameID").val());
//通过"标签名"定位<input><div>
//alert($("div").html());
//alert($("input").val());
//通过"样式名"定位<div>
//alert($(".oneClass").html());
//dom错误处理和jquery错误处理
var $input = $("#usernameIDD");
alert($input.val());
/*
var inputElement = document.getElementById("usernameID");
if(inputElement!=null){
alert(inputElement.value);
}else{
alert("查无此元素");
}
*/
</script>
</body>
</html>总结：
1 jQuery快速入门
1)服务端和客户端有三种方式传递数据
a)HTML(无需与其它应用程序共享数据的情况下）
b)XML(需与其它应用程序共享数据，尤其是在不同的系统中，平台中，同时内容较多的情况下)
c)JSON(需与其它应用程序共享数据，同时内容不多的情况下）
2)为了将JS代码简化，同时要达到业务的需要，
3）jQuery的目标是做更多事情，写更少代码
4）jQuery是一个开源，免费的JavaScript库，有不同的版本，真正上线运行时，可以使用min版本。
5)jQuery开发步骤：
a)通过<script/>导入jquery的js类库
b)使用$("#id")，通过id来定位html元素
c)通过val()和html()分别取得html元素的值
注意：val()和html()是能由jQuery对象调用，不能由dom对象调用
val()---value属性
html()---innerHMTL属性
6)将dom对象，通过$()转换，就变成了jquery对象，dom对象能做的情况，jquery对象也能，只是方式不一样，
反之，jquery对象能做的事情，dom不一定行
*2 DOM对象和jQuery对象相互转换
1)jquery对象是一个数组对象，下标从0开始
2）dom->jquery，通过$(dom对象)->jquery对象
3)jquery->dom，通过
a)$div[index下标从0开始]
b)$div.get(index下标从0开始)
*3 DOM操作与jQuery操作对错误的处理方式比较
1)使用三种方式定位html中的元素
a)通过ID
$("#ID")
b)通过标签名
$("标签名")
c)通过样式名
$(".样式名")
2)dom中，需要判段查找到的元素是否为null，
而jquery中，无需判段，因为jquery本身内置判段器，在查找不到的情况下，返回"undefined"
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html+js+jquery简单入门
- jQuery简单入门示例之用户校验demo示例
- JQuery入门——编写一个简单的JQuery应用
- jQuery的Form插件的简单入门
- jQuery的简单入门练习
- jQuery简单入门
- jQuery简单入门示例之用户校验demo示例
- jquery 验证插件的简单入门使用
- jQuery的Form插件jquery.form.js的简单入门
- 简单的jQuery入门指引
- JQuery入门级简单教程
- jQuery简单入门
- 基于JQUERY的AJAX 简单示例 入门知识
- jquery入门1:简单收缩菜单
- JQuery入门―编写一个简单的JQuery应用案例
- jQuery入门之简单的导航栏
- JQuery的简单入门(一)
- JQuery的简单入门(二)
- Struts2整合jQuery和JSON进行简单的异步数据交换入门教程
- JQuery 简单入门