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

本文作为《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代码就编写完成了。大家直接复制就可以使用。一旦点击超链接,效果如下:

是不是很简单?有没有特别的兴奋?那就让我们开始JQuery的学习吧。

本系列文章包括些什么?


由于时间的关系,本系列的文章大致会包括如下几个部分:

1、JQuery的入门

让初学者进入JQuery的世界

2、JQuery的选择器

让JQuery的使用者认识到JQuery选择器的伟大之处,除了选择器之外,其中还包含属性以及样式的处理。

3、JQuery Grid的介绍

介绍JQuery Grid的初步使用,让使用者爱上JQuery.

4、JQuery UI的介绍

认识到通用的UI,大家才会真正理解到为什么JQuery改变了我们写JS代码的习惯

5、大型实例应用

证明为什么我们选择了JQuery。

作者:薛敬明
出处:http://blog.youkuaiyun.com/rocket5725 
本文版权归作者和优快云共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值