一句话描述jQuery和JavaScript的关系:jQuery 是 JavaScript 的一个 函数库。就像STL是C++的一个函数库一样。
什么是JQuery
- **jQuery 是一个 JavaScript 函数库。**就像是C++中的STL库、JDBC的MySQL驱动包库一样。
都是大佬们把优秀和高效的JavaScript操作语句封装起来的函数,方便我们这些弱鸡程序员也能高效开发。
😆 😆 - 能够对HTML元素、CSS元素、JS元素进行操作,并提供了其他额外的功能。
- 就是简化了原生JavaScript对DOM和BOM的操作。
**从原生JS出发,快速理解JQ: **
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQ</title>
<script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<div id="div1">div1....</div>
<div id="div2">div2....</div>
<script type="text/javascript">
//1. 通过js方式来获取名称叫div的所有html元素对象
var divs = document.getElementsByTagName("div"); //获取所有div标签放在一个集合(数组)里
alert(divs.length); //可以将其当做数组来使用
for (var i = 0; i < divs.length; i++) {//对divs中所有的div 让其标签体内容变为"aaa"
divs[i].innerHTML = "aaa"; //显示在页面上
}
//2. 通过jq方式来获取名称叫div的所有html元素对象
var $divs = $("div");
alert($divs.length);//也可以当做数组使用
//对divs中所有的div 让其标签体内容变为"bbb" 使用jq方式
$divs.html("bbb");
</script>
</body>
</html>
版本
下载的JS库中有两个版本:
jquery-x.x.x.js
jquery-x.x.x.min.js
- 第一个版本是用于学习阅读的;因为文件大,里面含有非常全面的注释和缩进;
- 第二个版本(即含有min)是用于现实开发的;因为文件小,里面全是精简后的代码;
- 两个版本的作用完全一致;
详细说明:
- 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插件不支持这个版本。
- 目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)
JQuery与JavaScript的对比
-
加载速度
- 传统的JS方式页面加载会存在覆盖问题,加载比JQ慢。因为要等整个页面加载完毕,如图片和其他资源,才会加载JS。
JQ的加载比JS加载要快!
因为JQ是当整个dom树结构绘制完毕就会加载,不用等到所有的外部资源都加载完。
-
覆盖与顺序问题
- JS后面的相同内容会覆盖掉前面的内容。
JQ不存在覆盖问题
,加载的时候是顺序执行
。
-
互相操作问题
- DOM对象无法操作JQ对象里面属性和方法
- JQ对象无法操作JS里面的属性和方法!
- 在有些情况下,需要JQ对象操作JS对象,或者是JS对象操作JQ对象,那应该怎么办呢?
- 幸好,它们之间存在互相转换的逻辑关系。
JS与JQ的互相转换:
//JS与JQ的互相转换
jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
js -- > jq : $(js对象)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQ</title>
<script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<div id="div1">div1....</div>
<div id="div2">div2....</div>
<script type="text/javascript">
// js转jq
var divs = document.getElementsByTagName("div");
alert(divs.length);
for(var i=0;i<divs.length;i++){
$(divs[i]).html("js转jq成功!");
}
//jq转js
var $divss=$("div");
$divss[0].innerHTML="jq转js成功!"; //方式一
$divss.get(1).innerHTML="jq转js成功!!!"; //方式二
</script>
</body>
</html>