Jquery是继prototype之后又一个优秀的Javascript框架。对prototype我使用不多，简单了解过。但使用上jquery之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery就像ruby.实际上我比较喜欢java（少接触Ruby罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自已唯一的框架类包。使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。
一，找到你了！
还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。没错，jquery也跟风了。为达到document.getElementById()的目的，jquery是这样写的：
Java代码
1.var someElement = $("#myId");
var someElement = $("#myId");
看起来比其他两个框架的要多了一个#，好，看看下面的用法：
Java代码
1.$("div p");(1)
2.$("div.container")(2)
3.$("div #msg");(3)
4.$("table a",context);(4)
$("div p");(1)
$("div.container")(2)
$("div #msg");(3)
$("table a",context);(4)
在prototype里看过这样的写法吗？第一行代码得到所有<div>标签下的<p>元素。第二行代码得到class为container的<div>元素,第三行代码得到<div>标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。
如果你熟悉CSS，Xpath，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。
二，Jquery对象？
jquery提供了很多便利的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象是Jquer对象。使一个Dom对象成为一个Jquery对象很简单，通过下面一些方式（只是一部分）：
Java代码
1.var a = $("#cid");(1)
2.var b = $("<p>hello</p>");(2)
3.var c = document.createElement("table"); var tb = $(c);
var a = $("#cid");(1)
var b = $("<p>hello</p>");(2)
var c = document.createElement("table"); var tb = $(c);
三，代替body标签的onload
这个惯例，也许是除了$()之外，用得最多的地方了。下面一段代码：
Java代码
1.$(document).ready(function(){
2. alert("hello");
3.});(1)
4.
5.<body onload="alert('hello');">（2）
$(document).ready(function(){
alert("hello");
});(1)
<body onload="alert('hello');">（2）
上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作，即$(document).ready(fn)可以在一个页面中重复出现，而不会冲突。基本上Jqeury的很多plugin都是利用这个特性，正因为这个特性，多个plugin共同使用起来，在初始化时不会发生冲突。
不管怎么说，这个惯例可以分离javascript与HTML。推荐使用。
四，事件机制
我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascript代码与html代码分离，保持HTML的清洁，还可以很轻松地绑定事件，甚至你可以不知道“事件”这个名词。
Java代码
1.$(document).ready(function(){
2. $("#clear").click(function(){
3. alert("i am about to clear the table");
4. });
5. $("form[0]").submit(validate);
6.});
7.function validate(){
8. //do some form validation
9.}
$(document).ready(function(){
$("#clear").click(function(){
alert("i am about to clear the table");
});
$("form[0]").submit(validate);
});
function validate(){
//do some form validation
}
五，同一函数实现set&get
Java代码
1.$("#msg").html();
2.$("#msg").html("hello");
$("#msg").html();
$("#msg").html("hello");
上面两行代码，调用了同样的函数。但结果却差别很大。
第一行是返回指定元素的HTML值，第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。
六，ajax
这是一个ajax横行的时代。多少人，了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样简单异常
Java代码
1.$.get("search.do",{id:1},rend);
2.function rend(xml){
3. alert(xml);
4.} (1)
5.$.post("search.do",{id:1},rend);
6.function rend(xml){
7. alert(xml);
8.} (2)
9.
10.$("#msg").ajaxStart(function(){
11. this.html("正在加载。。。。");
12.});(3)
13.$("#msg").ajaxSuccess(function(){
14. this.html("加载完成！");
15.});(4)
$.get("search.do",{id:1},rend);
function rend(xml){
alert(xml);
} (1)
$.post("search.do",{id:1},rend);
function rend(xml){
alert(xml);
} (2)
$("#msg").ajaxStart(function(){
this.html("正在加载。。。。");
});(3)
$("#msg").ajaxSuccess(function(){
this.html("加载完成！");
});(4)
这些都是较常用的方法，get和post用法一样。第一个参数是异步请求的url，第二个为参数，第三个回调方法。
3，4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然，jquery的AJAX相关的函数不仅是这些，有兴趣可以去研究再多。
七，渐入淡出
Java代码
1.$("#msg").fadeIn("fast");
2.$("#msg").fadeOut("slow");
$("#msg").fadeIn("fast");
$("#msg").fadeOut("slow");
没错，上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条，用jquery就那么简单。两个函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为MS。
八，plugin
这也是一个插件的时代。
jquery插件给我的感觉清一色的清洁，简单。如Jtip，要使用它的功能，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好，很精彩的插件。
写得很烂。可能大家看不出jquery的好处。嗯，光听是没用的，试用一下吧。你会发觉很有趣。
暂时告一段落吧。待有新的发现再来分享。
加一些Jquery的资源：
http://www.visualjquery.com/index.xml 很好的API查询站点
http://jquery.com/demo/thickbox/ 知道lightBox吧，看看Jquery是怎样实现相同的东西
http://www.codylindley.com/blogstuff/js/jtip/ Jtip，实用的提示工具
http://jquery.com/plugins/ 很多牛的插件。
http://15daysofjquery.com/ jquery 的15天教程
分享到：
相关推荐
**jQuery入门经典教材** jQuery是一款高效、简洁的JavaScript库，旨在简化HTML文档遍历、事件处理、动画设计和Ajax交互。本教材针对初学者，详细介绍了jQuery的核心概念和实用技巧，帮助开发者快速掌握这一强大的...
《iQuery JavaScript与CSS开发入门经典》包含极富帮助的指南和紧贴实际的练习，使读者能在实际中轻松驾驭iQuery，并收到事半功倍的神奇效果。 内容简介 本书浓墨重彩地描述iQuery的API及iQuery框架的所有基础知识，...
【jQuery 快速入门实例】 jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理和动画效果。本教程将引导你快速入门jQuery，通过基础实例帮助你掌握其核心概念。 ### 1. jQuery 构造函数与 $...
**jQuery入门例子代码详解** jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在本篇中，我们将深入探讨两个关键文件——"JQuery.html"和"jquery-1.3.2....
**jQuery入门例子详解** jQuery，一个轻量级的JavaScript库，因其简洁的API和强大的功能，使得网页开发变得更加高效和简单。本篇文章将基于提供的"jquery入门的例子"，深入讲解jQuery的基本用法、菜单实现以及AJAX...
这个“jQuery 入门提高速成实例打包”集合包含了一系列实用的实例，旨在帮助初学者快速掌握jQuery的基本用法和高级技巧。下面我们将深入探讨jQuery中的关键知识点。 1. **选择器**: jQuery 的核心在于强大的选择器...
**二、jQuery入门实例** 为了更好地理解jQuery，我们将通过一些简单实例进行实践： 1. **页面加载后的操作**：`$(document).ready(function() {...})`确保代码在DOM加载完成后执行。例如： ```javascript $...
《jQuery入门Demo详解》 jQuery，作为一款广泛应用于前端开发的JavaScript库，以其简洁的API、强大的功能和广泛的浏览器兼容性赢得了开发者们的喜爱。对于初学者来说，掌握jQuery的基础知识和常见操作是步入Web开发...
jQuery 是一个广泛使用的JavaScript库，它极大地简化了网页的DOM操作、事件处理和Ajax交互。jQuery 的设计目标是“Write Less, Do More”，通过提供高效、简洁的API，让开发者可以快速实现各种复杂的网页交互效果。 ...
**jQuery的Ajax实例：深入理解与实践** 在Web开发领域，jQuery是一个不可或缺的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本教程将聚焦于jQuery中的Ajax功能，它是实现页面异步更新...
jQuery 经典入门 教程 附带程序实例 初学入门教程
《jQuery入门实例代码合集详解》 jQuery，作为一款强大的JavaScript库，因其简洁的API和丰富的功能，一直以来深受开发者喜爱。这份"106个jQuery入门实例代码合集"是针对初学者精心编排的实践教程，旨在帮助新接触...
这个压缩包中的"Jquery入门"包含了初学者需要掌握的基本概念和实践代码示例，帮助快速上手jQuery。 **一、jQuery简介** jQuery由John Resig于2006年创建，其核心理念是“Write Less, Do More”。它通过提供简单...
以下是一些jQuery的经典应用实例，这些例子将帮助你理解jQuery的基本教程。** 1. **JQuery实战第一讲：概述、环境准备及入门实例** - **概述**：jQuery的基本理念是“Write Less, Do More”，它提供了一套简化的...
**jQuery 入门实例** jQuery 是一个高效、简洁且功能丰富的 JavaScript 库，它极大地简化了 JavaScript 对HTML 文档的遍历、事件处理、动画以及Ajax交互。在本实例中，我们将探讨如何开始使用 jQuery，了解其核心...
**jQuery 入门实例详解** jQuery 是一个广泛应用于前端开发的 JavaScript 库，它极大地简化了 JavaScript 的操作，包括DOM处理、事件处理、动画效果以及AJAX交互等。本篇文章将深入探讨jQuery的基础知识和入门实例...
**jQuery入门基础** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个教程将引导你从零开始掌握jQuery的基本概念和使用方法。 1. **jQuery的选择器** ...
**jQuery中文入门教程实例** jQuery 是一款非常流行的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页交互和DOM操作变得更加便捷。这个“jQuery中文入门教程实例”是为初学者设计的，旨在帮助你快速...