jQuery框架安装及jQuery特点介绍

落日映苍穹つ 2022-09-10 10:27 198阅读 0赞

jQuery框架安装及jQuery特点介绍，JQuery是一个便捷、简洁的JavaScript框架，封装了Js常用的功能代码，提供一种简便的Js设计模式，优化Html文档操作、事件处理、动画设计和Ajax交互。

**教程指路**

[黑马程序员web前端基础教程\_4天从零玩转jQuery][web_4_jQuery]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aqo54Gw57qn5pS26JeP5a62_size_20_color_FFFFFF_t_70_g_se_x_16]

[jQuery网页开发案例精讲][jQuery]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aqo54Gw57qn5pS26JeP5a62_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
jQuery

随着Web前端技术的不断发展，互联网上诞生了很多优秀的JavaScript框架，这些框架基本上都封装了JavaScript、DOM和Ajax等操作的功能为开发人员提供了更加快捷、强大的开发方式。常见的JavaScript框架有jQuery、Prototype、ExtJS和等。

jQuery因其简洁的语法和跨浏览器的兼容性特点，极大地简化了开发人员对DOM对象、事件处理、动画效果和Ajax的操作，目前已经从其他框架中脱颖而出，成为Web开发人员的最佳选择。

jQuery框架特点：jQuery是一个轻量级的脚本，其代码非常小巧；语法简洁易懂，学习速度快，文档丰富；支持CSS1~css3定义的属性和选择器；跨浏览器，支持的浏览器包括IE、FireFox、Chrome等；实现了JavaScript脚本和HTML代码的分离，便于后期编辑和维护；插件丰富可以通过插件扩展更多功能。

目前的jQuery最新版本是v3.5.1。由于jQuery在2.x版本以后就不再支持1E6/7/8浏览器，可以使用IE浏览器通过访问地址下载。如果需要下载其他版本的jQuery，只需要更改上述地址中的版本号，并使用IE浏览器即可快速下载。

jQuery使用非常简单，只要在HTML(或JSP)中引入一个外部JavaScript文件即可，其引入代码如下所示：  
![在这里插入图片描述][f70b66e0959a4c619a3674f47933c351.png]  
jQuery使用

上述代码表示引入当前目录下的“jquery-3.5.1.min.js”文件。将jQuery文件引入之后，就可以使用jQuery的各种功能了，下面通过简单的案例演示jQuery的使用。

1、创建项目

在Eclipse中创建一个名称为chapterl5的Web项目，在项目的WebContent目录下创建一个名称为js的文件夹，并将下载的jquery-1.11.3.min.js文件放置在文件夹中。

2、创建hello.jsp文件

在WebContent目录下创建一个名称为hell.jsp的文件，在该文件的标记中引入jQuery类库文件，并使用jQuery编写一个弹出对话框，其代码如下所示：  
![在这里插入图片描述][8bbb3fd0277442c78240bfb3be4cccc5.png]  
在上述代码中， ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) … … ) 表 示 页 面 加 载 完 成 后 执 行 匿 名 函 数 f u n c t i o n ( ) ， 相 当 于 J a v a S c r i p t 中 的 w i n d o w s . o n l o a d 函 数 。 这 里 还 可 以 简 写 成 (document).ready(function()\{……\})表示页面加载完成后执行匿名函数function()，相当于JavaScript中的windows.onload函数。这里还可以简写成 (document).ready(function()……)表示页面加载完成后执行匿名函数function()，相当于JavaScript中的windows.onload函数。这里还可以简写成().ready(function()\{……\})或$(function()\{……\})这样的形式。

3、运行程序并查看结果

发布项目并启动服务器，在浏览器的地址栏中输入http://localhost:8080/chapter15/hello.jsp访问hello.jsp，浏览器的显示“HelloWorld!”。因为hello.jsp页面文件载入后自动弹出了“HelloWorld!”对话框，这说明jQuery已经可以正常使用。

在jQuery中符号 的 使 用 最 为 频 繁 。 的使用最为频繁。 的使用最为频繁。本质上是一个函数，该函数根据其参数的不同可以实现不同的功能，如作为选择器使用、作为功能函数的前缀、创建页面的DOM节点等。此外，还可以使用jQuery代替 ， 例 如 ，例如 ，例如(document)可以写成jQuery(document)。$实际上是jQuery的简写形式。

[web_4_jQuery]: https://www.bilibili.com/video/BV1pt411H7D6?spm_id_from=333.999.0.0
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aqo54Gw57qn5pS26JeP5a62_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/35bfa652a9ed4c34a3e53bd9f839967f.png
[jQuery]: https://www.bilibili.com/video/BV1a4411w7Gx?spm_id_from=333.999.0.0
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aqo54Gw57qn5pS26JeP5a62_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/331177ef198149e3825b2f4dce1f5fc5.png
[f70b66e0959a4c619a3674f47933c351.png]: /images/20220829/0fe347da646c4428869e6f13fc6a3453.png
[8bbb3fd0277442c78240bfb3be4cccc5.png]: /images/20220829/3d1f64b668f547a49929718bf97016b7.png