jQuery教程
+ -

JQuery 简介

2019-09-09 2 0

什么是jQuery?

  • jQuery是John Resig在2006年创建的快速简洁的JavaScript库,它的座右铭是:写的少,多的做。
  • jQuery简化了HTML文档的遍历,事件处理,动画和Ajax交互,从而实现了快速的Web开发。
  • jQuery是一个JavaScript工具箱,旨在通过编写更少的代码来简化各种任务。

这是jQuery支持的重要核心功能的列表:

  • DOM manipulation - jQuery通过使用称为 Sizzle 的跨浏览器开源选项器引擎。
  • Event handling - jQuery提供了一种优雅的方式来捕获各种各样的事件,如用户单击链接,而无需将HTML代码本身与事件混在一起处理程序。
  • AJAX Support - jQuery帮助您使用AJAX技术开发响应迅速且功能丰富的网站。
  • Animations - jQuery带有许多内置的动画效果,您可以在网站中使用它们。
  • Lightweight - jQuery是一个非常轻量级的库-大小约为19KB(缩小并压缩)。
  • Cross Browser Support - jQuery具有跨浏览器支持,并且在IE 6.0 +,FF 2.0 +,Safari 3.0 +,Chrome和Opera 9.0+中运行良好
  • Latest Technology - jQuery支持CSS3selector和基本XPath语法。

如何使用jQuery?

有两种使用jQuery的方法。

  • 本地安装 − 您可以在本地计算机上下载jQuery库,并将其包含在HTML代码中。
  • CDN版本 − 您可以直接从Content Delivery Network(CDN)将jQuery库包含到HTML代码中。

本地安装

现在,您可以在HTML文件中包含 jquery 库,如下所示:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>

      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>

   <body>
      <h1>Hello</h1>
   </body>
</html>

这将产生以下输出:

Hello, World!

基于CDN的版本

您可以直接从Content Delivery Network(CDN)将jQuery库包含到HTML代码中。

在本教程中,我们一直在使用Google CDN版本的库。

现在,让我们使用来自Google CDN的jQuery库重写上面的示例。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>

   <body>
      <h1>Hello</h1>
   </body>
</html>

这将产生以下输出-

 Hello, World!

如何调用jQuery库函数?

几乎所有事情,当我们使用jQuery读取或操作文档对象模型(DOM)时,我们都需要确保在DOM准备就绪后立即开始添加事件等。

如果希望事件在页面上运行,则应在$(document).ready()函数内调用该事件。 DOM加载后以及页面内容加载之前,其中的所有内容都将加载。

为此,我们为文档注册一个ready事件,如下所示:

$(document).ready(function() {
   //do stuff when DOM is ready
});

要调用任何jQuery库函数,请使用HTML脚本标签,如下所示:

    <html>
       <head>
          <title>The jQuery Example</title>
          <script type = "text/javascript" 
             src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
          </script>

          <script type = "text/javascript" language = "javascript">
             $(document).ready(function() {
                $("div").click(function() {alert("Hello, world!");});
             });
          </script>
       </head>

       <body>
          <div id = "mydiv">
             Click on this to see a dialogue box.
          </div>
       </body>
    </html>

点击文字 “Click on this to see a dialogue box” 将弹出一个警告框。

如何使用自定义脚本?

最好在自定义JavaScript文件 custom.js 中编写我们的自定义代码,如下所示-

/* Filename: custom.js */
$(document).ready(function() {
   $("div").click(function() {
      alert("Hello, world!");
   });
});

现在,我们可以在HTML文件中包含 custom.js 文件,如下所示:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>

   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

使用多个库

您可以一起使用多个库,而不会互相冲突。如,您可以同时使用jQuery和MooTool javascript库。您可以检查jQuery
noConflict方法以获取更多详细信息。

0 篇笔记 写笔记

ObjectiveC 简介
Objective-C,Objective C入门,Objective C教程,ObjectiveObjective-C是一种通用的,面向对象的编程语言,它将Smalltalk样式的消息传递添加到C编程语言中。它是苹果公司用于OSX和iOS操作系统及其API(Cocoa和Cocoa Touch)的主......
SQLite 简介
SQLite是一个轻型的数据库,无需任何服务,无需任何配置的绿色数据库。SQLite是一个进程内库,它实现了一个自包含、无服务器、零配置、事务性SQL数据库引擎。SQLite的代码在公共域中,因此可以免费用于任何目的,无论是商业还是私有。SQLite是世界上部署最广泛的数据库,其应用程序比我们所能统......
设计模式 简介
设计模式(Designpattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码......
Perl 简介
Perl,一种功能丰富的计算机程序语言,运行在超过100种计算机平台上,适用广泛,从大型机到便携设备,从快速原型创建到大规模可扩展开发。Perl语言的应用范围很广,除CGI以外,Perl被用于图形编程、系统管理、网络编程、金融、生物以及其他领域。由于其灵活性,Perl被称为脚本语言中的瑞士军刀。Pe......
ADO.Net简介
ADO.NET是.Net Framework的一个模块,用于建立应用程序和数据源之间的连接。数据源可以是诸如SQL Server和XML。ADO.NET由可用于连接,检索,插入和删除数据的类组成。所有ADO.NET类都位于System.Data.dll中,并与位于System.Xml.dll中的X......
MongoDB 简介
什么是MongoDB ?MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统。在高负载的情况下,添加更多的节点,可以保证服务器性能。MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB 将数据存储为一个文档,数据结构由键值(key=>va......
MakeFile 简介
Make工具最主要也是最基本的功能就是通过makefile文件来描述源程序之间的相互关系并自动维护编译工作。而makefile文件需要按照某种语法进行编写,文件中需要说明如何编译各个源文件并连接生成可执行文件,并要求定义源文件之间的依赖关系。在 UNIX 系统中,习惯使用 Makefile 作为 m......
Libuv 网络简介
在 libuv 中,网络编程与直接使用 BSD socket 区别不大,有些地方还更简单,概念保持不变的同时,libuv 上所有接口都是非阻塞的。它还提供了很多工具函数,抽象了恼人、啰嗦的底层任务,如使用 BSD socket 结构体设置 socket 、DNS 查找以及调整各种 socket 参数......
简介
qt学习笔记......
MongoDB NoSQL 简介
NoSQL(NoSQL = Not Only SQL ),意即”不仅仅是SQL”。在现代的计算系统上每天网络上都会产生庞大的数据量。这些数据有很大一部分是由关系数据库管理系统(RDBMS)来处理。 1970年 E.F.Codd’s提出的关系模型的论文 “A relationalmodel of da......
Bochs 简介
Bochs(读音Box)一个基于LGPL许可发行开源代码的x86,x86-64 IBM PC兼容机的模拟器和调式工具。它支持X86 AMD64CPU,内存,硬盘,显示器,以太网卡,BISO及常见的兼容IBM PC的硬件外设的虚拟仿真。Bochs官网:http://bochs.sourceforge.......
C++ 简介
C++ 是一种静态类型的、编译式的、通用的、大小写敏感的、不规则的编程语言,支持过程化编程、面向对象编程和泛型编程。C++ 被认为是一种 中 级语言,它综合了高级语言和低级语言的特点。C++ 是由 Bjarne Stroustrup 于 1979 年在新泽西州美利山贝尔实验室开始设计开发的。C++ ......
Nasm 简介
机器语言每种类型的CPU都能理解它们自己的机器语言。机器语言里的指令是以字节形式在内存中储存的数字。每条指令有它唯一的数字码称为 操作代码 ,或简称为 操作码 。80x86处理器的指令大小不同。操作码通常是在指令的开始处。许多指令还包含指令使用的数据( 例如: 常量或地址)。机器语言很难直接进行编程......
AIML简介
AIML代表人工智能标记语言。 AIML是由 Alicebot 自由软件社区和 Richard S. Wallace博士在1995-2000期间开发。AIML用于创建或自定义Alicebot,这是一个基于A.L.I.C.E(人工语言互联网计算机实体)聊天框应用程序的免费软件。AIML标签以下是AI......
正则表达式 简介
除非您以前使用过正则表达式,否则您可能不熟悉一些术语。但是,毫无疑问,您已经使用过不涉及脚本的某些正则表达式概念。例如,您很可能使用 ? 和 * 通配符来查找硬盘上的文件。? 通配符匹配文件名中的 0 个或 1 个字符,而 * 通配符匹配零个或多个字符。像data(w)?.dat 这样的模式将查......
取消
感谢您的支持,我会继续努力的!
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

您的支持,是我们前进的动力!