jQuery概述

jQuery概述

学习jQuery之前首先要明白前端工程师的主要工作是什么，或者说前端工程师的成长之路有哪些等级：

前端工程师的工作

1.菜鸟级： 设计图的还原，就是根据PSD文件，写HTML+CSS。

2.入门级： 加页面特效。轮播图、菜单、选项卡、无缝滚动等等。
HTML5+CSS3炫酷页面，手机端页面。
Canvas游戏。
jQuery是页面特效的完美解决方案。

3.普通级： 碰到了数据，拿到了后台工程师的数据，组件页面，Ajax。

4.高端级： 自己写服务，自己写后台，Node.js。

5.大神级： 前端架构师，MVC，路由控制，后台协作。Angular、设计模式等等。

总结：前端开发工程师的成长之路，一定要制作页面特效。而jQuery就是制作页面特效的时候大家都比较青睐的一种解决方案。

特效就是【页面元素能够根据人的动作，而产生交互的变化】。

如：

	给元素加监听	 document.getElementById(“box”).onclick = function(){}
	改变元素的CSS样式   	box.style.backgroundColor = “red”
	改变元素的类    			box.className = “haha”
	改变元素的属性   		img.src = “1.jpg”
	动画    					setInterval

这些技术在原生JS中实现的时候，会出现很多问题，jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）而jQuery可以彻底解决js中的诸多问题！

jQuery有三条产品线：
jQuery1.x.x : 兼容IE6、7、8，花了很大的气力让IE6、7、8等低级浏览器都兼容。
jQuery2.x.x : 不兼容IE6、7、8，从1代中剔除了所有兼容代码。
jQuery3.x.x : 全面支持HTML5和CSS3。

首先我们使用jQuery的时候，必须要先引包（和我们之前自己封装的xxx.js一样）：
<script type=“text/javascript” src=“jquery-1.12.3.min.js”></script>

当然，我们也可以把jQuery的声明语句写在head标签当中。
另外，jQuery的引入我们还可以采用CDN的方式来进行引入。
ps：以上引入jQuery的方式作用都是相同的，都是为了将库文件添加至我们的工程当中。

jQuery有非常便利的选择元素的能力，用一个$()函数就能够搜寻页面上的元素。

那么jQuery的操作过程是什么样的呢？
(1) jQuery操作页面元素一定是从一个$()开始的！
(2) $()函数里面有引号，引号里面写CSS选择器。
(3) 然后加上jQuery自己的方法（不能使用js原生的方法。）

jQuery课程主要分三步：

第一步：学习怎么选择元素? 使用$()函数选择元素

第二步：学习选择元素之后能干吗？ 比如 .css() .animate() .addClass() .html()

第三步：综合特效

2.$()函数

2.1 size()方法和length属性
2.2 jQuery全面支持css2.1的选择器
2.3 jQuery全面支持css3的选择器
2.4 jQuery自己发明的伪类
2.5 $()函数和jQuery函数等价
2.6 $()函数得到的是jQuery对象
2.7 关于引号

2.1 size()方法和length属性
$()在选择元素的时候是批量的，因此jq提供了一个机制来访问获得元素的数量。这个机制就是size()方法和length属性。

var $div = $("div").size()
var $div = $("div").length	

两种方法都能够获取通过$()函数得到的页面元素的个数。

2.2 jQuery全面支持css2.1的选择器
前面提到过$()在选择元素的时候括号中先写引号，在引号中写css选择器。而这里提到的选择器可以是id选择器、类选择器、标签选择器、包含选择器等css2.1中提到的任意的选择器组合。

2.3 jQuery全面支持css3的选择器
对于css3选择器的支持，简单来说就是对像属性选择器、关系选择器等在css3中被提出的选择器的支持。可以直接在$()函数中使用他们。
例如：
$(“div[id=div1]”).css(“background-color”,“red”);
ps：css3选择器最大的问题实际上是浏览器的兼容性问题，但是使用jq则没有兼容性问题。

2.4 jQuery自己发明的【伪类】

选择器:first 选中指定元素集合中的第一个元素
选择器:last 选中指定元素集合中的最后一个元素
选择器:eq(n) 选中指定元素集合中从0开始，第n个元素
选择器:lt(n) 选中指定元素集合中从0开始，第n个元素之前的所有元素
选择器:gt(n) 选中指定元素集合中从0开始，第n个元素之后的所有元素
选择器:odd 选中指定元素集合中从0开始，所有奇数序号的元素
选择器:even 选中指定元素集合中从0开始，所有偶数序号的元素

2.5 $()函数和jQuery()函数等价

事实上在jq中做出了一个声明，这个声明就是$ == jQuery。
也就是说
$() 和 jQuery() 这两种写法是等价的。

	$("p:eq(2)").css("background-color","red");
	等价于
	jQuery("p:eq(2)").css("background-color","red");

ps：
并不是jq所独有的一个函数，在很多其他框架例如prototype框架中也对此函数做 出了声明。根据js语法，同名函数后声明的会覆盖前面的。 因此在工程中如果引入了多个框架，那么使用jQuery()这种写法是最保险的。 但是如果仅对于jq框架来说，这两种写法就是等价的。

2.6 $()函数得到的是jQuery对象

js中规定函数都会有一个执行结果，或者说是返回值。
jq是使用js封装的一个框架，因此$()函数也不例外。

jq中规定$()函数返回的是一个jq对象
例如：
	var $p = $("p")；//此处$p就是一个jq对象(集合)


对于jq对象来说我们需要知道的内容有：
(1)jq对象仅能够调用jq中设定的属性和方法，对于原生js的属性和方法都无法调用
(2)jq对象可以在必要的时候转换为js原生对象。
	a) jq对象可以通过【jq对象[n]】方式转换为js原生对象
		var p = $("p")[0];
	b) jq对象可以通过【.get(n)】方式转换为js原生对象
		var p = $("p").get(0);

2.7 关于引号

前面提到过$()在选择元素的时候括号中先写引号，但是存在获取某些对象的时候不需要加引号的特例：

$(window)
$(document)
$(this)

只有这三种情况的时候不需要写引号