JQuery入门、手册及教程.doc

浅谈JQUREY（摘自/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代码 1. var?someElement?=?$("#myId";?? [java] view plaincopyprint? 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?? [java] view plaincopyprint? 1. $("div?p";(1?$("div.container"(2?$("div?#msg";(3?$("table?a",context;(4??? $("div p";(1 $("div.container"(2 $("div #msg";(3 $("table a",context;(4 在prototype里看过这样的写法吗？第一行代码得到所有 标签下的 元素。第二行代码得到class 为container的 元素 , 第三行代码得到 标签下面 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?=?$(" hello " ;( 2 ?? 3. var?c?=?document.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;??? var a = $("#cid";(1 var b = $(" hello ";(2 var c = document.createElement("table"; var tb = $(c; 三，代替body标签的onload 这个惯例，也许是除了$(之外，用得最多的地方了。下面一段代码： Java代码 1. $(document.ready(function({?? 2. ??alert("hello";?? 3. };(1?? 4. ?? 5. "alert('hello';" >（ 2 ）?? [java] view plaincopyprint? 1. $(document.ready(function({???alert("hello";?};(1?? "alert('hello';" > （ 2 ） ???? $(document.ready(function({ alert("hello"; };(1 2 上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作，