Jquery概述

117 阅读3分钟

一、jQuery介绍

1.1jQuery概述

jQuery是一个简洁快速的JavaScript框架。jQuery的设计宗旨是“write less,do more”,倡导写更少的代码,做更多的事。jQuery封装了一些常用的JavaScript的代码,提供了一套易于使用的API,实现了跨浏览器工作,使HTML文档的遍历操作、事件处理、动画设计和Ajax交互操作变得简单易行。

1.2jQuery框架的引入

jQuery的官方下载地址:htttp://www.jquery.com

1.3jQuery版本介绍(了解)

  • 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的支持

1.4jQuery的优势

  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插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。

1.5jQuery的引入

方式一:导入本地jquery

在需要使用jQuery的地方以js引入方式引入(本地导入) <script type="text/javascipt" src="jquery-x-x-x.js"></script>

注:src路径位置为你本机jQuery存放地址

方式二:导入在线jquery

我们可以通过在script的src属性中写一个网址来导入在线的jquery代码。 事实上,现在应用jquery的网站非常非常多,浏览器会在加载之前使用jquery的网站时就预先下载过jquery,因此到了我们这里就不用再次下载了,就算我们的jquery版本是一个新的没被浏览器加载过的版本,jquery的代码下载也会进行的很快,不过,如果你还是担心影响加载速度,本地导入jquery文件确实是最好的办法。

<script src="http://code.jquery.com/jquery-latest.js"></script><script> //在此书写你的jquery代码 </script>

1.6jQuery引入成功的测试

$(function(){ 代码 })

  • 是指$(document).ready(function(){}{})的简写
  • 用来在DOM加载完成之后执行一系列预先定义好的函数。

现在的「新人」依然可以学习 jQuery 的思想,因为以「新人」的水平,直接理解 Vue / React 的思想难度较大,jQuery 是一个很不错的中间过渡