jQuery对象和dom对象有很大的区别。dom对象只有少量的属性和方法,jQuery包装集可以说是对dom对象进行了扩充,jQuery有丰富的属性和方法。
1.获得dom对象。
可以通过 document.getElementById("testDiv"); 或者 document.getElementsByName("testDiv"); 获得dom对象。
var div = document.getElementById("testDiv"); //这样获得的是DOM对象。
2.jQuery包装集
var jQueryObject = $("#testDiv"); //这样获得的是jQuery包装集。
3.dom对象转换成jQuery包装集
如果要使用jQuery中提供的函数,就要首先构造一个jQuery包装集。当我们获得了dom对象以后,可以通过$()来得到jquery包装集。
var div = document.getElementById("testDiv"); //这样获得的是DOM对象。 var domToJQueryObject = $(div); //domToJQueryObject 为JQuery包装集
4.jQuery包装集转换成dom对象。
有的时候需要将jQuery转换成dom对象。
jQuery包装集是一个集合,所以通过索引器访问其中的某一个元素。
索引器返回的不在是jQuery包装集,而是一个dom对象。
var jQueryObject = $("#testDiv"); //这样获得的是jQuery包装集。 var JQueryObjectToDom = jQueryObject [0] ; //JQueryObjectToDom 为Dom对象。
5.
jQuery包装集的某些遍历方法,比如each()中, 可以传递遍历函数, 在遍历函数中的this也是Dom元素,
所以有的时候this不能调用jQuery中的方法。
比如:
- $("#testDiv").each(function() { alert(this) })
如果我们要使用jQuery的方法操作Dom对象,怎么办? 用上面介绍过的转换方法即可:
- $("#testDiv").each(function() { $(this).html("修改内容") })
理解好jQuery对象和dom对象很重要。