Javascript objects in jquery

The jQuery Object

When creating new elements (or selecting existing ones), jQuery returns the elements in a collection. Many developers new to jQuery assume that this collection is an array. It has a zero-indexed sequence of DOM elements, some familiar array functions, and a .length property, after all. Actually, the jQuery object is more complicated than that.

link DOM and DOM Elements

The Document Object Model (DOM for short) is a representation of an HTML document. It may contain any number of DOM elements. At a high level, a DOM element can be thought of as a «piece» of a web page. It may contain text and/or other DOM elements. DOM elements are described by a type, such as , , or

, and any number of attributes such as src , href , class and so on. For a more thorough description, refer to the official DOM specification from the W3C.

Elements have properties like any JavaScript object. Among these properties are attributes like .tagName and methods like .appendChild() . These properties are the only way to interact with the web page via JavaScript.

link The jQuery Object

It turns out that working directly with DOM elements can be awkward. The jQuery object defines many methods to smooth out the experience for developers. Some benefits of the jQuery Object include:

var target = document.getElementById( "target" );
 
target.innerHTML = "Hello World!";

This works in many cases, but it will fail in most versions of Internet Explorer. In that case, the recommended approach is to use pure DOM methods instead. By wrapping the target element in a jQuery object, these edge cases are taken care of, and the expected result is achieved in all supported browsers:

// Setting the inner HTML with jQuery.
 
var target = document.getElementById( "target" );
 
$( target ).html( "Hello World!" );

Convenience – There are also a lot of common DOM manipulation use cases that are awkward to accomplish with pure DOM methods. For instance, inserting an element stored in newElement after the target element requires a rather verbose DOM method:

// Inserting a new element after another with the native DOM API.
 
var target = document.getElementById( "target" );
 
var newElement = document.createElement( "div" );
 
target.parentNode.insertBefore( newElement, target.nextSibling );

By wrapping the target element in a jQuery object, the same task becomes much simpler:

// Inserting a new element after another with jQuery.
 
var target = document.getElementById( "target" );
 
var newElement = document.createElement( "div" );
 
$( target ).after( newElement );

For the most part, these details are simply «gotchas» standing between you and your goals.

link Getting Elements Into the jQuery Object

When the jQuery function is invoked with a CSS selector, it will return a jQuery object wrapping any element(s) that match this selector. For instance, writing:

// Selecting all tags.
 
var headings = $( "h1" );

headings is now a jQuery object containing all the tags already on the page. This can be verified by inspecting the .length property of headings :

// Viewing the number of tags on the page.
 
var headings = $( "h1" );
 
alert( headings.length );

If the page has more than one tag, this number will be greater than one. If the page has no tags, the .length property will be zero. Checking the .length property is a common way to ensure that the selector successfully matched one or more elements.

If the goal is to select only the first heading element, another step is required. There are a number of ways to accomplish this, but the most straight-forward is the .eq() function.

// Selecting only the first element on the page (in a jQuery object)
 
var headings = $( "h1" );
 
var firstHeading = headings.eq( 0 );

Now firstHeading is a jQuery object containing only the first element on the page. And because firstHeading is a jQuery object, it has useful methods like .html() and .after() . jQuery also has a method named .get() which provides a related function. Instead of returning a jQuery-wrapped DOM element, it returns the DOM element itself.

// Selecting only the first element on the page.
 
var firstHeadingElem = $( "h1" ).get( 0 );

Alternatively, because the jQuery object is «array-like,» it supports array subscripting via brackets:

// Selecting only the first element on the page (alternate approach).
 
var firstHeadingElem = $( "h1" )[ 0 ];

In either case, firstHeadingElem contains the native DOM element. This means it has DOM properties like .innerHTML and methods like .appendChild() , but not jQuery methods like .html() or .after() . The firstHeadingElem element is more difficult to work with, but there are certain instances that require it. One such instance is making comparisons.

link Not All jQuery Objects are Created ===

An important detail regarding this «wrapping» behavior is that each wrapped object is unique. This is true even if the object was created with the same selector or contain references to the exact same DOM elements.

// Creating two jQuery objects for the same element.
 
var logo1 = $( "#logo" );
var logo2 = $( "#logo" );

Although logo1 and logo2 are created in the same way (and wrap the same DOM element), they are not the same object. For example:

// Comparing jQuery objects.
 
alert( $( "#logo" ) === $( "#logo" ) ); // alerts "false"

However, both objects contain the same DOM element. The .get() method is useful for testing if two jQuery objects have the same DOM element.

Источник

JavaScript DOM Objects vs. jQuery Objects

In one sentence, DOM objects are the objects that the web browser is using to render elements on the web page whereas jQuery objects are basically wrapper objects around a set of DOM elements. If you want to know more about these objects in detail and how to work with them, and convert into one another then continue reading this tutorial.

Table of Contents What are JavaScript DOM objects? What are jQuery objects? How to determine Whether an Object is DOM or jQuery? Convert an Object from DOM to jQuery and back

What are JavaScript DOM objects?

As mentioned earlier, DOM objects are used by browser directly to render the webpage in browser window. The browser receives an HTML document from a web server, which is just text. The browser proceeds to parse this text into an internal structure that it can actually use to render the page visually. The DOM represents that internal structure a browser has of an HTML document. A DOM object represents a visual or functional object on the page which was created from the original HTML document.

Even when browser has fully rendered the webpage, you can use JavaScript to change the DOM objects, it’s attributes and values. Any change done in such way automatically refreshes the visual representation shown in browser window.

The advantage with working with DOM objects is that you have direct access to everything you need to manipulate the HTML element. The disadvantage of DOM objects is that most of the attached functions and attributes are things that the browser needs and are not necessarily useful when you’re working with JavaScript. It makes working with them a little slower, at least for less-experienced developers.

e.g. to change content of a paragraph or label, you can use javascript like this:

document.getElementById("label_firstname").innerHTML = "First Name";

jQuery objects are wrapper objects around single or multiple DOM elements. The jQuery objects (though technically still JavaScript objects) provide access to the wrapped DOM elements — however, in a much different, much easier, and often much more effective way.

Remember that a jQuery object may represent a single DOM object, or it may represent a set of many DOM objects. So if you apply an operation on the jQuery object, it may apply to many DOM objects.

Using jquery objects has it’s own advantages. For example, jQuery provides a lot of useful library methods to search elements inside DOM element it represent, and perform bulk operation on searched elements without iterating them in code.

e.g. to change content of a paragraph or label, you can use jQuery like this:

("#label_firstname").html("First Name");

How to determine Whether an Object is DOM or jQuery?

Many times, when working on any complex application you may find jQuery objects and javascript DOM objects, both in single piece of code. Now you are not sure whether it is a jQuery object, a DOM object, or some other JavaScript object. There is a simple way to tell the difference.

To confirm whether an object is a jQuery object, see whether the object has the jquery attribute:

Similarily, to confirm whether an object is a DOM object, see whether the object has the nodeType attribute:

Convert an Object from DOM to jQuery and back

In situations like above, if you want to convert the object from DOM to jQuery or jQuery to DOM, you can do it using below techniques.

Convert DOM object to jQuery object

$() or jquery() method creates a new jQuery object from DOM object.

Convert jQuery object to DOM object

The .get() method returns DOM object wrapped inside jQuery object.

That’s all about javascript DOM objects and jQuery objects. Leave me comments if any question or suggestion.

Источник