难免有误,阅读注意
原文地址:http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
翻译:牛小超-Nainse
开始时间:2009年3月5日16:38:13
这是一个介绍jQuery js 库的指导性文档。你需要具备一些js和dom(document object model, 文档对象模型)的基础知识。她是从最基础开始的,对于那些有必要的信息,我会尽可能详细的解释。这篇文档里包含了一个简单的“hello world”的例子,选择符和事件的基础知识(selector and event basics),Ajax,FX以及一些用法(usage),还附带了一些插件的著作(authoring of plugins)。
这篇文档没有提供“click me”的代码,而只提供了“copy me”的,我的意图是想请您复制他们(更好的做法是用自己的手指一个字符一个字符的敲出他们),然后亲自尝试着使用他们。复制这些例子,看看他们都能做什么,然后大胆的试着修改他们。
SETUP
在开始之前我们需要一个jQuery的js库,可以在main download page得到。jQuery Starterkit提供了一些标记(markup)和css配合这些工作。在下载并解压jQuery Starterkit之后,把jquery.js放到同一个目录下,并用你最喜欢的编辑器(我用DreamWeaver cs3)打开startkit.html和custom.js,并且用浏览器也把startkit.html打开。
现在,你已经为测试已经被人们用烂了的“Hello world”例子做好了所有的准备工作。
可能感兴趣的连接:
n jQuery Starterkit
n Downloading jQuery
HELLO JQUERY
新建一个空的html文件:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// we will add our javascript code here
</script>
</head>
<body>
<!-- we will add our HTML content here -->
</body>
</html>
|
这个页面只引入了一个jquery.js库文件(确保src的值是指向jquery.js存储的路径的。这里是设定你的html文件和js文件在同一目录下)。那两个有注释块的位置是我们将要填放后续代码的地方。
上面我们已经做了这么多了,但是当我们读取或操作dom的时候,还是要确保最重要的一点,那就是在我们添加一些事件的时候,dom必须是ready状态的。
为了确保这一点,我们需要注册一下dom的ready事件:
$(document).ready(function() {
// do stuff when DOM is ready
});
|
放一个alert语句到这个函数里是没有什么意义的,因为alert的执行不依赖于dom是否已经被加载。所以让我们来点儿有难度的吧:当点击一个连接的时候alert一下^_-。
首先,在<body>标签后加一个:
现在,把$(document).ready句柄(handler)设置为:
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
|
这样,在你点击这个链接的时候就会看到一个alert框。
好,让我们回过头来看看我们都做了什么:$(“a”)是jQuery的一个选择器(selector),它选择了所有的a元素。$本身是jQuery类的一个别名,可以用$()构造一个jQuery的新对象,接下来我们调用的click()函数是jQuery对象的一个方法,它绑定一个click事件到所有的a元素上(在这里,只绑定了一个a元素),并且当click事件被触发的时候执行相应的函数。
这和下面的代码的功能是类似的:
<a href="" onclick="alert('Hello world')">Link</a>
|
它们的区别是显而易见的:我们不需要再为每一个a元素单独指定onClick事件了。我们把结构(structure HTML)和行为(behavior JS)清晰的分离了,就像我们用css来分离结构和显示样式是一样的。
注意,我们现在才只是展示了选择器和事件(selectors and events)的一点点特性而已。
可能感兴趣的链接:
n jQuery Base
n jQuery Expressions
n jQuery Basic Events
来,找我吧:用选择器和事件(Find me: Using selectors and events )
jQuery提供了两种方法来选定元素(select elements)。第一种是用css和XPath组合成一个字符串作为jQuery构造器的参数,第二种方式是用jQuery对象提供的一些方法来获取。这两种方式是可以混合使用的。
下面通过选择和修改starterkit中的第一个ordered list来试用其中的一些选择器。
一开始,我们选择这个list本身,他有一个id “orderedlist”,在你熟知的js中,你可以用document.getElementById(“orderedlist”)来获取这个元素的对象,但是在jQuery中,我们要用:
$(document).ready(function(){
$(“#orderedlist”).addClass(“red”);
});
|
Starterkit提供了一个样式表screen.css。其中定义了一个red类,用来把背景颜色设置为红色。所以,在浏览器中当你重新加载页面后,你会发现第一个ordered list的背景被设置成了红色,第二个及其他的元素的背景却没有改变。
现在,让我们给第一个list的子元素添加上定义好的css类吧:
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
|
这个代码是用来选取orderedlist的所有标签名为li的子元素,并为他们加上名为“blue”的css类。
下面,让我们来点高级的吧:当用户把鼠标移到这些个li上时改变li的样式,移开时回复原样。这里我们只改变最后一个li。
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});
|
还有许多其他的选择器是类似于css和XPath的语法的,更多的例子和变量、表达式可以在这里找到。
像onClick、onChange、onSubmit这样的onXxxxx事件在jQuery中都有相对应的方法。这里有jQuery中的事件列表,他们都是作为方法为某种任务提供的,可以很方便的使用他们。
你可以在jQuery Events Documentation中找到所有的jQuery事件。
用这些选择器和事件你可以做很多工作,但你要记住,还会有更多的…
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});
});
|
find()方法可以找到指定元素的后代(descendants)(子元素),所以$(“#orderedlist”).find(“li”)等价于$(“#orderedlist > li”)和$(“#orderedlist li”)。
each()方法迭代所有的元素并做进一步的处理。有很多方法他们本身就使用了each()方法,比如addClass()。
在这个例子中,append()方法用来为元素附加上一段文本,而且是加在元素值的后面的。
另外,我们还经常需要调用一些jQuery中没有包含的方法来设置dom元素,比如,用Ajax提交表单完成之后要重置表单的例子:
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("form")[0].reset();
});
});
|
在这段代码中,把第一个form重置了,如果在通一个页面中有更多的form,并且都需要重置,你可以:
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
|
上面的代码,可以选择页面(或文档 document)中的所有的form,并为他们调用reset()方法。注意:在一个.each()函数中,this 引用的是当前正在活动的元素。并且还要记住,reset()方法是属于form元素的,而不是jQuery对象,我们不能简单的使用$(“form”).reset()来重置页面上多有的表单。
好了,现在我们面临一个更大的挑战:从一组相似或相同的元素中摘取出某个特定的元素。
jQuery为这样的需求提供了filter()和not()方法,filter()方法根据过滤条件来缩减选取元素的范围,而not()方法做的工作却是与之相反的,not()方法会排除掉那些适合过滤条件的元素。(While filter() reduces the selection to the elements that fit the filter expression, not() does the contrary and removes all elements that fit the expression.)
我们造一个需求出来:我们们想在一个无序的list(unordered list)里选取出所有没有ul子元素的li元素。
$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");
});
|
这里,我们选择了除了有ul子元素的所有的li元素,并为他们加上了边框。
(This selects all li elements that have a ul element as a child and removes all elements from the selection. Therefore all li elements get a border, except the one that has a child ul.)
[expression]的语法来自于XPath,它可以作为条件来过滤元素的属性。也许你现在想从页面中摘取出所有有name属性的a标签,那么来看看你该怎么做吧:
$(document).ready(function() {
$("a[name]").css("background", "#eee" );
});
|
这里我们给所有拥有name属性的a标签设置了背景色。
比起用name属性作为过滤条件来选取a标签,更常见的是用href属性做为条件,由于各个浏览器对于处理链接返回值的方式很不相同,这是会出问题的(This can be a problem as browsers behave quite inconsistently when returning what they think the "href" value is)(注意:这个问题已经在1.1.1版本后的版本中解决啦^_^)。为了匹配其中的一部分,我们可以用“包含选择”:*= 来代替等号:=。
$(document).ready(function() {
$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
|
直到现在,我们讲的选择器都是用来选取子元素或是过滤选取。那么如果我们想选取该元素的兄弟元素该怎么办呢?想象下,一个FQA页面,刚开始所有的答案都是隐藏的,当你点击的时候才显示出来,在jQuery中是这么做的:
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
$(this).next().slideToggle();
});
});
|
这里我们有了链式方式(chaining)来减少代码量并且获得更好的执行效率。
end()方法:返回第一个find()(即find(‘dd’))操作之前的匹配的元素集合。这样我们就可以继续在$(“#faq”)元素集合里执行第二个find()(即find(‘dt’))方法了。
click()方法中有一个匿名函数,当click句柄执行的时候,用$(this).next()来找到当前dt元素的下一个兄弟元素(dd),这样我们很快的就找到了当前问题的答案,并设置其为隐藏或显示。
分享到:
相关推荐
- `jquery-1.2.6` 和 `jquery-1.3.2` 是jQuery库的早期版本,对于了解jQuery的历史发展或者兼容旧项目有一定的价值。 学习jQuery,首先要掌握其核心的DOM操作,如选择元素(`$(selector)`)、元素操作(`.html()`,...
- `1.1.2`、`1.2.3`、`1.2.1`、`1.2.6`、`1.3.2`:这些是jQuery的不同版本。每个版本都有其特定的修复和改进,例如性能优化、新功能添加或API调整。开发者在项目中选择合适的版本时,需要考虑与现有代码的兼容性和...
jquery1.7 中文手册.chm JQuery_1.4_API.CHM jQuery文档.chm JSP API.chm Jsp帮助文档.chm JSP语法.chm Linux基础命令教程豪华版.chm Linux常用命令大全.chm lucene_3.6.1_API.CHM MySQL_5.1_zh.chm POI_3.8_API.CHM...
│ jquery1.7 中文手册.chm │ JQuery_1.4_API.CHM │ jQuery文档.chm │ JSP API.chm │ Jsp帮助文档.chm │ JSP语法.chm │ Linux基础命令教程豪华版.chm │ Linux常用命令大全.chm │ lucene_3.6.1_API.CHM │ ...
其次,`EasyUI-API+1.3.2.chm` 可能是针对 EasyUI 1.3.2 版本的 API 帮助文档,尽管版本稍旧,但其中包含的基本概念和组件使用方式在新版本中仍然适用。CHM 文件是微软的“HTML Help”格式,方便用户离线查阅。这个...