jQuery.js - 前端必备的Javascript库

原创已于 2023-11-09 13:56:28 修改 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #jquery

于 2023-11-09 13:55:20 首次发布

前端 Javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了jQuery.js，一个简洁的JavaScript框架，如何通过其强大的DOM操作能力和CSS选择器简化网页交互。讲解了为何选择jQuery，如何获取和使用不同版本，以及推荐的引入方式。

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

jQuery.js 是什么？

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

在这里插入图片描述

为什么要使用 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>

网页效果如下：
在这里插入图片描述

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

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

怎么获取 jQuery.js

1、从官网下载

jQuery.js 官方下载

在这里插入图片描述
2、在线项目引用地址

可以到网站 BootCDN 去查找项目所需要的jQuery.js 版本的在线地址。项目上线时，一般使用比较靠谱的CDN资源库，用来减轻服务器负担。
在这里插入图片描述
这里面可以找到 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 文件将网页效果完整的呈现出来。

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