初学者全面接触学习jquery(译文)

2024-09-06 20:04:31

字体：大中小

来源：转载

供稿：网友

原文地址：http://docs.jquery.com/tutorials:getting_started_with_jquery

最好有javascript以及dom方面的知识，这对于理解其中的代码很有帮助，不了解也不要紧，因为代码本身就很简洁。

这篇指南包括了 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方法，相当于在每一个链接里都加了一句”onclick=…”，从这里可以看出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();
}