Tutorials:Getting Started with jQuery---1

 

这个向导是jQuery库的一个简单介绍。当然你需要有JavaScript和DOM的基本知识。这份向导从最基本的开始讲起,同时解释了必要的细节。它把噢噢喊了简单的helloworld例子、选择符(selector)、基本事件、AJAX、FX以及使用和著作的插件。

 

这份向导没有包含任何"click me"的例子。之所以只提供"copy me"的例子的目的就是为了让你自己动手来实现它们。拷贝一个实例,看看它如何工作,然后去修改它。

 

SETUP

 

为了开始,我们需要jQuery的库,你可以从main download page来获取它。 jQuery Starterkit 提供了一些工作所需要的标记和css。下载完之后,将它解压,将jquery.js放到同一个目录,同时用编辑器将starterkit.html和custom.js打开,同时把html文件用浏览器打开。 

现在我们就完成了进行hello world的所有准备工作。

其他你可能感兴趣的链接:

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(在这个例子中我们假设html文件和jquery.js放在同一个目录下)。两个加了注释的地方指明了这段代码中我们接下来要修改的模板部分。

为了保证我们使用jQuery所作的所有事情包括读取和包装DOM能够正常运行,我们需要保证当DOM准备好的时候就开始添加事件等等。

为此,我们注册了一个事件。

$(document).ready(function() {

   // do stuff when DOM is ready
 });
仅仅添加这一段代码显得没有什么意义,因为它不需要任何DOM被加载。因此我们来一点复杂的:当点击一个连接的时候显示一个alert。
下面的代码添加到<body>中:
 <a href="">Link</a>

更新e $(document).ready 处理器:

 $(document).ready(function() {
   $("a").click(function() {
     alert("Hello world!");
   });
 });
当你点击link链接的时候,就会弹出一个hello world的alert。你可以把这段代码考入custom.js当中,当你点击starterkit.html中的任何
链接的时候,也会出现同样的效果。
让我们来看看我们到底做了什么:$("a")是一个jQuery的选择符,在这个例子中,它选择了所有的a元素。 $是jQuery"class"的一个别名,
因此$()就构造了一个jQuery的新对象。click()方法则是jQuery对象的一个方法。它为所有选择的元素绑定了单击的事件。(在这个例子中,
是一个链接)。

这和下面的代码相似:

 <a href="" οnclick="alert('Hello world')">Link</a>

这样区别就很明显,我们不必为所有单独的元素写onclick事件。我们的html和js行为有了明显的区分,就像我们把结构和表现层(css)分开一样。

通过这种想法,我们来继续探讨选择符和事件。

你可能感兴趣的链接:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值