开发者社区> 技术小胖子> 正文

jQuery入门指南教程

简介:
+关注继续查看

这个指南是一个对jQuery库的说明,要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子,选择器和事件基础,AJAX、FX的用法,以及如何制作jQuery的插件。 这个指南包括了很多代码,你可以copy它们,并试着修改它们,看看产生的效果。 
内容提要
  1. 安装
  2. Hello jQuery
  3. Find me:使用选择器和事件
  4. Rate me:使用AJAX
  5. Animate me(让我生动起来):使用FX
  6. Sort me(将我有序化):使用tablesorter插件(表格排序)
  7. Plug me:制作您自己的插件
  8. Next steps(下一步)
安装一开始,我们需要一个jQuery的库,最新的下载可以到这里找到。这个指南提供一个基本包含实例的包供下载.
下载:jQuery Starterkit
(译者Keel注:一定要下载这个包,光看文章不实践肯定是不行的。) 
下载后解压缩,然后用你最喜欢的文本编辑器打开starterkit.html和custom.js这两个文件。(译者Keel注:这两个就是例子文件,所有的例子都用这两个例子作出,custom.js写jQuery代码,starterkit.html观察效果.建议用editPlus打开) 
现在,我们就已经做好了一切准备来进行这个著名的"Hello world"例子.
本章的相关链接:Starterkit jQuery DownloadsHello jQuery在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:
$(document).ready(function() {// do stuff when DOM is ready});
放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.
$(document).ready(function() {$("a").click(function() {alert("Hello world!");});});
这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。
(译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。)
让我们看一下这些修改是什么含义。$("a") 是一个jQuery选择器(selector),在这里,它选择所有的a标签(译者Keel注:即<a></a>),$号是 jQuery “类”(jQuery "class")的一个别称,因此$()构造了一个新的jQuery 对象(jQuery object)。函数 click() 是这个jQuery对象的一个方法,它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.
这里有一个拟行相似功能的代码:
<a href="#" onclick="alert('Hello world')">Link</a>
不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样.
下面我们会更多地了解到选择器与事件.
本章的相关链接:jQuery Core jQuery Selectors jQuery EventsFind me:使用选择器和事件jQuery提供两种方式来选择html的elements,第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div > ul a"));第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。
为了测试一下这些选择器,我们来试着在我们starterkit.html中选择并修改第一个ordered list.
一开始,我们需要选择这个list本身,这个list有一个ID叫“orderedlist”,通常的javascript写法是document.getElementById("orderedlist").在jQuery中,我们这样做:
$(document).ready(function() {$("#orderedlist").addClass("red");});
这里将starterkit中的一个CSS样式red附加到了orderedlist上(译者Keel注:参考测试包中的css目录下的core.css,其中定义了red样式)。因此,在你刷新了starterkit.html后,你将会看到第一个有序列表(ordered list )背景色变成了红色,而第二个有序列表没有变化.
现在,让我们添加一些新的样式到list的子节点.
$(document).ready(function() {$("#orderedlist > li").addClass("blue");});
这样,所有orderedlist中的li都附加了样式"blue"。
现在我们再做个复杂一点的,当把鼠标放在li对象上面和移开时进行样式切换,但只在list的最后一个element上生效。
$(document).ready(function() {$("#orderedlist li:last").hover(function() {$(this).addClass("green");}, function() {$(this).removeClass("green");});});
还有大量的类似的CSSXPath例子,更多的例子和列表可以在这里找到。(译者Keel注:入门看此文,修行在个人,要想在入门之后懂更多,所以这段话的几个链接迟早是要必看的!不会又要翻译吧...^_^!)
每一个onXXX事件都有效,如onclick,onchange,onsubmit等,都有jQuery等价表示方法(译者Keel注:jQuery不喜欢onXXX,所以都改成了XXX,去掉了on)其他的一些事件,如ready和hover,也提供了相应的方法。
你可以在Visual jQuery找到全部的事件列表,在Events栏目下.
用这些选择器和事件你已经可以做很多的事情了,但这里有一个更强的好东东!
$(document).ready(function() {$("#orderedlist").find("li").each(function(i) {$(this).html( $(this).html() + " BAM! " + i );});});
find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一样。each()方法迭代了所有的li,并可以在此基础上作更多的处理。 大部分的方法,如addClass(), 都可以用它们自己的 each() 。在这个例子中, html()用来获取每个li的html文本, 追加一些文字,并将之设置为li的html文本。(译者Keel注:从这个例子可以看到.html()方法是获取对象的html代码,而.html('xxx')是设置'xxx'为对象的html代码)
另一个经常碰到的任务是在没有被jQuery覆盖的DOM元素上call一些方法,想像一个在你用AJAX方式成功提交后的reset:
$(document).ready(function() {// use this to reset a single form$("#reset").click(function() {$("form")[0].reset();});});
(译者Keel注:这里作者将form的id也写成了form,源文件有<form id="form">,这是非常不好的写法,你可以将这个ID改成form1或者testForm,然后用$("#form1")或者$("#testForm")来表示它,再进行测试。)
上面这个代码选择了所有的"form"元素,并在其中的第一个上call了一个reset()。如果你有一个以上的form,你可以这样做:
$(document).ready(function() {// use this to reset several forms at once$("#reset").click(function() {$("form").each(function() {this.reset();});});});
(译者Keel注:请注意一定要亲自将这些代码写在custom.js中并在starterkit.html上测试效果才能有所体会!必要时要观察starterkit.html的html代码)
这样你在点击Reset链接后,就选择了文档中所有的form元素,并对它们都执行了一次reset()。
还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list,你想要选择所有的没有ul子元素的li元素。
$(document).ready(function() {$("li").not(":has(ul)").css("border", "1px solid black");//原文为$("li").not("


     本文转自My_King1 51CTO博客,原文链接:http://blog.51cto.com/apprentice/1360625,如需转载请自行联系原作者



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
27716 0
新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】
  作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,而 CSS3 作为 CSS 的下一个版本,增加了圆角、旋转、阴影等强大的特性,甚至还可以实现需要 JavaScript 才能实现的复杂动画效果。
1183 0
《JavaScript和jQuery实战手册(原书第2版)》——3.2节教程:使用条件语句
本节书摘来自华章社区《JavaScript和jQuery实战手册(原书第2版)》一书中的第3章,第3.2节教程:使用条件语句,作者:David Sawyer McFarland,更多章节内容可以访问云栖社区“华章社区”公众号查看
1198 0
分享8个超棒的基于HTML5和jQuery的开发教程
日期:2011/12/15  来源:GBin1.com HTML5 和jQuery组合目前对于web开发人员来说是强大的工具之一,使用这个组合能够帮助你扩展你设计的局限,实现一些非常绚丽及其强大的web应用或者网 站。
728 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
19979 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23523 0
【推荐】10个既绚又实用的JQuery特效教程
导读:作者Aamir Baig在designersdare.com分享了一篇文章《10 Must See jQuery Latest Tutorials-Beginners and Advance Level》,文中对初学者和资深学者分别提供了不同级别的教程,使用JQuery做出的既炫丽又实用的效果,现将本文摘译,以下是文章内容: 此篇文章是JQuery高级教程,但对初学者学习JQuery也有一定的帮助。
757 0
21115
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载