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 Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jQuery实现简单轮播图效果
Dec 27 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 array_filter除去数组中的空字符元素
2020/06/21 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
javascript的几种写法总结
2016/09/30 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
重命名批处理python脚本
2013/04/05 Python
python实现排序算法
2014/02/14 Python
Python中__call__用法实例
2014/08/29 Python
python开发之函数定义实例分析
2015/11/12 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
实习指导老师评语
2014/04/26 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
关于运动会的口号
2014/06/07 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
拖欠货款起诉状
2015/05/20 职场文书
中国合伙人观后感
2015/06/02 职场文书
python flask框架快速入门
2021/05/14 Python