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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
纯jQuery实现前端分页功能
Mar 23 jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery实现开关灯效果
Aug 02 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
url decode problem 解决方法
2011/12/26 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
过虑特殊字符输入的js代码
2010/08/05 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
解析js如何获取css样式
2016/12/11 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python 数据结构之队列的实现
2017/01/22 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
python实现雨滴下落到地面效果
2018/06/21 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
通报表扬范文
2015/01/17 职场文书
比赛主持人开场白
2015/05/29 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript