jQuery概述

简介: jQuery是一个快速、简洁的 JavaScript 框架,是继Prototype之后又一个优秀的 JavaScript 代码库。jQuery的设计宗旨是“WriteLess,DoMore”,即倡导写更少的代码,做 更多的事情。jQuery封装了 JavaScript 常用的功能代码,提供一种简便的 JavaScript 设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery

jQuery概述

什么是jQuery

jQuery是一个快速、简洁的 JavaScript 框架,是继Prototype之后又一个优秀的 JavaScript 代码库。jQuery的设计宗旨是“WriteLess,DoMore”,即倡导写更少的代码,做 更多的事情。jQuery封装了 JavaScript 常用的功能代码,提供一种简便的 JavaScript 设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容目前各种主流浏览器,其语言特点包括以下几个方面:

(1)快速获取文档元素。jQuery的选择机制构建于CSS的选择器,提供了快速查询DOM文档中元素的能力,而且大大强化了 JavaScript 中获取页面元素的方式。

(2)提供漂亮的页面动态效果。jQuery中内置了一系列的动画效果,可以开发出非常漂亮的网页,许多网站都使用jQuery的内置效果,例如淡入淡出、元素移除等动态特效。

(3)创建Ajax无刷新网页。使用Ajax可以开发出非常灵敏无刷新的网页,特别是开发服务器端网页时,需要客户端与服务器进行通信。如果不使用Ajax,每次数据更新后必须重新刷新整个网页,而使用Ajax特效后,可以对页面进行局部刷新,提供动态的效果。

(4)jQuery对基本 JavaScript 结构进行了增强,例如元素迭代和数组处理等操作。(5)增强的事件处理。jQuery提供了各种页面事件,可以避免程序员在HTML中添加太多的事件处理代码,最重要的是,其事件处理器消除了各种浏览器的兼容性问题。

(6)更改网页内容。jQuery可以修改网页中的内容,例如更改网页的文本、插入或者翻转网页图像,jQuery简化了原本使用 JavaScript 代码处理的方式。

JavaScript 与jQuery有本质的区别。 JavaScript 是一种语言,而jQuery是建立在 JavaScript 脚本语言上的一个基本库,把 JavaScript 进行了封装,利用jQuery可以更简单地使用 JavaScript 。jQuery是当前最流行的 JavaScript 库,封装了很多预定义的对象和实用函数,jQuery是一个轻量级的 JavaScript 库,压缩之后很小,与CSS、浏览器兼容。

配置jQuery环境

1.获取jQuery

在jQuery的官方网站 http://jquery.com/download/,可以直接下载jQuery的最新库。目前jQuery有三个版本。

(1)1.x:兼容IE6,该版本的使用最为广泛,官方只做BUG维护,功能不再新增。因此对一般项目来说,使用1.x版本就可以了,最终版本为1.12.4。

(2)2.x:不兼容IE6,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器,可以使用2x版本,最终版本为2.2.4。

(3)3.x:不兼容IE8以下的版本,只支持最新的浏览器,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本,最新版本为3.3.1。

jQuery官网图片:

2.jQuery库的类型说明

jQuery库分为两种,一种后缀是“. min. js”,是经过工具压缩后的版本,一般文件尺寸比较小,主要应用于产品和项目开发;另一种后缀是“.js”,是没有经过压缩的版本,主要用于测试、学习和开发。

另外,jQuery不需要安装,把下载的jQuery-1.11.2.js放到网站上的一个公共位置,想在某个页面上使用jQuery时,只需要在相关的HTML文档中引入该文件库即可。

3.在页面中引入jQuery

本书将jQuery-1.11.2. js放在目录js下。为了方便调试,在所提供的jQuery例子中使用相对路径。在实际项目中,应该根据实际需要调整jQuery库的路径。

要想使用jQuery库,使用如下语句先引入jQuery库:

<script src="js/jquery=1.11.2. js"></script>

例:

<!doctype html>
<html>
   <head>
     <meta charset="utf-8">
      <title>jQuery</title><script src="js/jquery-1.11.2. js"></script><!--引人jQuery库-->
      <script>
         $(document). ready(function(e){//网页加载完毕后执行
            alert("hello jQuery World!");//弹出一个警告框
         })
      </script>
   </head>
 <body>
 </body>
</html>

说明如下:

(1)$()是jQuery的缩写,可以在DOM中搜索与指定的选择器匹配的元素,并创建一个引用该元素的jQuery对象。

(2)通过jQuery对象选择document元素,将document元素封装成jQuery对象,然后调用jQuery对象的ready()方法,将自定义匿名函数添加到document元素上,该函数将在DOM结构加载完毕之后执行。

4.jQuery基本语法

jQuery语法是针对网页中的HTML元素选择编制的,可以对选中的HTML元素执行某些操作,最基本的jQuery语法格式如下所示:

$(selector). action()

其中,$()是jQuery的缩写;selector是选择器,表示选中网页文档中的哪些HTML元素;action()表示对选中的元素进行什么操作。

例:网页中p标记包含的一段文字,单击这段文字时,文字自动消失。

<!doctype html>
<html>
  <head>
     <meta charset="utf-8">
     <title>jQuery</title>
     <script src="js/jquery=1.11.2. js"></script>
     <script>
       $(document). ready(function(e){
         $("p"). click(function(){
            $(this). hide();
          });
        });
      </script>
   </head>
<body>
    <p>单击我,我会自动消失 </p>
</body>
</html>

说明:

$(“p”)是jQuery的一个选择器,用于选择网页中所有的p元素;

$(“p”).click()方法指定选中的p元素的click单击事件处理函数,click事件在用户单击元素对象时被触发。

$(this)是一个jQuery对象,表示当前引用的HTML元素对象(此处指p元素)

$(this). hide()表示选中当前的HTML元素,并将其隐藏。

相关文章
|
存储 缓存 安全
一文讲透认证授权的那些事
权限管理一直都是初级程序员学习的一大重点,也是一大难点,有单点登录,有联合登录,有session有Token,有各种权限框架,还有什么是RBAC,以及分布式下如何做权限管理。
1157 0
|
8月前
|
供应链 安全 算法
签名不等于可信:详解PE数字签名校验的漏洞与主动规避方案
本文探讨了CVE-2013-3900漏洞的原理及其影响,该漏洞允许攻击者在不破坏数字签名有效性的情况下,向PE文件中添加恶意代码。漏洞源于Windows对签名数据后附加数据的校验缺失,导致恶意软件可伪装成合法软件。文章分析了WinVerifyTrust函数的工作机制及修复方法,包括通过注册表启用严格签名校验(EnableCertPaddingCheck)。同时,提出了通过hook注册表函数主动规避漏洞的方法,确保安全软件在未启用严格校验时仍能检测潜在威胁。此研究对提升PE文件签名安全性具有重要意义。
|
11月前
|
监控 安全 Cloud Native
阿里云容器服务&云安全中心团队荣获信通院“云原生安全标杆案例”奖
2024年12月24日,阿里云容器服务团队与云安全中心团队获得中国信息通信研究院「云原生安全标杆案例」奖。
|
关系型数据库 MySQL 数据安全/隐私保护
已解决:mysql: [Warning] Using a password on the command line interface can be insecure.
已解决:mysql: [Warning] Using a password on the command line interface can be insecure.
1019 0
|
运维 网络架构
CIDR 与 VLSM:了解它们的工作原理
CIDR 与 VLSM:了解它们的工作原理
623 4
|
存储 安全 Java
如何保证 Java 类文件的安全性?
Java类文件的安全性可以通过多种方式保障,如使用数字签名验证类文件的完整性和来源,利用安全管理器和安全策略限制类文件的权限,以及通过加密技术保护类文件在传输过程中的安全。
329 4
|
机器学习/深度学习 人工智能 边缘计算
针对资源受限设备的 AI Native 应用轻量化微调技术
【8月更文第2天】随着人工智能(AI)技术的飞速发展,越来越多的应用程序开始在边缘计算和移动设备上部署机器学习模型。然而,这些设备通常具有有限的计算能力和存储空间。为了克服这些限制,本文将介绍一种针对资源受限设备的轻量化微调技术,旨在提高模型性能同时降低计算成本。
588 1
如何做好技术选型
在软件开发领域,几乎每天都有新的技术框架诞生、更新,一些新的概念更是层出不穷,技术选型时,难免让人无从抉择。对于技术选型,我个人有以下几点建议。
2088 0
|
存储 负载均衡 网络协议
|
算法 NoSQL Java
8. 「Java大师」教你如何用Spring Boot轻松实现高效「限流」!
8. 「Java大师」教你如何用Spring Boot轻松实现高效「限流」!
674 0