《JQuery入门、手册及教程》由会员分享，可在线阅读，更多相关《JQuery入门、手册及教程（34页珍藏版）》请在金锄头文库上搜索。
1、1浅谈 JQUREY（摘自 http:/ 手册（第七页 ，附教程）Jquery 是继 prototype 之后又一个优秀的 Javascript 框架。对 prototype 我使用不多，简单了解过。但使用上jquery 之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较 prototype 和 jquery：prototype 就像Java，而 jquery 就像 ruby.实际上我比较喜欢 java（少接触 Ruby 罢了）但是 jquery 的简单的实用的确有相当大的吸引力啊！在项目里我把 jquery 作为自已唯一的框架类包。使用其间也有一点点心得，其实这些心得，在jquery
2、的文档上面也可能有讲，不过还是记下来，以备忘罢。 一，找到你了！ 还记得$()这个东西吧？prototype 还是 DWR 都使用了这个函数代替 document.getElementById()。没错，jquery也跟风了。为达到 document.getElementById()的目的，jquery 是这样写的：Java 代码 1.var someElement = $(“#myId“); java view plaincopyprint?1.var someElement = $(“#myId“); 看起来比其他两个框架的要多了一个#，好，看看下面的用法： Java 代码 1.$(“di
3、v p“);(1) 2.$(“div.container“)(2) 3.$(“div #msg“);(3) 4.$(“table a“,context);(4) 2java view plaincopyprint?1.$(“div p“);(1) $(“div.container“)(2) $(“div #msg“);(3) $(“table a“,context);(4) 在 prototype 里看过这样的写法吗？第一行代码得到所有标签下的元素。第二行代码得到 class 为 container 的元素,第三行代码得到标签下面 id 为 msg 的元素。第四行代码得到 context 为
4、上下文的 table 里面所有的连接元素。 如果你熟悉 CSS，Xpath，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。jquery 就是通过这样的方 式来找到 Dom 对象里面的元素。跟 CSS 的选择器相类似。 二，Jquery 对象？ jquery 提供了很多便利的函数，如 each(fn)，但是使用这些函数的前提是：你使用的对象是 Jquer 对象。使一 个 Dom 对象成为一个 Jquery 对象很简单，通过下面一些方式（只是一部分）： Java 代码 1.var a = $(“#cid“);(1) 2.var b = $(“hello“);(2) 3.var c = docu
5、ment.createElement(“table“); var tb = $(c); java view plaincopyprint?1.var a = $(“#cid“);(1) var b = $(“hello“);(2) var c = document.createElement(“table“); var tb = $(c); 三，代替 body 标签的 onload 这个惯例，也许是除了$()之外，用得最多的地方了。下面一段代码： Java 代码 1.$(document).ready(function() 32. alert(“hello“); 3.);(1) 4. 5.（2
6、） java view plaincopyprint?1.$(document).ready(function() alert(“hello“); );(1) （2） 上面两段代码是等价的。但代码 1 的好处是做到表现和逻辑分离。并且可以在不同的 js 文件中做相同的操作， 即$(document).ready (fn)可以在一个页面中重复出现，而不会冲突。基本上 Jqeury 的很多 plugin 都是利用这 个特性，正因为这个特性，多个 plugin 共同使用起 来，在初始化时不会发生冲突。 不管怎么说，这个惯例可以分离 javascript 与 HTML。推荐使用。 四，事件机制 我大量
7、使用的事件可能就是 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. $(“form0“).submit(validate); 6.
8、); 7.function validate() 8. /do some form validation 9. java view plaincopyprint?41.$(document).ready(function() $(“#clear“).click(function() alert(“i am about to clear the table“); ); $(“form0“).submit(validate); ); function validate() /do some form validation 五，同一函数实现 set 2.$(“#msg“).html(“hello“)
9、; java view plaincopyprint?1.$(“#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)
10、3. alert(xml); 4. (1) 5.$.post(“search.do“,id:1,rend); 6.function rend(xml) 57. alert(xml); 8. (2) 9. 10.$(“#msg“).ajaxStart(function() 11. this.html(“正在加载。“); 12.);(3) 13.$(“#msg“).ajaxSuccess(function() 14. this.html(“加载完成！“); 15.);(4) java view plaincopyprint?1.$.get(“search.do“,id:1,rend); funct
11、ion 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
12、执行的事件。当然，jquery 的 AJAX 相关的函数不仅是这些， 有兴趣可以去研究再多。 七，渐入淡出 Java 代码 1.$(“#msg“).fadeIn(“fast“); 2.$(“#msg“).fadeOut(“slow“); java view plaincopyprint?1.$(“#msg“).fadeIn(“fast“); $(“#msg“).fadeOut(“slow“); 6没错，上面两行代码已经分别实现了一个 id 为 Msg 的 jquery 对象的渐入和淡出。做一个像 Gmail 一样的动态 加载通知条，用 jquery 就那么简单。两个函数接受的参数除了快慢等，还
13、可以接收整型，作为渐入或淡出的完 成时间，单位为 MS。 八，plugin 这也是一个插件的时代。 jquery 插件给我的感觉清一色的清洁，简单。如 Jtip，要使用它的功能，只需要在你的元素的 class 上加上 Jtip,并 引入 jtip.js 及其样式即可以了。其他事情插件全包。我喜欢 jquery 的一个重要原因是发现她已经有了很多很好， 很精彩的插件。 写得很烂。可能大家看不出 jquery 的好处。嗯，光听是没用的，试用一下吧。你会发觉很有趣。 暂时告一段落吧。待有新的发现再来分享。 加一些 Jquery 的资源： http:/ 很好的 API 查询站点 http:/ 知道 l
14、ightBox 吧，看看 Jquery 是怎样实现相同的东西 http:/ Jtip，实用的提示工具 http:/ 很多牛的插件。 http:/ jquery 的 15 天教程 jQuery 是一个强大的 ajax 类库，对 ajax 和 javascript 进行了很好的封装,值得学习,附 jQuery 中文手册下载和jQuery 中文 api 地址jQuery 官方网站：http:/ 英文文档http:/ 英文帮助http:/ jQuery 中文手册一部，jQuery 中文 api 地址，中文菜鸟学习地址。http:/ 中文手册下载http:/ JSEclipse 构建 JavaScript 应用程序：http:/ );If you click on me, I will disappear.jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。 基本上，您将学习到如何选取 HTML 元素，以及如何对它们执行类似隐藏、
