jQuery object and DOM Element

They're both objects but DOMElements are special objects. jQuery just wraps DOMElements in a Javascript object.

jQuery

returns an element it shows up as [object Object] in an alert.

 

relationship between jQuery object and DOM element:

A jQuery object is an array-like object that contains DOM element(s). A jQuery object can contain multiple DOM elements depending on the selector you use.

 

what methods can operate on jQuery object vs DOM element?

jQuery functions (a full list is on the website) operate on jQuery objects and not on DOM elements. You can access the DOM elements inside a jQuery function using .get() or accessing the element at the desired index directly:

$("selector")[0] // Accesses the first DOM element in this jQuery object
$("selector").get(0) // Equivalent to the code above
$("selector").get() // Retrieve a true array of DOM elements matched by this selector

In other words, the following should get you the same result:

1
2
3
4
5
<div id="foo"></div>
 
alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));

 

 

DOMElements

When getElementByID returns an element it shows up as [object HTMLDivElement].

 

 

Question

1.How can I convert a JavaScript DOM object to a jQuery object?Is there any way to convert a js DOM object to a jQuery object or using the this keyword in jQuery?

1
2
3
4
5
<tr onclick="changeStatus(this)">
 
function changeStatus(myObject) {
       XXX.removeClass();
}

answer:

var $this = $(myObject);

$this is a jQuery object. You can create jQuery objects from DOM elements.

<tr onclick="changeStatus(this)">

function changeStatus(myObject) {
       $(myObject).removeClass();
}

I would like to recommend doing your event binding with jQuery as well:

This is nice because now all the JS code is in one place and can be updated (in my opinion) more easily. Note that the class I added to the <tr> element is not necessary if you want to bind to all <tr> elements in the DOM.

<tr class="change-status">

$('.change-status').on('click', function () {
    $(this).removeClass( ... );
});

 

 

 

2.My first question is if this is a DOM object or a jQuery Object?

I would assume that it is a DOM object as we are passing it through a jQuery modifier in the next statement i.e $(this).find(".tool-name") to further extract data from it. Is that correct?

$(".foo").click(function() {  
  var displayTool = $(this).find(".tool-name").text() //is this a jquery object or DOM object ?
});

answer:

Yes, this is always a DOM object within a jQuery click handler.

As to why this is...

Do you always want a jQuery object containing the clicked element within a click handler? No, there are occasions when you do not. For example, say you wanted to remove another element from the page when an element was clicked:

$('.delete').click(function() {
    $('.spinner').remove();
});

You never use this.

Or you may want simply to do something with the element's id:

$('.delete').click(function() {
    console.log(this.id);
});

In neither case do you want to have a jQuery selection. And since building a jQuery selection is a relatively expensive operation, it is much better not to create it unless you explicitly say you want it by doing $(this).

You might be thinking "ah, but we already built the selection in the original line of code":

1
$(".foo").click(function() {

.foo means something different. It means "all the elements with the class foo", not "the element that was just clicked".

 

posted @   PanPan003  阅读(350)  评论(0编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?
点击右上角即可分享
微信分享提示