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

目录
相关文章
|
19小时前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
|
21小时前
|
移动开发 前端开发 JavaScript
前端高效开发JavaScript库!
前端高效开发JavaScript库!
|
1天前
|
JavaScript 前端开发 Go
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
|
2天前
|
移动开发 JavaScript 前端开发
Phaser和Three.js是两个非常流行的JavaScript游戏框架
【5月更文挑战第14天】Phaser是开源的2D游戏引擎,适合HTML5游戏开发,内置物理引擎和强大的图形渲染功能,适用于消消乐等2D游戏。Three.js是基于WebGL的3D库,用于创建3D场景和应用,支持各种3D对象和交互功能,广泛应用于游戏、可视化等领域。选择框架取决于项目需求,2D选Phaser,3D选Three.js。
15 4
|
2天前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端的技术探索
【5月更文挑战第12天】Vue.js是渐进式前端框架,以其简洁和强大的特性深受开发者喜爱。它聚焦视图层,采用MVVM模式实现数据与视图的双向绑定,简化开发。核心特性包括响应式数据绑定、组件化、模板系统和虚拟DOM。通过创建Vue实例、编写模板及定义方法,可以构建交互式前端,如计数器应用。Vue.js让复杂、交互式的前端开发变得更加高效和易维护。
|
2天前
|
JavaScript 前端开发
深入了解前端框架Vue.js的响应式原理
本文将深入探讨Vue.js前端框架的核心特性之一——响应式原理。通过分析Vue.js中的数据绑定、依赖追踪和虚拟DOM等机制,读者将对Vue.js的响应式系统有更深入的理解,从而能够更好地利用Vue.js构建灵活、高效的前端应用。
|
Web App开发 JavaScript 前端开发
《jQuery与JavaScript入门经典》——2.7 问与答
就Cookie调试而言,您只需知道是否启用了Cookie、浏览器设置了哪些Cookie、这些Cookie的值是什么以及它们什么时候到期。这些信息都可在Firebug的Cookies选项卡中找到。Chrome和Internet Explorer在开发人员控制台中提供了类似的功能。
1132 0
|
JavaScript 前端开发
《jQuery与JavaScript入门经典》——2.6 小结
您还完成了多个调试HTML、CSS和JavaScript问题的示例。您在本章学到的调试方法对阅读本书以及开发项目很有帮助,因为这些方法有助于消除常见的简单语法错误,为您节省大量时间,避免令人沮丧的情况发生。
1221 0
|
JavaScript 前端开发
《jQuery与JavaScript入门经典》——1.4 问与答
为渲染HTML以及与JavaScript交互,浏览器使用了一个引擎,这个引擎对来自服务器的数据进行分析、创建对象并将其交给图形渲染引擎,后者再将这些对象显示到屏幕上。由于浏览器使用的引擎各不相同,因此它们解释脚本的方式存在细微差别,尤其是未标准化的边缘元素。
1227 0
|
前端开发 JavaScript
《jQuery与JavaScript入门经典》——1.3 小结
在本章中,您学习了Web服务器和浏览器通信的基本知识、GET和POST请求的差别以及服务器端和客户端脚本的用途,还学习了DOM以及浏览器如何使用它来渲染显示给用户的网页。
1392 0