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".
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?