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: 后续继续更新!!

目录
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
38 0
|
7天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
15天前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
31 4
|
13天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
13天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
21 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
15天前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
|
18天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
25 1
|
23天前
|
前端开发 JavaScript
除了 jsPDF,还有哪些前端库可以用于生成 PDF?
【10月更文挑战第21天】这些前端库都有各自的特点和优势,你可以根据具体的项目需求、技术栈以及对功能的要求来选择合适的库。不同的库在使用方法、性能表现以及功能支持上可能会有所差异,需要根据实际情况进行评估和选择。
|
19天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
16 1
|
20天前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。