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用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery实现评论模块
Aug 19 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
Jquery Fade用法详解
Nov 06 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数据类型之布尔型的介绍
2013/04/28 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
JavaScript知识点整理
2015/12/09 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
Python下载懒人图库JavaScript特效
2015/05/28 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
django 简单实现登录验证给你
2019/11/06 Python
python通过链接抓取网站详解
2019/11/20 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
追悼会子女答谢词
2014/01/28 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
yy婚礼主持词
2014/03/14 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
出国留学自荐信模板
2015/03/06 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
maven依赖的version声明控制方式
2022/01/18 Java/Android