jQuery Object and DOM Element
2012-12-26 18:53
155 查看
I remember being struggling between these two concepts in myearly days of jQuery programming, like trying to get value from ajQuery object or call val() on a Dom object, it is not a big issuethough, people can get away with that one way or other, but a goodunderstanding
will not only help us make fewer mistakes but alsomove us into the advanced areas of jQuery programming.
1. What is a jQuery Object
Objects that are returned or constructed by jQuery()
2.What is a Dom Element
Elements that are retrieved like :document.getElementByIdx_x();
3. Both jQuery object and Dom elements are objects, but they areDIFFERENT
jQuery object is a kind of wrapper of Dom object, with moreobject oriented aspects like methods, properties etc, anotherimportant reason we have one more layer to wrap Dom is to hide thedifferences between browsers. In other words when you use Domelement
object model, browsers implementations are usually quietdifferent on many of them.
4. jQuery has very few properties and a lot of methods
There are only a handful of properties of a jQuery object:
.jquery,.context,.length,.selector
Nothing else, while it provides a lot of methods to get and seta property of underneath Dom, so like .val() to read and.val(somevalue) to set value of an element.
Properties like .name, .value are only available from a Domobject.
5. They can be converted to and from each other
6. Keyword ‘this’ in jQuery event handler
This is where the two cross each other and people found mostconfusing.
The keyword this refers to the DOM element to which the handleris bound, so ‘this’ is not a jQuery object, but it just one stepaway from making it into jQuery by using $(this)
7. jQuery object references to a set of elements
So when you call property setting, the property of eachunderlining element will be set, if getter is called on the set ofelements, only the property value of first element is returned,there are obvious ways to get to the property of other elementslike using
.each() traversing the list, as usual the keyword ‘this’is a Dom element.
If you are using $.each(collection, function(){}) , the key word‘this’ in this case depends on what kind of collection you areiterating, not to confuse ‘this’ with one in an event handler!
will not only help us make fewer mistakes but alsomove us into the advanced areas of jQuery programming.
1. What is a jQuery Object
Objects that are returned or constructed by jQuery()
2.What is a Dom Element
Elements that are retrieved like :document.getElementByIdx_x();
3. Both jQuery object and Dom elements are objects, but they areDIFFERENT
jQuery object is a kind of wrapper of Dom object, with moreobject oriented aspects like methods, properties etc, anotherimportant reason we have one more layer to wrap Dom is to hide thedifferences between browsers. In other words when you use Domelement
object model, browsers implementations are usually quietdifferent on many of them.
4. jQuery has very few properties and a lot of methods
There are only a handful of properties of a jQuery object:
.jquery,.context,.length,.selector
Nothing else, while it provides a lot of methods to get and seta property of underneath Dom, so like .val() to read and.val(somevalue) to set value of an element.
Properties like .name, .value are only available from a Domobject.
5. They can be converted to and from each other
1 2 3 4 5 6 7 | //From jQuery object to Dom: var domobject= jqueryObject.get(); //From Dom to jQuery object var jqueryObject = jQuery(domobject); |
This is where the two cross each other and people found mostconfusing.
The keyword this refers to the DOM element to which the handleris bound, so ‘this’ is not a jQuery object, but it just one stepaway from making it into jQuery by using $(this)
7. jQuery object references to a set of elements
So when you call property setting, the property of eachunderlining element will be set, if getter is called on the set ofelements, only the property value of first element is returned,there are obvious ways to get to the property of other elementslike using
.each() traversing the list, as usual the keyword ‘this’is a Dom element.
If you are using $.each(collection, function(){}) , the key word‘this’ in this case depends on what kind of collection you areiterating, not to confuse ‘this’ with one in an event handler!
相关文章推荐
- 文本种类jQuery object and DOM element
- 关于jQuery object and DOM element
- 关于jQuery object and DOM element
- JQuery Object vs. DOM element
- JQuery Object vs. DOM element
- How do I pull a native DOM element from a jQuery object? | jQuery Learning Center
- Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode
- jQuery操作DOM(Document、Object、Model)对象——页面元素操作
- Professional JS(13.3.1Event Object in DOM/IE/Cross-Browser/UI&Focus&Mouse and Wheel event[half])
- Html Dom add and delete element
- [jQuery Note]jQuery element properties and attributes
- DOM Document Object properties & DOM Element properties
- 浅谈jQuery中的eq()与DOM中element.[]的区别
- 在jquery(1.7版)以及Ext(3.4版)中,查看在页面元素(domElement)上绑定的事件处理(listener、handler)
- html的“object HTMLDivElement”与jquery“object Object”相互转换
- Total width of element (including padding and border) in jQuery
- html的“object HTMLDivElement”与jquery“object Object”相互之间的转换方式
- 解决jquery.tmpl.js的BUG,页面上存在与${key}键值相同的id名,则出现object HTMLInputElement之类的默认值
- jQuery Object 和 Html Element之间的互换
- object(DOMNodeList) object(DOMElement)