`
Nainse
  • 浏览: 24301 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

jQuery入门手册1.3.2

阅读更多

 

难免有误,阅读注意

 

原文地址:http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

翻译:牛小超-Nainse

开始时间:20093516:38:13

 

该讲解是从jQuery的基础知识开始,一直到构建插件的高级技术。

Original: http://jquery.bassistance.de/jquery-getting-started.html
Author: Jörn Zaefferer

 

Similar Tutorials: jQuery CoreSelectorsAttributesTraversingManipulationEventsEffectsAjaxPlugins

 

这是一个介绍jQuery js 库的指导性文档。你需要具备一些jsdomdocument object model 文档对象模型)的基础知识。她是从最基础开始的,对于那些有必要的信息,我会尽可能详细的解释。这篇文档里包含了一个简单的“hello world”的例子,选择符和事件的基础知识(selector and event basics)AjaxFX以及一些用法(usage),还附带了一些插件的著作(authoring of plugins)

 

这篇文档没有提供“click me”的代码,而只提供了“copy me”的,我的意图是想请您复制他们(更好的做法是用自己的手指一个字符一个字符的敲出他们),然后亲自尝试着使用他们。复制这些例子,看看他们都能做什么,然后大胆的试着修改他们。

 

内容提要(Contents)

 

SETUP

在开始之前我们需要一个jQueryjs库,可以在main download page得到。jQuery Starterkit提供了一些标记(markup)和css配合这些工作。在下载并解压jQuery Starterkit之后,把jquery.js放到同一个目录下,并用你最喜欢的编辑器(我用DreamWeaver cs3)打开startkit.htmlcustom.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状态的。

 

为了确保这一点,我们需要注册一下domready事件:

$(document).ready(function() {

   // do stuff when DOM is ready

 });

 

放一个alert语句到这个函数里是没有什么意义的,因为alert的执行不依赖于dom是否已经被加载。所以让我们来点儿有难度的吧:当点击一个连接的时候alert一下^_-

 

首先,在<body>标签后加一个:

<a href="">Link</a>

 

现在,把$(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)。第一种是用cssXPath组合成一个字符串作为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");

   });

 });

 

还有许多其他的选择器是类似于cssXPath的语法的,更多的例子和变量、表达式可以在这里找到

 

onClickonChangeonSubmit这样的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.

我们造一个需求出来:我们们想在一个无序的listunordered 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中文api

    - `jquery-1.2.6` 和 `jquery-1.3.2` 是jQuery库的早期版本,对于了解jQuery的历史发展或者兼容旧项目有一定的价值。 学习jQuery,首先要掌握其核心的DOM操作,如选择元素(`$(selector)`)、元素操作(`.html()`,...

    jQuery库及相关资料集合

    - `1.1.2`、`1.2.3`、`1.2.1`、`1.2.6`、`1.3.2`:这些是jQuery的不同版本。每个版本都有其特定的修复和改进,例如性能优化、新功能添加或API调整。开发者在项目中选择合适的版本时,需要考虑与现有代码的兼容性和...

    68个常用开发手册

    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全部手册

    其次,`EasyUI-API+1.3.2.chm` 可能是针对 EasyUI 1.3.2 版本的 API 帮助文档,尽管版本稍旧,但其中包含的基本概念和组件使用方式在新版本中仍然适用。CHM 文件是微软的“HTML Help”格式,方便用户离线查阅。这个...

Global site tag (gtag.js) - Google Analytics