jQuery objects and DOM objects

With a simple example, simply distinguish between the jQuery object and the DOM object:

We want to get the p element with the id of imooc on the page, and then Add a text to this text node: "Hello! Learning jQuery through MOOC is the best way", and make the text color red.

Normal processing, processed through standard JavaScript:

var p = document.getElementById('imooc');
p.innerHTML = '您好！通过慕课网学习jQuery才是最佳的途径';
p.style.color = 'red';

Obtained through the document.getElementById("imooc") method provided by the native DOM model The DOM element is a DOM object, and the text and color are processed through innerHTML and style attributes.

jQuery processing:

var $p = $('#imooc');$p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');

Through the $('#imooc') method, you will get a $p jQuery object, $p is An array-like object. This object contains the information of the DOM object, and then encapsulates many operation methods. It calls its own methods html and css, and the effect obtained is consistent with the standard JavaScript processing result.

Comparing the standard JavaScript DOM operation and the jQuery DOM operation, we can easily find that:

The object packaged by the jQuery method is an array-like object. It is completely different from the DOM object. The only similarity is that they can both operate the DOM.
Processing DOM operations through jQuery allows developers to focus more on the development of business logic without requiring us to know specifically which DOM nodes have those methods, nor do we need to care about the compatibility issues of different browsers. We provide this through jQuery When developing APIs, the code will be shorter and shorter.

This article explains the content of jQuery objects and DOM objects. Please pay attention to the php Chinese website for more information.

Related recommendations:

Standard writing method for jQuery plug-in development

Basic syntax and usage of markdown

File submission using form and FormData.

The above is the detailed content of jQuery objects and DOM objects. For more information, please follow other related articles on the PHP Chinese website!