jQuery对象与DOM对象

jQuery对象与DOM对象

  学习jQuery一定要注意区分jQuery对象和DOM对象。jQuery对象使用jqueryObj[0] 或者 jqueryObj.get(0)便可以转换为DOM对象。例：

 

var jBox = $("#box");  // jQuery对象
var box = jBox[0];       // DOM对象
var box2 = jBox.get(0)  // DOM对象

 

  DOM对象转换为jQuery对象也很容易，只需包裹在$()中。例：

 

var box = document.getElementById("box");   // DOM对象
var jBox = $(box);     // jQuery对象

 

 DOM对象有时操作很方便，下面是一个使用将直接使用DOM对象实现反选的例子：

 

$("#reserveSelectBtn").click(function() { // bind click action to button 
    $("name=check").each(function() {  // <input name="check" type="checkbox"/>
        this.checked = !this.checked;          // this is DOM object, reserve select
    });
});

 

 需要注意的是DOM对象不能使用jQuery的方法，JQuery对象不能使用DOM的方法。

 下面给出一些直接操作DOM对象的方法，详细看这里：

 

var domObj = document.getElementById("hello");
var objHTML = domObj.innerHTML;
var width = domObj.innerWidth;
var width = domObj.innerHeight;

// another example
var element = document.createElement('h1');
element.appendChild(document.createTextNode
    ('The man who mistook his wife for a hat'));  // <h1>The man who mistook his wife for a hat</h1>