Tutorials:Getting Started with jQuery---1

最新推荐文章于 2025-08-10 06:12:57 发布

翻译最新推荐文章于 2025-08-10 06:12:57 发布 · 519 阅读

文章标签：

#tutorials #jquery #html #javascript #function #download

JQuery 专栏收录该内容

4 篇文章

订阅专栏

本文档作为jQuery库的简单介绍，适合具备JavaScript和DOM基础知识的读者。文章详细解释了helloworld示例、选择符、基本事件、AJAX、FX及插件等内容，并提供了实践性的copyme示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个向导是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所作的所有事情包括读取和包装ＤＯＭ能够正常运行，我们需要保证当ＤＯＭ准备好的时候就开始添加事件等等。

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

$(document).ready(function() {

   // do stuff when DOM is ready
 });

仅仅添加这一段代码显得没有什么意义，因为它不需要任何ＤＯＭ被加载。因此我们来一点复杂的：当点击一个连接的时候显示一个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)分开一样。

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

你可能感兴趣的链接：