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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 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
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
php判断当前操作系统类型
2015/10/28 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python对象及面向对象技术详解
2016/07/19 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
产品推广策划方案
2014/05/10 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
迎新生晚会主持词
2015/06/30 职场文书
高二英语教学反思
2016/03/03 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python