http://www.beautycss.org/edu/js/2009-02-11/24.html
这篇指南包括了 hello jquery、基本的selector、event、ajax、FX、以及一些插件。
tips:当你看到这篇文章时最好在第一时间看完,不要放到收藏夹里等待将来的某天再翻出来看,往往这一天不会到来。
其实在我之前已经有人翻译了这篇文章,但是我觉得翻译得有点粗糙,不易阅读,因此又重新翻译了一下,对我自己也又温习了一下jquery。
OK!出发了
Setup
Hello jQuery
Find me: Using selectors and events //定位
Rate me: Using Ajax //投票
Animate me: Using Effects //动画
Sort me: Using the tablesorter plugin //排序
Plug me: Writing your own plugins //插件
Next steps
Setup(安装)
下载地址:http://docs.jquery.com/Downloading_jQuery
得到jquery.js后,将其包含到目标文件就可以了,就像这样
程序代码
$(document).ready(function() { // do stuff when DOM is ready }); |
当dom都加载完后执行里面的语句,类似于window.onload。
那么载入完成后,我们来做些事情。
程序代码
$(document).ready(function() { $("a").click(function() { alert("Hello jQuery!"); }); }); |
当点击任何一个链接时,都会弹出一个框,里面是什么内容,就不用我说了吧。
我们来品品这几句话,首先是”$()”,这个可以当作一个选择器,里面可以是tagName,比如例子中的”a”,还可以是什么,我们下面再说。
然后是一个click方法,相当于在每一个链接里都加了一句”οnclick=…”,从这里可以看出jQuery的一个很大的优点就是代码和结构分离。
Find me(定位)
我想很多人喜欢jQuery,很大一部分是她方便的定位,也正是这一特性,使得代码和结构分离。
jQuery有两种方法来定位。一种是CSS和XPath,通过传递一个字符串给选择器$,比如’$(”div > ul a”)’;另一种使用了一些methods,比如find。
先来看看第一个:
程序代码
$(document).ready(function() { $("#orderedlist").addClass("red"); }); |
注意到了$函数的参数里有一个”#”,这个表示以id来定位,所以这句话将定位到id为orderedlist的dom,然后有一个addClass方法,顾名思义,就是添加一个class,class的名字是red。
下面我们再来添加一些方法给这个元素的下级。
程序代码
$(document).ready(function() { $("#orderedlist > li").addClass("blue"); }); |
这将选择所有id为orderedlist的li元素,并给它们添加一个blue class。
接着,我们来点复杂的,当鼠标移到上面时addClass,移走时removeClass,但只作用于最后一个li元素。
程序代码
$(document).ready(function() { $("#orderedlist li:last").hover(function() { $(this).addClass("green"); },function(){ $(this).removeClass("green"); }); }); |
再来品一品这段代码,我觉得这段代码里最关键的就是这个”,”,这个逗号免去了再写一遍$(”#orderedlist li:last”)的麻烦。this指代的是当前所选的dom。
js中的onxxxx,在jquery中都有相对应的,比如onChange,onSubmit等等。
有了上面的这些已经能做许多事了,再来看看上面说的第二种方法
程序代码
$(document).ready(function() { $("#orderedlist").find("li").each(function(i) { $(this).append( " BAM! " + i ); }); }); |
出现了find方法,这句话的意思还是比较好理解的,定位到id为orderedlist的dom,找到所有的li元素,每一个都添加一个默认函数。
append方法是添加一些文字到所选的dom,所以这些文字会出现在dom的末尾。
如果要在提交form成功后,清空form
程序代码
$(document).ready(function() { // use this to reset a single form $("#reset").click(function() { $("#form").reset(); }); }); |
当点击reset后,通过调用reset方法,id为form的表单将会被重置。
如果要使所有的表单都清空,则只需去掉form前面的”#”即可。
如果要从dom中选取一组相似的元素,可以使用filter() 和 not(),filter将只选取符合表达式的元素。而not则正相反。
程序代码
$(document).ready(function() { $("li").not("[ul]").css("border", "1px solid black"); }); |
这段代码的意思是选取所有的li元素(但该li不能包含ul子元素),给它们加上边框。
css方法,前面是属性,后面是值(这只是用法之一)。
更进一步,如果我们要选取所有包含name属性的链接,则可以使用下面这段代码。
程序代码
$(document).ready(function() { $("a[@name]").background("#eee"); }); |
很简单吧,通过@指定就行了,如果要指定name为jquery的链接,也很方便,a[@name=jquery]就OK啦。
如果只匹配部分,只需将=改为*=,比如要找到所有包含jquery的name,(匹配jquery plugin、jquery home 等等)a[@name*=jquery]
可以选择parent,比如这段代码
程序代码
$(document).ready(function(){ $("a").hover(function(){ $(this).parents("p").addClass("highlight"); },function(){ $(this).parents("p").removeClass("highlight"); }); }); |
顺便说一句,$(document).ready(callback) 可以缩写成 $(callback)
使用 ajax
这里不使用原来的例子,因为我觉得不是那么容易明白,所以用了jquery官方的例子,edit in place
url:http://docs.jquery.com/Tutorials:Edit_in_Place_with_Ajax
示范1
浏览者能够在他所看的页面的相应位置点击编辑,而无需打开新页面。
demo1:http://15daysofjquery.com/examples/jqueryEditInPlace/divEdit.php
程序代码
$(document).ready(function(){ setClickable(); }); |
当页面载入完成后,激活setClickable函数。
程序代码
function setClickable() { $('#editInPlace').click(function(){ ... }); } |
这个应该就不用说了吧,设置id为editInPlace的dom的click事件。
程序代码
var textarea = '<div><textarea rows="10" cols="60">' + $(this).html() + '</textarea>'; var button = '<div><input type="button" value="SAVE" class="saveButton" /> or <input type="button" value="CANCEL" class="cancelButton"/></div></div>'; var revert = $(this).html(); |
这个对应上面的省略号,也就是函数体。分别定义了3个变量,textarea是用来生成编辑框的,$(this).html指代的是原来该dom的内容。button用来生成保存和取消按钮。revert用来相应取消事件。
然后是
程序代码
$(this).after(textarea+button).remove(); |
after的作用就是在目标dom的后面加上相应的内容,remove就是移去目标内容,所以这里有两步,先是加上编辑框和按钮,然后移去之前的内容。
程序代码
$('.saveButton').click(function(){saveChanges(this, false);}); $('.cancelButton').click(function(){saveChanges(this, revert);}); |
为两个按钮定义click事件。
程序代码
.mouseover(function() { $(this).addClass("editable"); }) .mouseout(function() { $(this).removeClass("editable"); }); |
定义鼠标移入和移走事件。
接着定义saveChanges函数
程序代码
function saveChanges(obj, cancel) { ... } |
如果cancle是false的话,那就意味着要保存编辑后的内容
程序代码
if (!cancel) { var t = $(obj).parent().siblings(0).val(); // ... } |
parent()对应的是input外面的div,siblings对应的是相邻的dom,0指的是前面的dom,也就是
程序代码
<textarea rows="10" cols="60">' + $(this).html() + '</textarea> |
接下来该来点关键的了
程序代码
$.post("test2.php",{content: t},function(txt){ alert(txt); }); |
jquery的ajax方法,.post表示以post方式提交,第一个参数是目标页面,在这里就是”test2.php”,第二个参数是提交的内容,最后是回调函数。txt是服务端传递过来的参数。
程序代码
else { var t = cancel; } |
如果cancle不为false的话,就执行revert()方法。
程序代码
$(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove() ; |
移走textarea和button,恢复原状。
最后再调用setClickable方法就可以了,所有的js
程序代码
$(document).ready(function(){ setClickable(); }); function setClickable() { $('#editInPlace').click(function() { var textarea = '<div><textarea rows="10" cols="60">'+$(this).html()+'</textarea>'; var button = '<div><input type="button" value="SAVE" class="saveButton" /> or <input type="button" value="CANCEL" class="cancelButton" /></div></div>'; var revert = $(this).html(); $(this).after(textarea+button).remove(); $('.saveButton').click(function(){saveChanges(this, false);}); $('.cancelButton').click(function(){saveChanges(this, revert);}); }) .mouseover(function() { $(this).addClass("editable"); }) .mouseout(function() { $(this).removeClass("editable"); }); }; function saveChanges(obj, cancel) { if(!cancel) { var t = $(obj).parent().siblings(0).val(); $.post("test2.php",{ content: t },function(txt){ alert( txt); }); } else { var t = cancel; } if(t=='') t='(click to add text)'; $(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove(); setClickable(); } |
动画效果
使用show()和hide()方法就能完成简单的动画效果
程序代码
$(document).ready(function(){ $("a").toggle(function(){ $(".stuff").hide('slow'); },function(){ $(".stuff").show('fast'); }); }); |
toggle方法对应点击事件,当点击目标dom时,轮流执行函数。所以上面这段代码的意思是当点击链接时,class名为stuff的dom出现和隐藏的效果交替。
可以通过animate()函数来创建复杂的动画效果。
程序代码
$(document).ready(function(){ $("a").toggle(function(){ $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow'); },function(){ $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow'); }); }); |
jquery有一个非常好的插件 interface plugin ,通过它可以创建更多更炫的效果,浏览地址:http://interface.eyecon.ro/
排序:tablesorter 插件
tablesorter 插件 可以在客户端排序表格的数据,插件下载地址:http://motherrussia.polyester.se/jquery-plugins/tablesorter/
在载入这个插件的后,可以这么调用它
程序代码
$(document).ready(function(){ $("#large").tableSorter(); }) |
点击表头,表格的数据就会进行相应的排序
程序代码
$(document).ready(function() { $("#large").tableSorter({ // Class names for striping supplied as a array. stripingRowClass: ['odd','even'], // Stripe rows on tableSorter init stripeRowsOnStartUp: true }); }); |
tablesorter的官方网站可以查看示例和使用方法,浏览地址:http://motherrussia.polyester.se/jquery-plugins/tablesorter/
编写自己的插件
只要照着下面的方法做,那么编写一个插件也是很简单的。
插件名称
给插件命名,这里以”foobar”为例,创建一个jquery.[pluginName].js,比如jquery.foobar.js
添加一个客户端方法
程序代码
jQuery.fn.foobar = function() { // do something }; |
之后就可以这么调用了
程序代码
$(...).foobar(); |
默认设置
程序代码
jQuery.fn.foobar = function(options) { var settings = jQuery.extend({ value: 5, name: "pete", bar: 655 }, options); }; |
可以直接调用,也可以自己添加参数
程序代码
$("...").foobar({ value: 123, bar: 9 }); |
说明文档
如果开放自己的插件,那么应该有一个说明文档再配上实例。有了这些基本的概念之后,我们就来写一个小插件
多选框插件
如果将jquery用于form,那么碰到radio和checkboxes时,可能会这么处理
程序代码
$("input[@type='checkbox']").each(function() { this.checked = true; this.checked = false; // or, to uncheck this.checked = !this.checked; // or, to toggle }); |
如果嫌麻烦的话,可以写个插件来处理each
程序代码
jQuery.fn.check = function() { return this.each(function() { this.checked = true; }); }; |
现在就可以这么使用这个插件了
程序代码
$("input[@type='checkbox']").check(); |
当然也可以为uncheck() 和 toggleCheck()写个插件,但在这里我们作为参数选项来达到这个目的。
程序代码
jQuery.fn.check = function(mode) { // if mode is undefined, use 'on' as default var mode = mode || 'on'; return this.each(function() { switch(mode) { case 'on': this.checked = true; break; case 'off': this.checked = false; break; case 'toggle': this.checked = !this.checked; break; } }); }; |
这样默认就是on,调用的话,就可以这样
程序代码
$("input[@type='checkbox']").check(); $("input[@type='checkbox']").check('on'); $("input[@type='checkbox']").check('off'); $("input[@type='checkbox']").check('toggle'); |
可选设置
程序代码
jQuery.fn.rateMe = function(options) { // instead of selecting a static container with // $("#rating"), we now use the jQuery context var container = this; var settings = jQuery.extend({ url: "rate.php" // put more defaults here }, options); // ... rest of the code ... // if possible, return "this" to not break the chain return this; }); |
调用的时候
程序代码
$(...).rateMe({ url: "test.php" }); |
下一步
如果想更加熟悉或者开发js项目,可以考虑一下firefox的firebug插件