jQuery对象和DOM对象

DOM对象

用原生JavaScript获取的DOM对象

通过document.getElementById() 反馈的是元素(DOM对象)

通过document.getElementsByTagName()获取到的是什么？

伪数组(集合)，集合中的每一个对象是DOM对象

jQuery对象

jQuery对象用$()的方式获取的对象

jQuery对象又可以叫做包装集(包装的DOM对象的集合)

区别

jQuery对象不能使用DOM对象的成员，DOM对象不能使用jQuery对象的成员

// DOM对象

var box = document.getElementById('box');

// 错误

box.text('hello');

// 正确

box.innerText = 'hello';

// jQuery对象，jQuery对象加前缀$，用以区分DOM对象

var $box = $('#box');

// 错误

$box.innerText = 'hello';

// 正确

$box.text('hello');

jQuery对象和DOM对象的相互转换

jQuery对象转换成DOM对象：  

jQuery对象.get(索引值);

jQuery对象[索引值]

  jQuery对象是包装集(集合)，从集合中取数据可以使用索引的方式

DOM对象转换成jQuery对象：  

$(DOM对象) 只有这一种方法;

案例

• 开关灯 [01-开关灯.html]

// 仅仅演示对象之间的转换，代码不推荐这么写
jQuery(document).ready(function () {
 // 获取元素；
 var inpArr = document.getElementsByTagName('input');
 // 获取第一个按钮，然后绑定事件；
 $(inpArr[0]).click(function () {
   // 设置body的背景色
   $('body')[0].style.background = '#fff';
});
 // 获取第二个按钮，然后绑定事件；
 $(inpArr[1]).click(function () {
   // 设置body的背景色
   $('body').get(0).style.background = '#000';
});
});