📜  jQuery-概述

📅  最后修改于: 2020-10-23 08:13:24             🧑  作者: Mango


什么是jQuery?

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

  • DOM操作-通过使用称为Sizzle的跨浏览器开源选择器引擎,jQuery使选择DOM元素,协商它们和修改其内容变得容易。

  • 事件处理-jQuery提供了一种优雅的方式来捕获各种各样的事件,例如用户单击链接,而无需使用事件处理程序将HTML代码本身弄乱。

  • AJAX支持-jQuery使用AJAX技术可以帮助您开发响应迅速且功能丰富的网站。

  • 动画-jQuery带有许多内置的动画效果,您可以在网站中使用它们。

  • 轻量级-jQuery是一个非常轻量级的库-大小约为19KB(缩小并压缩)。

  • 跨浏览器支持-jQuery具有跨浏览器支持,并且在IE 6.0 +,FF 2.0 +,Safari 3.0 +,Chrome和Opera 9.0+上运行良好

  • 最新技术-jQuery支持CSS3选择器和基本XPath语法。

如何使用jQuery?

有两种使用jQuery的方法。

  • 本地安装-您可以在本地计算机上下载jQuery库并将其包含在HTML代码中。

  • 基于CDN的版本-您可以直接从Content Delivery Network(CDN)将jQuery库包含到HTML代码中。

本地安装

  • 转到https://jquery.com/download/下载可用的最新版本。

  • 现在,将下载的jquery-2.1.3.min.js文件放在您网站的目录中,例如/ jquery。

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

The jQuery Example
      
        
      
   
    
   
      

Hello

这将产生以下结果-

基于CDN的版本

您可以直接从Content Delivery Network(CDN)将jQuery库包含到HTML代码中。 Google和Microsoft提供了最新版本的内容交付。

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

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

The jQuery Example
      
        
      
   
    
   
      

Hello

这将产生以下结果-

如何调用jQuery库函数?

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

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

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

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

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

The jQuery Example
      

      
   
    
   
      
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文件,如下所示:

The jQuery Example
      
        
      
   
    
   
      
Click on this to see a dialogue box.

这将产生以下结果-

使用多个库

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

接下来是什么 ?

如果您不了解上述示例,请不要太担心。在接下来的章节中,您将很快了解它们。

下一章将尝试介绍一些来自常规JavaScript的基本概念。