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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery中map函数的两种方式
Apr 07 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jQuery实现高级检索功能
May 28 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
PHP最常用的正则表达式
2017/02/13 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
this在vue和小程序中的使用详解
2019/01/28 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
python装饰器decorator介绍
2014/11/21 Python
10款最好的Web开发的 Python 框架
2015/03/18 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Python教程之全局变量用法
2016/06/27 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
python实现验证码识别功能
2018/06/07 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
Python 下载及安装详细步骤
2019/11/04 Python
python实现从wind导入数据
2019/12/03 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
python SOCKET编程基础入门
2021/02/27 Python
PHP面试题-$message和$$message的区别
2015/12/08 面试题
小学生自我评价范文
2014/01/25 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
毕业设计致谢词
2015/05/14 职场文书
2016新年致辞
2015/08/01 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS