web前端开发之JavaScript:初识jQuery

运气男孩 发表于 2020/08/06 22:50:53 2020/08/06
【摘要】 在第二阶段初步了解了一下jQuery之后,现对jQuery做一个小小的总结。 首先,在学jQuery之前,我们得知道jQuery是什么?它是做什么的?有什么特色?业界的对它的评价又是怎样?如何进行安装配置的?这里我将一一说明

在第二阶段初步了解了一下jQuery之后,现对jQuery做一个小小的总结。

首先,在学jQuery之前,我们得知道jQuery是什么?它是做什么的?有什么特色?业界的对它的评价又是怎样?如何进行安装配置的?这里我将一一说明。


什么是jQuery?

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性

  • 有独特的链式语法和短小清晰的多功能接口;

  • 具有高效灵活的css选择器,并且可对CSS选择器进行扩展;

  • 拥有便捷的插件扩展机制和丰富的插件。

  • 兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。


为什么使用 jQuery ?

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。

很多大公司都在使用 jQuery, 例如:

  • Google

  • Microsoft

  • IBM

  • Netflix


jQuery 的功能概括

快速获取文档元素

jQuery的选择机制构建于Css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。


提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果,可以开发出非常漂亮的网页,许多网站都使用jQuery的内置的效果,比如淡入淡出、元素移除等动态特效。


创建AJAX无刷新网页

AJAX是异步的JavaScript和XML的简称,可以开发出非常灵敏无刷新的网页,特别是开发服务器端网页时,比如PHP网站,需要往返地与服务器通信,如果不使用AJAX,每次数据更新不得不重新刷新网页,而使用AJAX特效后,可以对页面进行局部刷新,提供动态的效果。


提供对JavaScript语言的增强

jQuery提供了对基本JavaScript结构的增强,比如元素迭代和数组处理等操作。


增强的事件处理

jQuery提供了各种页面事件,它可以避免程序员在HTML中添加太多事件处理代码,最重要的是,它的事件处理器消除了各种浏览器兼容性问题。


更改网页内容

jQuery可以修改网页中的内容,比如更改网页的文本、插入或者翻转网页图像,jQuery简化了原本使用JavaScript代码需要处理的方式。 

简单通俗概括来说就是:

1、html 的元素选取

2、html的元素操作

3、html dom遍历和修改

4、js特效和动画效果

5、css操作

6、html事件操作

7、ajax异步请求方式


jQuery的安装

网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法:

  • 从 jquery.com 下载 jQuery 库

  • 使用npm或Yarn下载jQuery

  • 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

下载 jQuery

两个版本的 jQuery 可供下载:

Production version - 用于实际的网站中,已被精简和压缩

Development version - 用于测试和开发(未压缩,是可读的代码)

以上两个版本都可以从 jquery.com官网中下载。

jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:

<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

替换方法

如果不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。

Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址,如果你站点用户是国外的可以使用谷歌和微软。

百度 CDN:

<head>
    <script  src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">    </script>
</head>

Google CDN

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
</head>

优势:许多用户在访问其他站点时,已经从百度、新浪、谷歌或微软加载过 jQuery。所以结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度


jQuery 使用版本

我们可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本:

语言评价

    jQuery 是继prototype 之后又一个优秀的轻量级JavaScript 框架。其宗旨是———“Write Less, Do More”,写更少的代码,做更多的事情。 它是一个快速和简洁的JavaScript 库,可以简化HTML 文档元素的遍历,事件处理,动画和Ajax 交互以实现快速Web 开发,它被设计用来改变编写JavaScript 脚本的方式。


    jQuery 的文档非常丰富,因为其轻量级的特性,文档并不复杂,随着新版本的发布,可以很快被翻译成多种语言,这也为jQuery 的流行提供了条件。jQuery 被包在语法上,jQuery 支持CSS1-3 的选择器, 兼容IE 6.0+, FF 2+,Safari 3.0+, Opera 9.0+, Chrome 等浏览器。同时,jQuery 有约几千种丰富多彩的插件大量有趣的扩展和出色的社区支持,这弥补了jQuery功能较少的不足并为jQuery 提供了众多非常有用的功能扩展。加之其简单易学,jQuery 很快成为当今最为流行的JavaScript 库,成为开发网站等复杂度较低的Web 应用程序的首选JavaScript 库,并得到了大公司如微软,Google 的支持。


    jQuery 最有特色的语法特点就是与CSS 语法相似的选择器,并且它支持CSS1 到CSS3 的几乎所有选择器,并兼容所有主流浏览器,这为快速访问DOM 提供了方便。 


关于web前端开发之JavaScript:初识jQuery就到这里了,咱们下次再会!

书山有路勤为径,学海无涯苦作舟。加油!


每篇一句:老骥伏枥,志在千里。


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。