JQuery的使用方法汇总(1)——认识并学习JQuery

最新推荐文章于 2025-06-19 14:35:59 发布

原创最新推荐文章于 2025-06-19 14:35:59 发布 · 置顶 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #ExtJS #EXTJS #Extjs #ExtJs #jquery #jQuery #JQUERY #Jquery #JQuery

Web开发专栏收录该内容

24 篇文章

订阅专栏

本文作为《JQuery的使用方法汇总》系列的开篇，介绍了JQuery的基本概念，阐述了选择JQuery而非ExtJS的原因，包括其轻便性和JS库的优势，并详细讲解了如何下载、配置及初步使用JQuery，包括添加引用、入口函数、选择器的使用等。后续文章将涵盖JQuery的选择器、Grid和UI的介绍以及大型实例应用。

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

前言

最近在整理一些以前的博文，发现浏览数以及评价数最高的算是《ExtJS的使用方法汇总》系列，通过大家的反馈，这一系列的七篇文章基本可以让一个刚接触ExtJS的人学习并开始使用ExtJS，在这里，为了便于大家查找，重新贴出地址：

ExtJS的使用方法汇总(1)——配置和表格控件使用http://blog.youkuaiyun.com/rocket5725/article/details/4535323

ExtJS的使用方法汇总(2)——表单与输入控件http://blog.youkuaiyun.com/rocket5725/article/details/4538843

ExtJS的使用方法汇总(3)——树形结构http://blog.youkuaiyun.com/rocket5725/article/details/4551429

ExtJS的使用方法汇总(4)——拖放以及弹出窗口http://blog.youkuaiyun.com/rocket5725/article/details/4553726

ExtJS的使用方法汇总(5)——布局http://blog.youkuaiyun.com/rocket5725/article/details/4554730

ExtJS的使用方法汇总(6)——工具栏和菜单 http://blog.youkuaiyun.com/rocket5725/article/details/4555207

ExtJS的使用方法汇总(7)——数据存储与传输http://blog.youkuaiyun.com/rocket5725/article/details/4557183

ExtJS是我在上一个系统所采用的JS库，后来在实际的应用过程中，页面的速度加载方面存在了一定的瓶颈，虽然一直在试图优化，但是问题依旧存在。所以在后来的一个项目，我们选择了JQuery。

为了让更多的人更容易接触到JS，从本文开始，将陆续推出《Jquery的使用方法汇总》系列文章，欢迎大家继续支持并提出宝贵意见。

JQuery是什么?

JQuery的官网 http://jquery.com/ 上给出的定义就是" jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. "

大概的意思就是：JQuery是一种简捷快速的JavaScript库，她能够快速地处理web开发中的许多过程，比如：HTML文档、事件处理、动画、Ajax交互等；

最重要的一句解释就是：JQuery将改变你写JavaScirpt的方式。至于如何改变，大家在后续的教程中会发现。

为什么选择JQuery?

1.比ExtJS更轻便

这个不是定论，只是个人的感觉。

在前言部分，我已经说了为什么会选择JQuery，那就是发现ExtJS存在一定的瓶颈，或者说相对而言比较笨重。在项目进行到现在为止，在速度方面，JQuery的速度的确优于Ext

2.JS库本身的优势

自从接触了ExtJS后，我充分认识到了JS库带给我们的便利，很多复杂的代码在这些JS库中都变成了简单的函数调用，懒人会越来越懒，估计就是这个道理。

当你知道JS库的好处后，想丢都丢不掉了。

3.其他方面

比如强大的功能函数、丰富的UI、解决浏览器的兼容问题等等，本文就不再阐述，每个人选择JQuery都有他的理由，不过没有一个解决方案是解决所有问题的。

如何使用JQuery?

本文以“Hello JQuery !”为例，介绍JQuery的用法。

1.下载JQuery

在官网中，JQuery有两种格式的脚本可供下载：压缩版（适合发布使用，因文件的大小非常小）、非压缩版（适合调试使用）

如下图所示，目前网站上最新的版本是1.8.3，我们可以选择Minified版本 http://code.jquery.com/jquery-1.8.3.min.js，也可以选择Uncompressed版本 http://code.jquery.com/jquery-1.8.3.js。

2.配置JQuery

2.1 添加引用

用相对路径的方式引用即可

<html>
  <head>
    <title>JQuery学习系列教程</title>
  </head>
  <body>
    <a href="http://blog.youkuaiyun.com/rocket5725/">薛敬明的博客</a>
    //STEP 1
    <script src="jquery-1.8.3.min.js"></script>
    <script>
       
    </script>
  </body>
</html>

2.2 添加入口函数

这个有点类似于ExtJS的 Ext.onReady(function(){});

<html>
  <head>
    <title>JQuery学习系列教程</title>
  </head>
  <body>
    <a href="http://blog.youkuaiyun.com/rocket5725/">薛敬明的博客</a>
    //STEP 1
    <script src="jquery-1.8.3.min.js"></script>
    <script>
       //STEP 2
       $(document).ready(function(){
           
       });
    </script>
  </body>
</html>

$(document).ready()的写法涉及到了JQuery的语法，下一篇文章会提到语法的相关知识。

这个地方还可以简写为：

       $(function(){
           
       });

2.3 添加代码

<html>
  <head>
    <title>JQuery学习系列教程</title>
  </head>
  <body>
    <a href="http://blog.youkuaiyun.com/rocket5725/">薛敬明的博客</a>
    //STEP 1
    <script src="jquery-1.8.3.min.js"></script>
    <script>
       //STEP 2
       $(document).ready(function(){
           //STEP 3
           alert("Hello JQuery World!");
           
       });
    </script>
  </body>
</html>

为什么要把我们想执行的JS代码写到$(document).ready()内？一个原因就是防止文档在完全加载之前运行 JQuery 代码。这个跟ExtJS是相通的。

将上面部分的代码拷贝到记事本中，将文件名改为hello.html即可。

【注】不需要IIS服务器，这个是跟ExtJS的区别所在。

2.4 初探选择器

JQuery的强大还体现在选择器的强大，由于本章节内容只是JQuery的入门，所以不会深入去探讨，此地只是做个引路。

<html>
  <head>
    <title>JQuery学习系列教程</title>
  </head>
  <body>
    <a href="http://blog.youkuaiyun.com/rocket5725/">薛敬明的博客</a>
    //STEP 1
    <script src="jquery-1.8.3.min.js"></script>
    <script>
       //STEP 2
       $(document).ready(function(){
           //STEP 3
           alert("Hello JQuery World!");
           //STEP 4
           $("a").click(function(event){
              alert("Welcome to Xue's Blog!");
           });
       });
    </script>
  </body>
</html>

这样一来，一个简单的JQuery代码就编写完成了。大家直接复制就可以使用。一旦点击超链接，效果如下：