Home Web Front-end JS Tutorial What is the difference between jquery and document for getting html elements?

What is the difference between jquery and document for getting html elements?

Nov 20, 2020 pm 04:40 PM
document html element jquery

Difference: The html element obtained by jquery is a jquery object and can execute jquery methods, while the document obtains a dom object and executes dom methods. jQuery objects are unique to jQuery and cannot use DOM methods; and DOM objects cannot use jQuery methods.

What is the difference between jquery and document for getting html elements?

Related recommendations: "jQuery Tutorial"

Recently made a video plug-in through ocx, and then put the plug-in Go to html (if you want to know, you can take a look)

Because I want to operate this plug-in, play, stop, etc., so I need to get this element. As expected, I use jquery to get it, and then It cannot be executed at all, and then use document to obtain it and execute it normally. The details are as follows

//正常执行     var obj = document.getElementById("player00");
obj.testhelloworld();//无法执行var playobj = $('#player00');
playobj.testhelloworld();
Copy after login

Then I was thinking,What is the difference between the two? Then I searched for the following conclusions

The html element obtained by jquery is a jquery object and can execute jquery methods, while the document obtains a dom object and executes dom Method

Description:

DOM object is an object we obtain using traditional methods (javascript), and jQuery object is an object obtained using jQuery’s class library selector . A JQuery object is an object generated by wrapping a DOM object with jQuery. The JQuery object is unique to jQuery. It can use methods in jQuery, but cannot use DOM methods.

I was relieved. I had always thought that the two were equivalent, and I wanted to find out why dom Why can't the method be executed in jquery? Now that I think about it, I feel completely relieved.

In this case, how do transform the two into each other? After all, the contents of the obtained objects are the same.

Convert jQuery object to DOM object:

Two conversion methods convert a jQuery object into DOM object: [index] and .get(index);

(1) The jQuery object is a data object, and the corresponding DOM object can be obtained through the [index] method.

For example:

var $v =$("#v") ; //jQuery对象 
var v=$v[0]; //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中
Copy after login

(2) jQuery itself provides, through the .get(index) method, the corresponding DOM object is obtained

For example:

var $v=$("#v"); //jQuery对象 
var v=$v.get(0); //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中
Copy after login

Convert DOM object to jQuery object:

For a DOM object that is already a DOM object, you only need to wrap the DOM object with $() to get a jQuery object. $(DOM object)

For example:

var v=document.getElementById("v"); //DOM对象 
var $v=$(v); //jQuery对象
Copy after login

After conversion, you can use any jQuery method.

Through the above methods, jQuery objects and DOM objects can be converted to each other at will. What needs to be emphasized again is that only DOM objects can use methods in DOM, and jQuery objects cannot use methods in DOM.

For more programming-related knowledge, please visit: Programming Courses! !

The above is the detailed content of What is the difference between jquery and document for getting html elements?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Execute PHP function using onclick Execute PHP function using onclick Feb 29, 2024 pm 04:31 PM

We will also cover another way to execute a PHP function through the onclick() event using the Jquery library. This method calls a javascript function, which will output the content of the php function in the web page. We will also demonstrate another way to execute a PHP function using the onclick() event, calling the PHP function using pure JavaScript. This article will introduce a way to execute a PHP function, use the GET method to send the data in the URL, and use the isset() function to check the GET data. This method calls a PHP function if the data is set and the function is executed. Using jQuery to execute a PHP function through the onclick() event we can use

How to read excel data in html How to read excel data in html Mar 27, 2024 pm 05:11 PM

How to read excel data in html: 1. Use JavaScript library to read Excel data; 2. Use server-side programming language to read Excel data.

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Use jQuery to modify the text content of all a tags Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on ​​the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

What is dreamweaver line break? What is dreamweaver line break? Apr 08, 2024 pm 09:54 PM

Use the <br> tag in Dreamweaver to create line breaks, which can be inserted through the menu, shortcut keys or direct typing. Can be combined with CSS styles to create empty rows of specific heights. In some cases, it is more appropriate to use the <p> tag instead of the <br> tag because it automatically creates blank lines between paragraphs and applies style control.

How to tell if a jQuery element has a specific attribute? How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute

GTA 6 document gives a detailed overview of all leaks GTA 6 document gives a detailed overview of all leaks Sep 08, 2024 am 06:37 AM

On September 3, version 1.5 of the Grand Theft Auto VI document which provides a detailed overview of everything that is known about the game to date. The updated version of the document was announced in a trailer published on X (formerly Twitter).??

Introduction to how to add new rows to a table using jQuery Introduction to how to add new rows to a table using jQuery Feb 29, 2024 am 08:12 AM

jQuery is a popular JavaScript library widely used in web development. During web development, it is often necessary to dynamically add new rows to tables through JavaScript. This article will introduce how to use jQuery to add new rows to a table, and provide specific code examples. First, we need to introduce the jQuery library into the HTML page. The jQuery library can be introduced in the tag through the following code:

See all articles