jQuery简介

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:'Write less, do more.'(让你用更少的代码完成更多的事情)
简述:jQuery其实就是内部封装了原生的js代码(还额外添加了很多的功能)
目的:能够实现通过书写更少的代码 完成js操作

// 类似于python中的模块,在前端模块中统称为'类库'

jQuery的优势

  1. 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。
  2. 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。
  3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。
  4. 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。
  5. Ajax操作支持。jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。
  6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。
  7. 插件扩展开发。jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。

jQuery导入

jQuery版本:

1.x:兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
2.x:不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
3.x:不兼容IE678,只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。

jQuery导入问题:

jQuery在使用的时候也是需要导入的,但是jQuery的文件非常小,基本不影响网络速度。

jQuery下载:

npm增加jquery jquery import_json

jQuery版本选择:

最新版本:

压缩版本:压缩之后的版本将很多变量名全部使用英文字母代替了所以,占用内存更小
		//  (建议生产环境中使用)
未压缩版本:可以更清晰的看到底层的js代码,占用内存更高 
		//  (建议学习阶段可以使用)

npm增加jquery jquery import_jquery_02

其他版本:下滑到页面最下方 CDN里可选择想要的版本。

npm增加jquery jquery import_npm增加jquery_03

jQuery导入:

方式一:本地导入:需要提前下载,无需网络

直接点击压缩版或未压缩版:将代码全部复制下来,粘贴到js文件中,使用html文件导入该文件即可

npm增加jquery jquery import_jquery_04

方式二:CDN方式导入需要基于网络

CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

DDN服务是收费的,为了提升网站的效率,很多公司都会定期购买CDN。所以当我们访问某些网络突然变卡了,可能是他没有续费CDN。
该网站提供了前端很多免费的CDN服务。具体导入jQuery服务如下:

npm增加jquery jquery import_前端_05

npm增加jquery jquery import_npm增加jquery_06

npm增加jquery jquery import_npm增加jquery_07

npm增加jquery jquery import_javascript_08

优化:

我们如果想要导入jQuery的话,如果重新创建html环境,每次都要复制源码或者去复制远程CDN比较麻烦。 这里就利用pycharm设置一个自动添加的功能。

npm增加jquery jquery import_npm增加jquery_09