标题: jQuery 指南
作者: dnawo
日期: 2008-05-10 09:52 AM
分类: 脚本语言
内容: 这个指南是对jquery库的一个总的介绍，当然你也被要求具备javascript和DOM(文档对象模型)的相关知识。该指南试图解释一些必须的细节。它涵盖了一个简单的"hello world"实例，选择器和事件基础，AJAX，FX以及官方插件。
这个指南并没有"click me"，而是依靠"copy me"(复制/粘贴代码)来测试例子，拷贝一个例子，看它是怎么做的，然后根据你自己的想法修改它。
目录：
1. 安装
2. Hello jQuery (look like hello world)
3. 用选择器(selector)和事件(events)
4. 用ajax
5. 用FX(各种效果)
6. 用tablesorter 插件
7. 书写你自己的插件
8. 下一步(展望)
1.安装
开始之前，我们需要一个jquery库的拷贝(js文件)。最新的版本你能在这里下载。这个指南也提供了一个基本的"开始工具包"，你可以在下面地址下载到。
Jquery starterkit
下载该文件并且解压缩。用你喜欢的编辑器(比如：记事本)打开starterkit.htm和custom.js，并在浏览器(IE，firefox, netscape)打开starterkit.htm，现在我们可以开始类似于"hello world"的例子了。
2.Hello, jQuery
作为我们要做的每一件事情，需要确定只要用到了dom,那么你就应该为当前文档注册一个ready 事件，(关于ready和onload的区别，大家可以参考＜小蛀翻译的"jQuery简单指南"部分＞，在这里就不解释了)
复制内容到剪贴板 程序代码$(document).ready(function() {
// do stuff when DOM is ready
});
在函数块里边放一个alert并没多少意义，因为一个alert并不需要DOM被加载。所以你可以做一些更复杂的事情来用到dom，比如下面当你click一个<a>的时候显示一个alert
复制内容到剪贴板 程序代码$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
所以只要你点<a>标签，alert就会显示出来。
让我们看一看都做了些什么吧。$("a")是一个jquery的选择器(selector),它能选择所有的元素(dom对象)。$是一个jquery里对于类的别名，因此$()构造了一个新的jquery对象。Click()函数是对象里的有个方法。它绑定了对所有元素的click事件并且当事件发生时执行提供的函数。
类似于下面的代码：
复制内容到剪贴板 程序代码<a href="#" onclick="alert('Hello world')">Link</a>
这个区别是显而易见的：我们不需要为单一的对象写click事件了。我们把html(结构)和js(行为)分开了就象用CSS分开一样。
现在，我们已经对选择器和事件有了一定的认识了。
3.选择器(selector)和事件(events)
Jquery提供了2个方法来选择DOM元素。第一个方法是用CSS和XPATH(比如：$("div > ul a"))。第二种方法是用jQuery对象的各种方法。当然两种方法也可以结合。
我们在starterkit里选择和修改第一个order list来测试这些选择器。开始之前，我们需要选择列表本身。这个列表有一个ID=" orderedlist"，在经典javascript里，你必须这样用：document.getElementById("orderedlist"),但是在jQuery里，我们只需要做这些：
复制内容到剪贴板 程序代码$(document).ready(function() {
$("#orderedlist").addClass("red");
});
这个starterkit提供了一个如何加CSS样式 class.red。因此，当你刷新starterkit.htm的时候，你会发现第一个list背景变成红色，而第二个list没有被改变。
现在让我们加更多的classes到list的子元素：
复制内容到剪贴板 程序代码$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
上面的例子选择了id为orderedlist的所有子标签li,并且在他们上面加了一个class.blue的样式。
现在来点更复杂的。当鼠标移到li元素的时候，增加和删除一个Class样式：
复制内容到剪贴板 程序代码$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
你在这里可以找到很多CSS和XPATH的语法。
更多的例子和表达式你也可以在这里找到。
对于每个onxxx事件，象onclick,onchange,onsubmit等，都有一个和jquery同意义的对应的事件，而其他事件，象ready,hover等，都是为某个方法提供。你能在visual jquery里发现一个完整的事件列表。
还有种写法是jquery特有的(chain)，就是把一个选择器的所有的事件并排列出来，中间用"."隔开：
复制内容到剪贴板 程序代码$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});
一个你经常面对的任务是在事件里边执行函数。比如这样
复制内容到剪贴板 程序代码$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});
这个代码只是ID为form的表单执行reset()方法。但是万一你有很多个表单需要执行呢？那么你可以这样写：
复制内容到剪贴板 程序代码$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
另外一个你必须面对的问题是选择某个或某几个元素。Jquery提供了filter()和not()方法。当filter()是过滤一些适合filter()表达式元素，而not()是删除和not()表达式相反的元素。当你想选择所有的li元素，并且不包含ul子元素呢？你可以这样写：
复制内容到剪贴板 程序代码$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});
结果是除了包含ul子元素的li，其他所有的li都得到了一个border.可能你也想选择有name属性的anchor(<a>)：
复制内容到剪贴板 程序代码$(document).ready(function() {
$("a[@name]").background("#eee");
});
要匹配属性的值(value)，我们可以用"*="来代替"="
复制内容到剪贴板 程序代码$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
直到现在，我们已经学到了很多选择器的使用。这里还有种情况你需要选择前一个或后一个元素。想一想starterkit.htm里的FAQ，当你click问题的时候，它是怎么实现隐藏和显示的呢？代码是这样的：
复制内容到剪贴板 程序代码$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});
因为上面只有唯一一个选择器(#faq),我们用chain来减少代码的长度和提高代码的易读性和表现性.这里要说明一下，如果按原文翻译过来我想很多人都看不懂，感觉他自己也没怎么说明白。我说说我自己的理解：
'dd'和'dt'都是#faq的子元素，find()的作用就是找到它的子元素。End()应该和next()搭配的，end()实质上是把 'dd'过滤了，也就是next()的时候实质上是参考的'dt'。这样每个'dt'的next就是'dd'，挺容易实现的。要是还不明白你可以边参考边照着做一遍。
除了同属元素外，我们也可以选择父元素：
复制内容到剪贴板 程序代码$(document).ready(function() {
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
});
很容易看懂，p就是a的父元素。
让我们回顾一下前面所学的，jquery有很多地方能使代码更简洁因此容易读和保持。下面的就是对$(document).ready(callback)符号的一个简单描述：
复制内容到剪贴板 程序代码$(function() {
// code to execute when the DOM is ready
});
好吧，让我们来写个hello world，来结束第一天的课程，相信你一定会写了吧
复制内容到剪贴板 程序代码$(function() {
$("a").click(function() {
alert("Hello world!");
});
});
现在，基础已经掌握了，下次我们将探索一下Jquery的其他方面(ajax)
4.Rateing:使用AJAX
在这部分我们写了一个简单的ajax应用，它的目的是允许用户rate(评估)一些事情，就象youtube.com一样。
我们需要写一些代码。例子中用到了一个php文件来读取"rating"的参数和返回rating个数(count)和平均rating(array_sum/count)。你可以看一看starterkit里边的rate.php代码。
我们需要这个例子工作在ajax上，因此我们用jquery写一个必要的标签并且把它追加到一个ID名为"rating"的div容器里边。代码如下：
复制内容到剪贴板 程序代码$(document).ready(function() {
// generate markup
var ratingMarkup = ["Please rate: "];
for(var i=1; i <= 5; i++) {
ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
}
// add markup to container and applier click handlers to anchors
$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
e.preventDefault();
// send requests
$.post("rate.php", {rating: $(this).html()}, function(xml) {
// format result
var result = [
"Thanks for rating, current average: ",
$("average", xml).text(),
", number of votes: ",
$("count", xml).text()
];
// output result
$("#rating").html(result.join(''));
} );
});
});
上面的代码片断产生了5个<a>元素并且把它们追加到了id为"rating"的div容器里．第一次加载页面后，所有的<a>元素都包含在div容器里，然后再加上个click事件。当<a>被click的时候，一个post请求被发送到rate.php文件里，并且通过rating: $(this).html()传递参数，经过处理PHP文件处理后把结果作为xml写进div容器
如果你电脑上没装php的运行环境。你可以在这里看到这个例子的效果。
对与一个不用javascript也能工作的rating例子，你可以访问softonic.de
你也能在这里或者在visual jquery里边发现更多的关于ajax的帮助文档。
当靠AJAX加载内容的时候，一个非常普遍的问题是：当加载事件句柄到你文档的时候也需要将该事件应用与你加载的内容里，所以你不得不在内容加载之后提供这些事件句柄。为了防止代码重复，你应该委派一个函数。例如：
复制内容到剪贴板 程序代码// lets use the shortcut
$(function() {
var addClickHandlers = function() {
$("a.clickMeToLoadContent").click(function() {
$("#target").load(this.href, addClickHandlers);
});
};
addClickHandlers();
});
上面当DOM准备好后addClickHandlers只应用了一次，并且每次用户点一个样式为class.clickMeToLoadContent的时候内容已经完成加载了。
请注意函数addClickHandlers被定义成了一个局部变量，而非全局函数(function addClickHandlers() {...}).。请坚持这种写法，因为它可以避免全局变量定义过多引起的冲突。
另外一个非常普遍的AJAX回调问题是参数。假设你需要传递一个额外的参数，那么把回调封装到一个函数里能够实现，如下：
复制内容到剪贴板 程序代码// get some data
var foobar = ...;
// specify handler, it needs data as a paramter
var handler = function(data) {
...
};
// add click handler and pass foobar!
$('a').click( function(event) { handler(foobar); } );
// if you need the context of the original handler, use apply:
$('a').click( function(event) { handler.apply(this, [foobar]); });
5.各种动态效果的实现：用FX
Jquery能实现简单的动态效果，比如显示(show)和隐藏(hide)：
复制内容到剪贴板 程序代码// $(document).ready(function() {
$("a").toggle(function() {
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
});
});
发挥你的想像，你能用aninate()创建任意的组合：
复制内容到剪贴板 程序代码// $(document).ready(function() {
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide'
}, 'slow');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
}, 'slow');
});
});
在 interface 插件收集里，你能发现很多奇特的效果。这个站点也提供一些演示。
6.分类：用表格分类插件
该插件是运行在客户端的，所以你只要在你文件里包含jquery和插件的文件并且写出你想如何分类。试试下面的例子。在starterkit.htm里添加下面一行代码：
复制内容到剪贴板 程序代码<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>
把插件包含进去后，你还需要在custom.js里写
复制内容到剪贴板 程序代码$(document).ready(function() {
$("#large").tableSorter();
});
点击表格的头部看看它是怎么工作的。
这个表格也能够用高亮隔行显示来实现斑马线效果。代码如下：
复制内容到剪贴板 程序代码$(document).ready(function() {
$("#large").tableSorter({
stripingRowClass: ['odd','even'], // Class names for striping supplyed as a array.
stripRowsOnStartUp: true // Strip rows on tableSorter init.
});
});
这里有更多的例子和演示在tablesorter homepage
当你用jquery久了之后会发现把你的代码(功能模块)作为插件封装在一个包是多么有用，不仅你自己或你的公司能重用这些代码(功能模块)，也能在一些社区里共享。下面我们将来看看如何构造一个插件！
7.插件：写你自己的jquery插件
其实为jquery写插件是很简单的。如果你按照下面的规则，整合你的插件将非常容易。
1. 给你的插件命名。让我们叫它"foobar"
2. 创建一个文件名为：jquery.[你的插件名].js 比如：jquery.foobar.js
3. 扩展jquery的内部对象，创建一个或多个插件的方法，比如：
复制内容到剪贴板 程序代码jQuery.fn.foobar = function() {
// do something
});
4.用帮助函数创建一个对象(可选)
复制内容到剪贴板 程序代码jQuery.fooBar = {
height: 5,
calculateBar = function() { ... },
checkDependencies = function() { ... }
};
然后你能在你的插件里边调用这些帮助函数
复制内容到剪贴板 程序代码jQuery.fn.foobar = function() {
// do something
jQuery.foobar.checkDependencies(value);
// do something else
};
5. 创建一个用户能修改的默认的设置(可选)
复制内容到剪贴板 程序代码jQuery.fn.foobar = function(options) {
var settings = {
value: 5,
name: "pete",
bar: 655
};
if(options) {
jQuery.extend(settings, options);
}
};
然后你能用下面的默认调用该插件(有选项)
复制内容到剪贴板 程序代码$("...").foobar({
value: 123,
bar: 9
});
如果你要发布你的插件，你应该提供一些例子和演示。
现在你有一个基本的认识了吧，让我们运用自己的知识和创造力来写我们自己的插件
有很多朋友操作表单这样来结束代码：
复制内容到剪贴板 程序代码$("input[@type='checkbox']").each(function() {
this.checked = true;
// or, to uncheck
this.checked = false;
// or, to toggle
this.checked = !this.checked;
});
请注意，无论什么时候，当你的代码出现each时，你应该重写上面的代码来构造一个插件如下：
复制内容到剪贴板 程序代码$.fn.check = function() {
return this.each(function() {
this.checked = true;
});
};
于是插件可以这样用：
复制内容到剪贴板 程序代码$("input[@type='checkbox']").check();
现在你也能写一些插件为uncheck()和togglecheck()。但是我们可以扩展插件来接收一些选项。
复制内容到剪贴板 程序代码$.fn.check = function(mode) {
var mode = mode || 'on'; // if mode is undefined, use 'on' as default
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;
}
});
};
然后用户能够这么使用：
复制内容到剪贴板 程序代码$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');
8.下一步(展望)
如果你计划学习更多的javascript，你应该考虑用firefox的firebug插件来调试你的代码。它为javascript的调试提供了一个控制台，一个调试器和其他有用的东西。
如果你有任何问题不能解决，请给我们发邮件jQuery mailing list.
+ 查看当前日志评论 (0)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.189 ms
标题: jQuery 指南
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.189 ms
暂无评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.189 ms