jQuery简介_动力节点Java学院整理


Posted in jQuery onJuly 04, 2017

江湖传言,全世界大约有80~90%的网站直接或间接地使用了jQuery。鉴于它如此流行,又如此好用,所以每一个入门JavaScript的前端工程师都应该了解和学习它。

jQuery这么流行,肯定是因为它解决了一些很重要的问题。实际上,jQuery能帮我们干这些事情:

  • 消除浏览器差异:你不需要自己写冗长的代码来针对不同的浏览器来绑定事件,编写AJAX等代码;
  • 简洁的操作DOM的方法:写$('#test')肯定比document.getElementById('test')来得简洁;
  • 轻松实现动画、修改CSS等各种操作。

jQuery的理念“Write Less, Do More“,让你写更少的代码,完成更多的工作!

jQuery版本

目前jQuery有1.x和2.x两个主要版本,区别在于2.x移除了对古老的IE 6、7、8的支持,因此2.x的代码更精简。选择哪个版本主要取决于你是否想支持IE 6~8。

从jQuery官网可以下载最新版本。jQuery只是一个jquery-xxx.js文件,但你会看到有compressed(已压缩)和uncompressed(未压缩)两种版本,使用时完全一样,但如果你想深入研究jQuery源码,那就用uncompressed版本。

使用jQuery

使用jQuery只需要在页面的<head>引入jQuery文件即可:

<html>
<head>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  ...
</head>
<body>
  ...
</body>
</html>

好消息是,当你在学习这个教程时,由于网站本身已经引用了jQuery,所以你可以直接使用:

'use strict';
alert('jQuery版本:' + $.fn.jquery);

$符号

$是著名的jQuery符号。实际上,jQuery把所有功能全部封装在一个全局变量jQuery中,而$也是一个合法的变量名,它是变量jQuery的别名:

window.jQuery; // jQuery(selector, context)
window.$; // jQuery(selector, context)
$ === jQuery; // true
typeof($); // 'function'

$本质上就是一个函数,但是函数也是对象,于是$除了可以直接调用外,也可以有很多其他属性。

注意,你看到的$函数名可能不是jQuery(selector, context),因为很多JavaScript压缩工具可以对函数名和参数改名,所以压缩过的jQuery源码$函数可能变成a(b, c)。

绝大多数时候,我们都直接用$(因为写起来更简单嘛)。但是,如果$这个变量不幸地被占用了,而且还不能改,那我们就只能让jQuery把$变量交出来,然后就只能使用jQuery这个变量:

$; // jQuery(selector, context)
jQuery.noConflict();
$; // undefined
jQuery; // jQuery(selector, context)

这种黑魔法的原理是jQuery在占用$之前,先在内部保存了原来的$,调用jQuery.noConflict()时会把原来保存的变量还原。

jQuery 相关文章推荐
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery实现点击关注和取消功能
Jul 03 #jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 #jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 #jQuery
jQuery表单设置值的方法
Jun 30 #jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 #jQuery
You might like
第三节 定义一个类 [3]
2006/10/09 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
php实现购物车功能(下)
2016/01/05 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
Bootstrap精简教程
2015/11/27 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
js的三种继承方式详解
2017/01/21 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
layui文件上传实现代码
2017/05/20 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
python中返回矩阵的行列方法
2018/04/04 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
交通事故协议书范文
2014/04/16 职场文书
食品销售计划书
2014/04/26 职场文书
委托书范本
2014/09/13 职场文书
详解Python为什么不用设计模式
2021/06/24 Python
无线电知识基础入门篇
2022/02/18 无线电