奇客资讯、软件硬件、编程系统

January 10th, 2008

permalink 农民的jQuery之旅

作者:Jack_Lee
来源:http://www.0411pet.com/blog

今天决定研究ajax框架,上网搜索一番,觉得jquery似乎不错,就研究它吧,研究的对象所定为jquery官网jquery.com,虽然说是英文的,就当是锻炼英语好了,翻译一下其中的内容,好久没干这个活了。

jQurey-写的更少,做得更多
jQuery是一个新类型的JavaScript类库
jQuery是一个快速的,简明的JavaScript类库,使你在如何traverseHTML文档,操作事件,使用动画和向你的网页中添加ajax交互变得更加的简单。jQuery是被设计用来改变你写JavaScript的方法的。
“你写了10行jQuery代码,相当于你写了20行乏味的DOM JavaScript。当你写完之后,一切只需要2或3行的代码而已,并且它不可能变得更短除非它看破了你的心思(read your mind)”-Dave Methvin

了解关于JQuery JavaScript类库
设计者,开发者,爱好者,商业用户……,jQuery适用于任何人。
JQuery类库能够适合任何不同的应用。
JQuery可以怎么帮助你呢?

轻量级-10KB的大小(压缩后)
适应CSS3-支持CSS 1-3 和 基本的XParh
跨浏览器-IE 6.0+,FF 1.5+,Safari 2.0+,Opera 9.0+

下载jQuery
下载jQuery(未压缩版)55kb-设计被用来测试,学习和开发
下载jQuery(压缩版)19kb-设计被用来生产使用(production use)

单词学习
concise adj.简明的, 简练的
traverse vt.横过, 穿过, 经过, 在…来回移动, 反对, 详细研究
interaction n.交互作用, 交感
tedious adj.单调乏味的, 沉闷的, 冗长乏味的
Compliant adj.顺从的, 适应的
read one’s mind 看出某人的心思

一个基本的jQuery介绍和你使用它所需要了解的一些概念
原出处:http://docs.jquery.com/Tutorials:How_jQuery_Works
作者:John Resig

基本的

这是一个基本的指南,被设计用来帮助你开始使用jQuery。如果你还没有建立一个测试的页面,那么请建立一个包含以下内容的新的HTML页:

<html>
<head>
<script type=”text/javascript” src=”path/to/jquery.js”></script>
<script type=”text/javascript”>
// Your code goes here
</script>
</head>
<body>
<a href=”http://jquery.com/”>jQuery</a>
</body>
</html>

编辑标签中的src属性指向你的jquery.js副本。例如,如果jquery.js同你的HTML文件在同一个目录中,那么你可以写成:

<script type=”text/javascript” src=”jquery.js”></script>

你可以从Downloading jQuery这个页下载属于你自己的jQuery。

在文档准备好的时候开始代码

大多数Javascript开发者首先需要完成的就是添加下边这个代码到他们的程序中:

window.onload = function(){ … }

这其中的代码使你想要在页面被载入时执行的处理。问题是,这些Javascript代码只有在页面上的全部图片加载完成(包括头部的banner广告)的 时候才会执行。将window.onload放在最上边的原因是当你第一次运行你的代码的时候,HTML’document’还没有加载完成。
为了解决这个问题,你可以使用jQuery一个简单的程序(跟老宋确认了一下,statement是程序体的意思),被叫做ready事件

$(document).ready(function(){
// Your code here
});

这段代码检查文档,并且在文档确定能够被使用前,不进行任何操作-这个正是我们所需要的。所以将上边这一小段代码粘贴到你的测试页里吧。

当点击的时候让一些事情发生

我们要做的第一件事就是当一个链接被点击的时候是一些事情发生。在ready的function中,添加下边的代码:

$(”a”).click(function(){
alert(”Thanks for visiting!”);
});

点击观看农民做的演示

保存你的HTML页并且在浏览器中重新加载一下。点击页面上的链接,在离开这个主jQuery页前,将会出现一个弹出的alert。
对于click和其他的事件,你都可以避免它们默认的行为-这里,在jquery.com链接的下边,从事件句柄中返回false:

$(”a”).click(function(){
alert(”Thanks for visiting!”);
return false;
});

点击观看农民做的演示

添加一个类
另一个常见的工作就是从对象中添加(或移除)类,例如:

$(”a”).addClass(”test”);

如果你想在你的代码头部添加一些个样式信息的话,向下边这样:

<style type=”text/css”>a.test { font-weight: bold; }</style>

点击观看农民做的演示

然后添加对上边的addClass的调用-你的所有A标签将会全部变成粗体了。如果想移除这个类,你应该使用removeClass。

特殊的效果(effect)

在jQuery中,提供了两个非常容易得到的效果,这可以使你的网站更加出众。将这个加到你的test页中,链接就会变样了:

$(”a”).click(function(){
$(this).hide(”slow”);
return false;
});

点击观看农民做的演示

现在,如果你点击任何的链接,这个链接就会慢慢的消失了。

Chainability(jQuery魔术)

jQuery使用一个有趣的概念来使它的代码短小精悍。同面向对象的编程思想类似,这个概念很容易被人们理解。
在一个nutshell中:在jQuery中每一个方法都返回请求对象本身,允许你绑上它(’chain’ upon it),例如:

$(”a”).addClass(”test”).show().html(”foo”);

这些独立的方法(addClass,show,和html)中的每一个返回的是jQuery对象,允许你继续对现在的元素使用方法。
你可以更深一步的使用这个方法,通过从选定中添加或移除元素,修改这些元素然后回复原来的选定,例如:

$(”a”).filter(”.clickme”).click(function() {
alert(”click!”);
}).end().filter(”.hideme”).click(function() {
$(this).hide();
});

可以修改jQuery选定并且以end()结束的方法有:
add()
children()
eq()
filter()
find()
gt()
lt()
next()
not()
parent()
parents()
siblings()

更具体的请察看API文档

回调,方法和“this”

回调是一个方法,它作为一个变量传递给另一个方法,并且在他的父方法被执行后才执行。回调的一个很大的特点就是出现在父方法后边的方法能够在回调执行之前执行。
另一个需要了解的就是,如何正确的通过回调。这个是我经常会忘记的属性句法。

没有参数的回调

你可以像下边这样传递一个没有参数的回调:

$.get(’myhtmlpage.html’, myCallBack);

注意第二个参数只是一个简单的方法名(而不是一个字符串并且没有花括号)。

有参数的回调

“如果你有参数要传递,你该怎么做?”你可能会问自己。

错误
错误的方法(不会起作用)

$.get(’myhtmlpage.html’, myCallBack(param1, param2));

这个将不会起作用因为它调用myCallBack(param1, param2)然后将返回的结果作为$.get()的第二个参数。

正确
正确的方法

$.get(’myhtmlpage.html’, function(){
myCallBack(param1, param2);
});

所以通过传递一个无名的方法(the part with…

function() {
/* function calls inside*/
});

其本身就会调用你的带参数的方法,所以你成功了。
这个方法起作用了,是因为它将无名的方法作为第二个参数传递给了$.get(),而没有首先执行它。

单词学习:
concept n.观念, 概念
tutorial n.指南
circumvent vt.围绕, 包围, 智取
statement n.声明, 陈述, 综述
manipulate vt.(熟练地)操作, 使用(机器等), 操纵(人或市价、市场), 利用, 应付, 假造
snippet n.小片, 片断, 摘录, <口>不足道的人, 不知天高地厚的年轻人
stick v.粘住, 粘贴
prevent v.防止, 预防
handy adj.手边的, 就近的, 唾手可得的, 便利的, 敏捷的, 容易取得的
straight-forward 直接的, 顺向的, 简单的
chain vt.用链条拴住
revert v.回复
syntax n.[语]语法, 有秩序的排列, 句子构造, 句法
parentheses n.圆括号, 插入语, 插曲

浏览基本的jQuery,建立插件的所有方法。
原文地址:http://jquery.bassistance.de/jquery-getting-started.html
作者:Jörn Zaefferer
翻译:ItFarmer
这个向导是一个关于jQuery类库的介绍。需要你具备基本的JavaScript和文档对象模型(DOM)的基本知识。它包括一个简单的hello word例子,selector和事件基础,ajax,FX和usage和插件的创建。
这个向导中不含有“Click me”的例子,唯一有的是“copy me”来让你自己亲自把代码复制,然后亲自运行看结果,并加以修改。
安装
最开始,我们需要一个jQuery类库的副本,我们可以从main download page得 到它。jQuery Starterkit提供了一些markup和css供我们使用。当下载并解压它的内容后,我们将jquery.js放入相同的目录并且用自己喜欢的编辑 器打开starterkit.html和custom.js,然后在浏览器中打开starterkit.html。
点击察看starterkit.html原始页面效果
现在我们就已经做好了所有准备,可以开始这个声名狼藉的“Hello world”例子了。
跟这部分内容有关的有趣链接:
jQuery Starterkit
Downloading jQuery
Hello jQuery
当我们使用jQuery读取或操作文档对象模型(DOM)时,我们需要确定当DOM准备好的时候我们就要开始添加事件了。
这时,我们为这个document注册一个ready事件。
$(document).ready(function() {
// do stuff when DOM is ready
});
向这个方法中添加一个alert没什么道理,因为一个alert不会要求DOM加载。所以让我们加一个更有意思的,当点击链接的时候弹出alert。
$(document).ready(function() {
$(”a”).click(function() {
alert(”Hello world!”);
});
});
这个例子会在你点击链接的时候弹出一个alert来。
让我们看一下我们在做什么:$(”a”)是一个jQuery的选择器(selector),在这个例子中,他选择了所有的a元素。$本身是jQuery的 “class”的一个别名,因此$()便创建了一个新的jQuery对象。接下来调用的click()方法这个jQuery对象的一个方法。他将所有的被 选择的元素(本例中,是一个anchor元素)绑定了一个click事件并且当事件被触发时就会执行所提供的这个方法。
这个跟下边的代码是一样的:
Link
两个区别很明显:我们不需要为每一个单独的元素都写一个onclick事件。我们使结构(HTML)和行为(JS)明显的分离开来,就像我们使用CSS来分离结构同表现一样。有了这个思想后,我们就可以更深一步的探索选择器和事件了。
跟这部分内容有关的有趣链接:
jQuery Base
jQuery Expressions
jQuery Basic Events
找到我:使用选择器和事件
jQuery提供了两个方法来选择元素。第一个是使用一个CSS和XPath选择器的结合作为一个字符串被传递给jQuery构造器。第二种方法是使用jQuery对象的一些方法。这两个事可以结合使用的。
为了尝试这些选择器,我们选择并修改在starterkit中的第一个ordered list。
开始,我们想要选择list本身。list有一个ID叫“orderedlist”。在传统的JavaScript中,你可以通过使用document.getElementByID(”orderedlist”)来选择它。有了jQuery后,我们可以像下边这样做:
$(document).ready(function() {
$(”#orderedlist”).addClass(”red”);
});
点击察看农民的演示
starterkit 提供了一个包含“red”类(class)的样式(stylesheet),这个“red”只是简单的增加一个红色的背景色。因此,当你在浏览器中重新加 载这个页的时候,你应该能看到第一个ordered list有了一个红色的背景色了。第二个list没有被修改。
现在让我们为这个list的子元素添加更多的类(classes)。
$(document).ready(function() {
$(”#orderedlist > li”).addClass(”blue”);
});
点击察看农民的演示
这段代码选择了ID为“orderedlist”的元素的所有 li 子元素并且为他们添加了“blue”这个类(class)。
现在来点更有趣的内容:我们想要在用户将鼠标放在li元素(仅仅只是list的最后一个)上的时候添加和移除类(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,都是为了特定的任务而作为一个简便的方法被提供。
你可以找到一个完整的包含所有事件的列表在jQuery Events Documentation
有了这些选择器和事件你既可以做好多事情了,但是这里有更多的。
$(document).ready(function() {
$(”#orderedlist”).find(”li”).each(function(i) {
$(this).append( ” BAM! ” + i );
});
});
点击察看农民的演示
find()允许你能够更深一步的找到已经被选择的元素的后代,因此$(”#orderedlist).find(”li”)就跟$(”#orderedlist li”)是一样的。
each()遍历每一个元素并且允许更深一步的处理。大多的方法,就像addClass(),本身就使用each()了。
在这个例子中,append()是用来为它附加一些字符并且在每一个元素结尾处作为文本设置它。
另一个你经常要面对的问题就是在不被jQuery包含的DOM元素上调用方法。考虑一下通过ajax成功提交一个表单后你想要重新reset一下。
$(document).ready(function() {
// use this to reset a single form
$(”#reset”).click(function() {
$(”#form”).reset();
});
});
农民标记:页面中有一个ID是“reset”的链接,所以这里的$(”#reset”)就是获得reset这个链接对象。画面中还有许多form,但是只 有第一个form有ID为“form”,其他的都没有。综合上边这些,想要根据ID获得一个对象就用$(”#对象ID”),想要获得所有同类型对象就用$ (”对象名”)。
这段代码选择了ID是“form”的元素并且在每一个被选定的元素上调用了reset()。如果你有更多的表单的话,你也可以这样做:
$(document).ready(function() {
// use this to reset several forms at once
$(”#reset”).click(function() {
$(”form”).reset();
});
});
这段代码会选择你的document中的所有form,遍历他们并且对每一个都调用reset()。
一个新的挑战是从一组类似或相同的元素中只选择某一个特定的元素。jQuery提供了filter()和not()来做这个。filter()能够将元素 精简到只剩下满足过滤条件的那些,not()恰恰相反,他移除了所有满足条件的。想象一个unordered list,对于它你想选择所有的没有ul子元素的li元素。
$(document).ready(function() {
$(”li”).not(”[ul]”).css(”border”, “1px solid black”);
});
点击察看农民的演示
这段代码选择了所有的li元素并且移除了所有含有ul子元素的元素。因此所有的li元素都有了边框,除了那些有ul子元素的。[expression]句 法是来自于XPath并且可以用来通过利用子元素或属性来过滤。可能你要选择所有的有name属性的链接(anchor)
$(document).ready(function() {
$(”a[@name]”).background(”#eee”);
});
这段代码给所有有name属性的链接都添加了背景色。
比起通过name来选择链接,我们更多的情况会是通过他们的href属性来选择。这可能就会是个问题,因为当返回的时候,关于他们认为href值是什么, 不同的浏览器的行为是不一致的。(标注:这个问题在jQuery中已经得到解决,在1.1.1版本以后)。为了只匹配这个之中的一部分,我们可以使用 contains select“*=”来替代equlas(“=”):
$(document).ready(function() {
$(”a[@href*=/content/gallery]”).click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
到现在为止,我们已经使用了所有的选择器(selectors)来选择子元素或者过滤现有的选择项。现在是时候研究一下选择前一个或后一个元素了,这个被 称为siblings。考虑一个FAQ页,所有的回答开始都是隐藏的,当问题被点击的时候才会显示出来。jQuery代码如下:
$(document).ready(function() {
$(’#faq’).find(’dd’).hide().end().find(’dt’).click(function() {
$(this).next().slideToggle();
});
});
点击察看农民的演示
这里我们使用了一些链接来减少代码数量并得到了更好的表现效果,因为“#faq”只被选择了一次。通过使用end(),第一个find()没有被执行,所以我们可以在#faq元素中从下一个find()开始搜索,而不用搜索他的dd子元素。
通过click句柄,这个方法被传递给click()方法,我们使用$(this).next()来找到从当前的dt开始的下一个sibling,这就是我们能够快速的找到被点击的问题的答案。
更深一步,你同样可以选择父元素(就像同XPath更相似的被认为是ancestors)。也许你想要悬浮的链接的父元素段落高亮现实,试着这样做:
$(document).ready(function(){
$(”a”).hover(function(){
$(this).parents(”p”).addClass(”highlight”);
},function(){
$(this).parents(”p”).removeClass(”highlight”);
});
});
点击察看农民的演示
对于所有悬浮的链接,他们的父元素段落被找到并且一个“highlight”类(class)被添加和移除。
在我们继续下边的研究之前先后退一步:jQuery使一些关于如何减少代码因此会更容易的读取和维护。下边的代码是个精简版的$(document).ready(callback)代码:
$(function() {
// code to execute when the DOM is ready
});
适用于hello world例子,我们以下边的代码结束:
$(function() {
$(”a”).click(function() {
alert(”Hello world!”);
});
});

现在,根据我们已经掌握了的基础,我们将要开始探索其他方面的知识了,开始我们的AJAX。
跟这部分内容有关的有趣链接:
jQuery API documentation
Visual jQuery - A categorized browsable API documentation
jQuery Selectors
jQuery Events
jQuery DOM Traversing
以下的部分用到了服务器端编程语言,所以暂时先研究一些基本的东西吧,剩下的以后再来研究,敬请关注:)
让我动起来:使用效果
简单的动画效果可以通过jQuery的show()和hide()来实现。
$(document).ready(function(){
$(”a”).toggle(function(){
$(”.stuff”).hide(’slow’);
},function(){
$(”.stuff”).show(’fast’);
});
});
点击察看农民的演示
点击第一个链接看看:)
利用animate(),你可以创建任何的动画,例如淡入淡出的滑动。
$(document).ready(function(){
$(”a”).toggle(function(){
$(”.stuff”).animate({ height: ‘hide’, opacity: ‘hide’ }, ’slow’);
},function(){
$(”.stuff”).animate({ height: ’show’, opacity: ’show’ }, ’slow’);
});
});
点击察看农民的演示
点击第一个链接看看:)
更多的效果可以通过 接口插件集合(interface plugin collection) 来实现。这个站点提供了demo和使用文档。接口在jQuery’s plugin list的顶部,还有好多其他的。接下来的部分显示了如何使用tablesorter插件。
跟这部分内容有关的有趣链接:
jQuery Effects Documentation
Interface plugin
给我排序:使用tablesorter插件
tablesorter插件允许在客户端对表格进行排序。你包含进jQuery和这个插件,并且告诉这个插件你想要排序哪个表格。
为了试验这个例子,你需要下载tablesorter插件并且把下边这行代码加入到starterkit.html中(在jquery引用的下边):
引入这个插件后,你可以这样调用它:
$(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 homepage
大多数的插件可以可以这样使用:引用这个插件文件并在一些元素上调用插件方法,传递一些选项设置来客户化这个插件。
一个时时更新的可用插件列表可以在 jQuery Plugin site 上找到。
当你更经常地使用jQuery的时候,你可能会发觉他很好地将你自己的代码打包好了,就像一个插件一样,或者可以为你自己或你的公司重用,或者可以用来分享。接下来的部分会给出一些关于如何构建一个插件的提示。
跟这部分内容有关的有趣链接:
Plugins for jQuery
Tablesorter Plugin
编写你自己的插件
给jQuery编写插件是一件很容易的事情。如果你遵循以下的规则,其他人也可以很容易的使用你编写的插件。
插件命名
给你的插件起个名字吧,让我们称呼这个例子为“foobar”。建立一个文件,叫做“jquery.[yourpluginname].js”,例如jquery.foobar.js。
添加一个自己的方法
通过扩展jQuery对象建立一个或多个插件方法,例如:
jQuery.fn.foobar = function() {
// do something
};
那么上边的代码就可以通过下边的形式调用:
$(…).foobar();
默认设置
建立一个可以被用户修改的默认的设置,例如:
jQuery.fn.foobar = function(options) {
var settings = jQuery.extend({
value: 5, name: “pete”, bar: 655
}, options);
};
你便可以调用这个插件不用选项而使用默认的设置:
$(”…”).foobar();
或者使用选项:
$(”…”).foobar({ value: 123, bar: 9 });
文档
如果你想发布你的插件,你应该提供一些例子和相关文档。这里有好多可以引用的插件
现在你已经具备了基本的编写插件的思想了,让我们使用这个思想并且编写我们自己的插件吧。
checkbox插件
许多人都想通过jQuery操作表单,就是选择或者不选择单选按钮或多选按钮。他们通常会这样编码:
$(”input[@type=’checkbox’]”).each(function() {
this.checked = true;
this.checked = false; // or, to uncheck
this.checked = !this.checked; // or, to toggle
});
Whenever you have an each in your code,你可能会非常直接的把它重写而成为一个插件。
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”,“off”和“toggle”其中的一个值,例如:
$(”input[@type=’checkbox’]”).check();
$(”input[@type=’checkbox’]”).check(’on’);
$(”input[@type=’checkbox’]”).check(’off’);
$(”input[@type=’checkbox’]”).check(’toggle’);
选项设置
因为不止一个的喧响设置,这个方法变得有些复杂了,因为如果用户想要忽略第一个参数而只使用第二个参数时,他必须传递null值。
上一节中的tablesorter的使用示范了一个使用object liseral来解决这个问题的实例。用户可以忽略所有的参数或者通过一个键(key)/值(value)对来为每一个设置传递一个对象以此来重写达到他们想要的效果。
做一个练习,你可以试着重写在第四部分的投票代码(Voting code)来作为一个插件。插件的框架应该类似于下边这个样子:
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” });
接下来的步骤
如果你打算开发更多的JavaScript,你应该考虑一下火狐扩展(Firefox extension)叫做 FireBug 。他为每天的JavaScript开发提供了一个解决方案(很好的替代alerts),一个调试器和一些有用的素材。
如果你有解决不了的问题,你想同别人分享的想法或者仅仅想表达一下你的关于jQuery的想法,你可以自由地发送到 jQuery mailing list
关于这个想到的人和相关内容可以发送到我的blog或直接同我联系。
还剩下什么……对于这个强大的类库,感谢John Resig!感谢jQuery讨论组为John提供了足够的咖啡和每一样东西!
该部分内容结束,大工程啊,终于完了,喝口水先。
单词学习:
notorious adj.声名狼籍的
manipulates vt.(熟练地)操作, 使用(机器等), 操纵(人或市价、市场), 利用, 应付, 假造
sense n.官能, 感觉, 判断力, 见识, …感, 意义, 理性
sophisticated adj.诡辩的, 久经世故的
alias n.别名, 化名
construct vt.建造, 构造, 创立
bind v.绑, 镶边, 装订, 凝固, 约束
anchor n.锚
obvious adj.明显的, 显而易见的
separation n.分离, 分开
combination n.结合, 联合, 合并, 化合, 化合物
constructor [计] 构造器
combined adj.组合的, 结合的
syntax n.[语]语法, 有秩序的排列, 句子构造, 句法
equivalent n.等价物, 相等物
convenient adj.便利的, 方便的
descendants 后代
iterate vt.反复说, 重申, 重述
processing 处理
append vt.附加, 添加, 悬挂[计] 设置数据文件的搜索路径
iterate vt.反复说, 重申, 重述
identical adj.同一的, 同样的
reduces vt.减少, 缩小, 简化, 还原
contrary adj.相反的, 逆的, 执拗
inconsistently adv.不一致地
siblings n.兄弟, 姐妹, 同胞, 同属
ancestor n.祖先, 祖宗
maintain vt.维持, 维修, 继续, 供养, 主张
notation n.符号
shortcut n.捷径
applied to vt.适于,应用于
combination n.结合, 联合, 合并, 化合, 化合物
fancier n.空想家, 培育动物(或植物)的行家, 爱好者
hints n.暗示, 提示, 线索
integrate vt.使成整体, 使一体化, 求…的积分
manipulate vt.(熟练地)操作, 使用(机器等), 操纵(人或市价、市场), 利用, 应付, 假造
straightforward adj.正直的, 坦率的, 简单的, 易懂的, 直接了当的
omit vt.省略, 疏忽, 遗漏
demonstrates vt.示范, 证明, 论证
literal adj.文字的, 照字面上的, 无夸张的
skeleton n.(动物之)骨架, 骨骼, 基干, 纲要, 万能钥匙

原文地址:http://docs.jquery.com/Core
参考:jQuery Docs - 1.1 API 中文版
翻译:ItFarmer
请尊重他人劳动成果,转载请表明出处
$(html)
根据提供的原始HTML标记字符串,动态创建由jQuery对象包装的DOM元素。
返回值: jQuery
参数: html(String):一个html字符串
例子:
动态地建立一个div元素(和它所包含的内容),并且附加给body元素。在内部,一个元素被建立并且它的innerHTML属性设定给一个给定的标记。这个虽然灵活但是有局限性。
$(”
Hello”).appendTo(”body”)
$(elems)
为一个或多个DOM元素捆绑jQuery功能。
这个方法同样接收XML文件和Windows对象作为有效的参数(尽管他们并不是DOM元素)。
返回值:jQuery
参数:elems (Element | Array):一个被jQuery对象包含的DOM 元素(s)
例子:
将网页背景色设置为黑色
$(document.body).css( “background”, “black” );
例子:
将表单中的所有input隐藏
$( myForm.elements ).hide()
$(fn)
是一个表示$(document).ready()的简便方法,允许你绑定一个可以在DOM文档加载完成后执行的方法。$(fn)的行为同$ (document).ready()一样,根据这个准备被操作的DOM,在你的页面中$(fn)应该被用来捆绑一个其它的$()操作。While this function is, technically, chainable - there really isn’t much use for chaining against it.(这句不会翻译)
在你的页面中,你可以想包含多少$(document).ready事件就包含多少。
让我们看一下关于ready事件更详细的ready(Function)
返回值:jQuery
参数:fn(Function):当DOM加载完成后要执行的方法。
例子:
当DOM加载完成后执行一个方法。
$(function(){
// Document is ready
});
例子:
Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias.
jQuery(function($) {
// Your code using failsafe $ alias here…
});
$(expr, context)
这个函数接收一个包含CSS或基本的XPath选择器的字符串,然后用这个字符串去匹配一组元素。
jQuery的核心方法是以这个方法为中心的。jQuery的每一个东西都是基于这个的,或者是采用其他形式使用它。这个方法的最基本应用就是传进去一个表达式(通常会包含CSS或XPath),然后就会找到所有匹配的元素。
默认的,如果没有内容被特殊化,$()会在当前的HTML文档中搜索DOM元素。如果你特殊化了一个内容,例如一个DOM元素或着一个jQuery对象,对应于那些内容的表达式就会被匹配。
察看被允为表达式所许使用的 DOM/Traversing/Selectors
返回值:jQuery
参数:
expr(String):一个查询用的表达式
context(Element | jQuery):(可选)作为内容的一个DOM元素、文档或jQuery对象
例子:
在一个div元素中查找所有子元素p
$(”div > p”)
之前:
one
two
three
结果:
[
two ]
例子:
在文档的第一个form中查找所有type为radio的input。
$(”input:radio”, document.forms[0])
例子:
在一个特殊的XML文档中查找所有的div元素
$(”div”, xml.responseXML)
$.extend(prop)
扩展jQuery对象自身。能够用来向jQuery命名空间(namespace)中添加一些方法或者是插件方法(插件)
返回值:Object
参数:prop(Object):将要被合并到jQuery对象的对象
例子:
添加两个插件方法。
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
$(”input[@type=checkbox]”).check();
$(”input[@type=radio]”).uncheck();
例子:
向jQuery命名空间中添加两个方法
jQuery.extend({
min: function(a, b) { return a b ? a : b; }
});
未完待续……
单词学习:
essential adj.本质的, 实质的, 基本的, 提炼的, 精华的
on-the-fly 【信】在传输过程中;【设】高速旋转,飞击
raw adj.未加工的, 生疏的, 处于自然状态的, ,不掺水的, 擦掉皮的, 阴冷的, 刺痛的
dynamically 【计】 动态的
Internally adv.在内, 在中心
flexible adj.柔韧性, 易曲的, 灵活的, 柔软的, 能变形的, 可通融的

Search

Sponsor

Archives

Categories

Tags

Meta

Feeds