【jQuery】初识JavaScript函数库：jQuery

一句话描述jQuery和JavaScript的关系：jQuery 是 JavaScript 的一个 函数库。就像STL是C++的一个函数库一样。

什么是JQuery

1. **jQuery 是一个 JavaScript 函数库。**就像是C++中的STL库、JDBC的MySQL驱动包库一样。都是大佬们把优秀和高效的JavaScript操作语句封装起来的函数，方便我们这些弱鸡程序员也能高效开发。😆 😆
2. 能够对HTML元素、CSS元素、JS元素进行操作，并提供了其他额外的功能。
3. 就是简化了原生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的对比

1. 加载速度

   • 传统的JS方式页面加载会存在覆盖问题，加载比JQ慢。因为要等整个页面加载完毕，如图片和其他资源，才会加载JS。
   • JQ的加载比JS加载要快！因为JQ是当整个dom树结构绘制完毕就会加载，不用等到所有的外部资源都加载完。

2. 覆盖与顺序问题

   • JS后面的相同内容会覆盖掉前面的内容。
   • JQ不存在覆盖问题，加载的时候是顺序执行。

3. 互相操作问题

   • 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>