jQuery（一）

jQuery库
轻量级的JavaScript库
核心依然是JavaScript
不仅兼容了CSS3，还兼容各种浏览器（IE、Chrome、Firefox）

优点：
容易上手
强大的选择器
解决浏览器的兼容
完善的事件机制
出色的Ajax封装
丰富的UI

特点（特殊之处）：
链式操作
回调函数
迭代器
延迟对象
队列
......

注意 jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别 在于 2.x 不再兼容 IE6、7、8 为移动端而优化
，由于减少了一些代码，使得该版本比 jQuery 1.x 更小且更快。

如果开发者比较在意老版本 IE 用户，只能使用 jQuery 1.9 及之前的版本了。

* jQuery对象和DOM对象是不一样的
* 1.分清楚哪些是jQuery对象，哪些是DOM对象
* 2.两者间的相互转换
* 3.通过jQuery方法包装后的对象，是jQuery对象，它是一个新的对象
* 4.jQuery与DOM对象完全不是同一个东西，但是又很相似，因为他们都能处理DOM
* 5.通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，
* 而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容问题，
* 我们可以通过jQuery更友好的API进行开发，同时代码也会更加精短

/**
* 获取页面上这个id为demo的p元素，
* 然后给这个文本节点增加一段文字：“这是一个demo”，
* 并且让文字颜色变成红色。
* */
//普通处理
//通过原生DOM模型提供的document.getElementById()方法获取的DOM元素就是DOM对象
//通过DOM方法innerHTML和DOM属性style处理文本与颜色
var p = document.getElementById('demo');
p.innerHTML = '这是一个demo';
p.style.color = 'red';

/********************************************/

//jQuery处理
//通过$()方法会得到一个jQuery对象
//$p是一个类数组的对象，包含DOM对象的信息和封装的很多操作方法
//$p调用jQuery对象的html()和css()方法
var $p = $('#demo');
$p.html('这是一个demo').css('color', 'red');

jQuery对象转化成DOM对象：
（[红字]jQuery是一个类数组对象，DOM对象就是一个单独的DOM元素，多个的DOM元素是不能
进行直接使用DOM的属性和方法操作的，否则会报错不能执行，要操作只能取得单一的一个DOM
元素对象进行操作。）
(***************************************)

var divs = document.getElementsByTagName('div');
divs.style.color = 'blue';
//会报错，而且不执行
//报错内容：Uncaught TypeError: Cannot set property 'color' of undefined

var divs = document.getElementsByTagName('div');
divs[1].style.color = 'blue';
//不报错，且执行

var divs = document.getElementsByTagName('div');
divs[0].onclick = function () {
alert('aaa');
};
//正确，执行了

var divs = document.getElementsByTagName('div');
divs.onclick = function () {
alert('aaa');
};
//不报错，也不执行

(***************************************)

1.利用数组下标的方式读取到jQuery中的DOM对象

<div>元素1</div>
<div>元素2</div>
<div>元素3</div>

//利用数组下标把jQuery对象转化成DOM对象
var $div = $('div'); // jQuery对象
var div1 = $div[0]; // 转化成DOM对象
div1.style.color = 'red';

2.通过jQuery自带的get()方法

//通过jQuery自带的get()方法把jQuery对象转化成DOM对象
var $div = $('div'); // jQuery对象
var div1 = $div.get(0); // 转化成DOM对象
div1.style.color = 'red';

DOM对象转化成jQuery对象
$(DOM)
通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了

//DOM对象转化成jQuery对象
//通过getElementsByTagName获取到所有div节点的元素，结果是一个dom合集对象，不过这个 
对象是一个数组合集(3个div元素)。
var divs = document.getElementsByTagName('div');
divs[1].style.color = 'blue';
var $divFirst = $(divs).first();//把DOM对象转化成jQuery对象，就可以调用jQuery对象的方法了
$divFirst.css('color', 'red');