锋利的jQuery学习笔记（三）————DOM对象和jQuery对象

一、DOM对象、jQuery对象定义

   document.getElementById();
   document.getElementsByTagName();
   像这样得到的DOM元素就是DOM对象

   jQuery对象就是通过jQuery包装DOM对象后产生的对象
   jQuery对象是jQuery独有的。
   如果一个对象是jQuery对象，则可以使用jQuery里面的方法，如：
   $('#foo').html()；
   等价于document.getElementById('foo').innerHTML;

   在jQuery对象中无法使用DOM对象的任何方法。
   $('#id').checked;//写法错误
   可以改为
   $('#id').html();
   $('#id').attr('checked');

   同样，在DOM对象中无法使用jQuery对象的任何方法。
   document.getElementById('id').html(); //报错
   只能用document.getElementById('id').innerHTML;

注：#id作为选择符取得的是jQuery对象而不是document.getElementById(‘id’)所得到的DOM对象，两者不等价。

二、jQuery对象与DOM对象的相互转换

2.1 约定定义变量风格

获取的对象是jQuery对象，在变量前加上 ,var varible = jQuery对象;
获取的是DOM对象，则这样定义, var varible = DOM对象;

2.2 jQuery对象转DOM对象

两种方法：[index]和get(index)
jQuery对象是一个类数组对象，可以通过[index]的方法得到相应的DOM对象

   var $cr = $('#cr'); // jQuery对象
   var cr = $cr[0]; // DOM对象
   jQuery本身提供的，通过get(index)方法得到相应的DOM对象
   var $cr = $('#cr'); // jQuery对象
   var cr = $cr.get(0); // DOM对象

2.3 DOM对象转成jQuery对象

只需用$()把DOM对象包装起来就可以获得一个jQuery对象了。

   var cr = document.getElementById('cr'); // DOM对象
   var $cr = $(cr); // jQuery对象

   转换后可以任意使用jQuery中的方法。
   注：平时用到的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂