jQuery.js - 前端必备的Javascript库

简介: jQuery.js

作者:WangMin
格言:努力做好自己喜欢的每一件事

jQuery.js 是什么?

jQuery是一个快速简洁、免费开源易用的JavaScript框架,倡导写更少的代码,做更多的事情 。它封装JavaScript常用的功能代码,提供了一种简便的JavaScript设计模式,以及我们开发中常用到的操作DOM的API,优化HTML文档操作、事件处理、动画设计和Ajax交互,使更多的网页交互效果简单化。

1.jpg

为什么要使用 jQuery.js

首先来看一个例子,用js 来给元素添加背景颜色,改变字体的颜色,案例如下如下:

<div id="box">添加背景颜色,改变字体的颜色</div>
#box{
   
   
    width:150px;
    height:150px;
    line-height: 30px;
    text-align: center;
    font-size: 16px;
    border:1px solid #ccc;
}

使用原生JavaScript来实现效果,代码如下:

<script type="text/javascript">
    window.onload=function(){
   
   
        var oBox=document.getElementById("box");
        oBox.onclick=function(){
   
   
            oBox.style.background="blue"
            oBox.style.color="#fff";
        }
    }
</script>

使用 jQuery.js 来实现效果,代码如下:

<script type="text/javascript" src="jQuery/jquery.js"></script>
<script type="text/javascript">
    $('#box').click(function(){
   
   
        $(this).css({
   
   
            "background":"blue",
            "color":"#fff"
        })
    });
</script>

网页效果如下:

2.gif

对比以上两种方法,实现的效果其实是一样的,可以看到使用jQuery的好处最直接的是:可以根据CSS选择器快速地获取DOM元素,在修改DOM元素的CSS样式时,与style标签的格式相似。

相比于原生的js代码,jQuery的优点就是 用很少的代码就可以实现很强大的功能,并且兼容性也好,现在很多用原生js考虑支持多浏览器等等,尤其是jquery的选择器比较强大,一般多用于实际项目的使用,减少开发周期

怎么获取 jQuery.js

1、从官网下载

jQuery.js 官方下载

3.png

2、在线项目引用地址

可以到网站 BootCDN 去查找项目所需要的jQuery.js 版本的在线地址。项目上线时, 一般使用比较靠谱的CDN资源库,用来减轻服务器负担。

4.png

这里面可以找到 jQuery.js 的最新版本与历史版本的在线地址,你只要按照你项目的需求引入相应的版本就可以了。

如果项目需要兼容IE低版本浏览器,可以选择1.x.x系列的版本,例如 jQuery.js 1.11.0,1.x.x系列的版本的缺点就是文件大小比较大。如果不需要兼容IE低版本浏览器,可以选择可以选择2.x.x系列的版本或者最新的3.x.x系列的版本,版本越高,里面包含的API更多,程序执行效率越高。

怎么使用 jQuery.js

1)引入 jQuery.js 文件

相信大家对引入外部的CSS样式文件的代码,那么引入外部的JS文件也是同样的,区别是引入的标签不一样,你只需要在HTML文件的任何地方引入 jQuery.js 文件,如下:

路径引入
<script type="text/javascript" src='文件路径' ></script>

建议将 jQuery.js 文件引入到HTML文件的最后,这样让DOM加载完成之后,更好地 执行jQuery.js 文件将网页效果完整的呈现出来。


以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
|
2天前
|
资源调度 JavaScript 前端开发
JavaScript进阶 - JavaScript库与框架简介
【7月更文挑战第5天】JavaScript库和框架构成了前端开发的核心,如jQuery简化DOM操作,Angular、React和Vue提供全面解决方案。选择时要明确需求,避免过度工程化和陡峭学习曲线。使用版本管理工具确保兼容性,持续学习以适应技术变化。示例展示了jQuery和React的简单应用。正确选择和使用这些工具,能提升开发效率并创造优秀Web应用。
|
1天前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
2天前
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
|
2天前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
|
3天前
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
14 0
|
3天前
|
监控 JavaScript 前端开发
JavaScript与Nest.js:打造高性能的服务器端应用
Nest.js是Node.js的渐进式框架,融合OOP、FP和FRP,提供模块化、装饰器和依赖注入,助建高性能服务器应用。选择Nest.js的原因包括模块化设计、简洁的装饰器API和高性能基础(如Express或Fastify)。开始使用需安装Node.js和`@nestjs/cli`,创建项目、编写控制器。深入学习涉及模块化、服务的依赖注入及中间件。安全性优化涵盖HTTPS、CORS策略、限流和性能监控。
|
Web App开发 JSON JavaScript
JavaScript及jQuery入门 【下】
什么是JavaScript 概述 JavaScript是一门世界上最流行的脚本语言 Java、JavaScript 历史 ECMAScript可以理解为是JavaScript的一个标准 最新版本已经到es6~ 但是大部分浏览器还停留在支持es5代码上 开发环境--线上环境,版本不一致 快速入门 引入
|
存储 JavaScript 前端开发
JavaScript及jQuery入门【上】
什么是JavaScript 概述 JavaScript是一门世界上最流行的脚本语言 Java、JavaScript 历史 ECMAScript可以理解为是JavaScript的一个标准 最新版本已经到es6~ 但是大部分浏览器还停留在支持es5代码上 开发环境--线上环境,版本不一致 快速入门 引入
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
10 2
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
8 1

热门文章

最新文章