当前位置:首页 > 前端开发 > 正文内容

jQuery.js - 前端必备的Javascript库

邻居的猫1个月前 (12-09)前端开发1289

作者: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 文件将网页作用完好的出现出来。


以上仅是个人见解,若有不足之处欢迎在下方谈论指出,那就先共享到这儿!! 😄 后续持续更新!!

扫描二维码推送至手机访问。

版权声明:本文由51Blog发布,如需转载请注明出处。

本文链接:https://www.51blog.vip/?id=424

分享给朋友:

“jQuery.js - 前端必备的Javascript库” 的相关文章

HTML简略网页制造

HTML简略网页制造

网页作用预览 这个网页包括图片,链接,字体设置,表格等 初学者最好手敲代码,更快了解元素和结构 完好的代码放在最终了 一:代码怎样变成网页 之前咱们安装了xampp,发动xampp里的apache及sql 在xampp下找到htdocs目录 新建文件夹改名后缀为.php即可 将新建文件用记事本翻开...

css命名, CSS 命名规范的重要性

1. 有意义:选择器或类的名称应该描述它们所应用的元素或内容。例如,`.mainheader` 或 `.buttonsubmit`。2. 简洁:避免使用过于冗长的名称,但也要确保它们足够描述性。例如,`.navbar` 而不是 `.navigationbar`。3. 一致:在项目中保持一致的命名约定...

html5网站欣赏,引领网页设计新潮流

html5网站欣赏,引领网页设计新潮流

1. 设计之家: 2. CSDN博客: qwe2 3. 优设网: 4. 博客园: 这些资源提供了各种风格的HTML5网站设计案例,从创意型到交互式,再到单页网站,涵盖了丰富的内容和设计技巧,相信会对你的学习和设计灵感有所帮助。HT...

css中字体加粗, 什么是字体加粗?

css中字体加粗, 什么是字体加粗?

`normal`:默认值,正常字体 `bold`:加粗字体 `bolder`:比`bold`更粗 `lighter`:比`normal`更细 `100` `900`:数值表示,100最细,900最粗例如,如果你想将一个元素的字体加粗,你可以这样写:```cssp { fontweight: b...

html多行文本框

html多行文本框

HTML多行文本框:提升网页交互体验的关键元素在网页设计中,多行文本框是一个不可或缺的元素,它允许用户输入大量的文本信息,如文章、评论、反馈等。HTML多行文本框不仅能够提升网页的交互性,还能为用户提供更加便捷的输入体验。本文将详细介绍HTML多行文本框的使用方法、属性设置以及在实际应用中的技巧。...

html5网页前端设计,打造搜索引擎友好与用户体验并重的现代网页

html5网页前端设计,打造搜索引擎友好与用户体验并重的现代网页

3. 表单改进:HTML5 对表单进行了许多改进,包括新的输入类型(如日期、时间、颜色、范围等)和表单验证功能。这些改进使得创建更友好、更易于使用的表单变得更加容易。4. Canvas 和 SVG:HTML5 引入了 `` 元素,它提供了一个绘制图形的画布,使得开发者可以创建动态的图形和动画。同时,...