jQuery 是一个优秀的 javascript 的轻量级框架之一,封装了 dom 操作、事件、页面动画、异步操作等功能。特别值得一提的是基于 jquery 的插件非常丰富,大多数前端业务场景都有其封装好的工具框架
Look for Less,Do More
一。jQuery概述
1.jQuery概述
jQuery
是一个优秀的
javascript
的轻量级框架之一,封装了
dom
操作、事件、页面动画、异步操作等功能。
特别值得一提的是基于
jquery
的插件非常丰富,大多数前端业务场景都有其封装好的工具框架
2.jQuery版本
1.x
:兼容
IE678
,使用最为广泛的,官方只做
BUG
维护,功能不再新增。因此一般项目来说,使用
1.x
版
本就可以了,最终版本:
1.12.4 (2016
年
5
月
20
日
)
2.x
:不兼容
IE678
,很少有人使用,官方只做
BUG
维护,功能不再新增。如果不考虑兼容低版本的浏览器
可以使用
2.x
,最终版本:
2.2.4 (2016
年
5
月
20
日
)
3.x
:不兼容
IE678
,只支持最新的浏览器。除非特殊要求,一般不会使用
3.x
版本的,很多老的
jQuery
插
件不支持这个版本。目前该版本是官方主要更新维护的版本
开发版本与生产版本,命名为
jQuery-x.x.x.js
为开发版本,命名为
jQuery-x.x.x.min.js
为生产版本,开发版
本源码格式良好,有代码缩进和代码注释,方便开发人员查看源码,但体积稍大。而生产版本没有代码缩
进和注释,且去掉了换行和空行,不方便发人员查看源码,但体积很小。
jQuery下载和版本介绍
官网地址:http://jquery.com
注意事项:如果公司使用的老版本插件,我们jq升级后,可能会让插件失效....
* jquery-x.js 开发版本:有良好的缩进格式和注释,方便开发者阅读
* jquery-x.min.js 生产版本:代码进行压缩,体积小方便网络传输
jq本质上就是js的一个类库文件,我们使用它时,进行引入,就可以简化代码*
3.自定义js框架:
框架(Framework)是完成某种功能的半成品,抽取重复繁琐的代码,提供简洁强大的方法实现。
abc.js
// 抽取获取id的方法
function jQuery(id) {
return document.getElementById(id);
}
// 简化名称方案
function $(id) {
return document.getElementById(id);
}
引入外部文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义js框架</title>
<script src="../js/abc.js"></script>
</head>
<body>
<div id="myDiv">世界上最遥远的距离不是生与死,而是你亲手制造的BUG就在你眼前,你却怎么都找不到她。</div>
<script>
// 通过js原生的方式
// document.getElementById('myDiv').innerHTML='我是js修改的内容';
// jQuery('myDiv').innerHTML='我是js修改的内容';
$('myDiv').innerHTML='哈哈我是自定义js文件';
</script>
</body>
</html>
二。jQuery语法
1.jQuery环境引入
jQuery(一个快速、简洁的JavaScript框架)
<script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML引入Jquery</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv">世界上最远的距离,是我在if里你在else里,虽然经常一起出现,但却永不结伴执行。</div>
<script>
// 获得div标签的jq对象
$('#myDiv').html('我是jq修改的内容')
</script>
</body>
</html>
jQuery与js的区别
jQuery虽然本质上也是js,但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象。
通过js方式获取的是js对象,通过jQuery方式获取的是jQuery对象。两者的关系与区别总结如下:
1. jQuery对象与js对象相互转换
js --> jq
$(js对象) 或者 jQuery(js对象)
jq --> js
jq对象[索引] 或者 jq对象.get(索引)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jq与js对象相互转换</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv">通过不同方式获得文本内容</div>
<script>
// 通过js方式修改文本内容
let myDiv = document.getElementById('myDiv');
// myDiv.innerHTML='我是js方式修改的';
// 通过jq方式修改文本内容
let $myDiv = $('#myDiv');
// $myDiv.html('我是jq方式修改的')
// js对象和jq对象的:属性和方法不同通用
// myDiv.html('js操作jq函数');
// $myDiv.innerHTML='jq操作js属性';
// js -- 转换为 jq对象
// $(myDiv).html('js变成jq对象');
// jq 转换为 js对象 注意:jq对象本质上是数组,数组的每一个元素就是js原生对象
console.log($myDiv.length);
$myDiv[0].innerHTML='jq变成js对象';
</script>
</body>
</html>
2. 页面加载事件
js
window.onload=function(){}
jq
$(function(){})
区别
js:只能定义一次,如果定义多次,后加载会进行覆盖
jq:可以定义多次
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面加载事件</title>
<script src="../j