JQuery入门、手册及教程.docx

10 浅谈 JQUREY〔摘自 “ ://blog.csdn.net/softwave/article/details/2070815“ ://blog.csdn.net/softwave/article/details/2070815〕 JQUERY 手册〔第七页 ，附教程〕 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 Java 代码 1. 1. var someElement = $(“#myId“); [java] [java]view plaincopyprint? var var someElement = $(“#myId“); 看起来比其他两个框架的要多了一个 看起来比其他两个框架的要多了一个#，好，看看下面的用法： Java Java 代码 1. 1. $(“div p“);(1) 2. $(“div.container“)(2) 3. $(“div #msg“);(3) 4. $(“table a“,context);(4) [java] [java] view plaincopyprint? $(“div $(“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 Java 代码 1. 1. var a = $(“#cid“);(1) 2. var b = $(“phello/p“);(2) 3. var c = document.createElement(“table“); var tb = $(c); [java] [java] view plaincopyprint? 1. var a = $(“#cid“);(1) var b = $(“phello/p“);(2) var c = document.createElement(“table“); var tb = $( c); c); 三，代替 三，代替body 标签的onload 这个惯例，或许是除了$之外，用得最多的地方了。下面一段代码： Java Java 代码 $(document).ready(function{ $(document).ready(function{ alert(“hello“); 3. });(1) 4. 5. body onload=“alert(”hello”);“〔2〕 [java] [java]view plaincopyprint? 1. $(document).ready(function{ alert(“hello“); });(1) body onload=“alert(”hello”);“〔2〕 上面两段代码是等价的。但代码 上面两段代码是等价的。但代码 1 的好处是做到表现和规律分别。并且可以在不同的js 文件中做一样的操作， 即$(document).ready (fn)可以在一个页面中重复消灭，而不