将JavaScript'this'转换为jQuery'$（this）' [英] Converting JavaScript 'this' to jQuery '$(this)'
问题描述
请看下面的代码：
< HTML>
< HEAD>
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jstype =text / javascript>< / script>
< SCRIPT type =text / javascript>
function test（target）{alert（target.nodeName）; }
< / SCRIPT>
< / HEAD>
< BODY>
< DIV>
< ul>
< li onclick =test（this）>这是公平的< / li>
< li onclick =test（this）>不是< / li>
< li onclick =test（this）>为什么不&< / li>
< li onclick =test（this）> Becoz ...< / li>
< / ul>
< / DIV>
< / BODY>
< / HTML>
函数test接收target（li节点）作为参数。
现在，我可以以某种方式将此变量转换为jQuery $（this）或 $（e.target）或任何其他jQuery变量，以便我可以使用jQuery方式遍历文档？
转换DOM元素to jQuery object
要将
var jquery_object = jQuery（dom_element）;
所以，在你的例子中它会是 $（this）或 $（event.target） - 取决于您是希望当前元素还是实际触发事件的元素（在您的情况下它们是相同的，除非事件将被一些后代元素触发）。
$ b
将jQuery对象转换为DOM元素
到将jQuery对象转换为DOM元素，您可以简单地将 jQuery 对象作为数组或使用它的 get（）类似的方法：
var dom_element = jquery_object [0];
或
var dom_element = jquery_object.get（0）;
以上将返回存储在jQuery对象中的第一个对象 - 如果只有一个，应该有没有问题（如果还有更多，只需将 您的代码可能如下所示（如果您坚持使用难以维护的事件属性）： 除了在这种情况下使用jQuery完全没用，您可以直接操作直接在DOM元素上，在需要时将它们转换为jQuery：） 使用jQuery在jQuery 1.7+中绑定事件的代码可能如下所示： 请参阅上面的操作： jsfiddle.net/tadeck/2PqPP/ Please have a look at the following code: The function test receives target (li node) as an argument. Now, can I somehow convert this variable to jQuery To convert DOM element to jQuery object you do the following: So, in your example it will be To convert jQuery object to DOM element, you can simply treat or The above will return first object stored in the jQuery object - if there is only one, there should be no problems (if there are more, just change Your code could look like this (if you insist on using hard-to-maintain event attributes): except in this case using jQuery is completely useless and you can just operate directly on DOM elements, converting them to jQuery when needed :) Your code using jQuery for binding events in jQuery 1.7+ could look like this: See the above in action here: jsfiddle.net/tadeck/2PqPP/ 这篇关于将JavaScript'this'转换为jQuery'$（this）'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ 0 更改为其他索引以获取适当的元素，或者只是省略 get（）
您的代码更改为使用
jQuery
< HTML>
< HEAD>
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jstype =text / javascript>< /脚本>
< SCRIPT type =text / javascript>
function test（target）{alert（target.get（0）.nodeName）; }
< / SCRIPT>
< / HEAD>
< BODY>
< DIV>
< ul>
< li onclick =test（$（this））>这是公平的< / li>
< li onclick =test（$（this））>不是< / li>
< li onclick =test（$（this））>为什么不&< / li>
< li onclick =test（$（this））> Becoz ...< / li>
< / ul> < / DIV>
< / BODY>
您的解决方案更改为绑定
< body>
< HTML>
< HEAD>
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jstype =text / javascript>< /脚本>
< SCRIPT type =text / javascript> $（'li'）。on（'click'，function（event）{
alert（event.target.nodeName）;
} ）;
}）;
< / SCRIPT>
< / HEAD>
< BODY>
< DIV>
< ul>
< li>这是公平的< / li>
< li>无其不&< / li>
< li>为什么不&< / li>
< li> Becoz ...< / li>
< / ul> < / DIV>
< / BODY>
<HTML>
<HEAD>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
function test(target) { alert(target.nodeName); }
</SCRIPT>
</HEAD>
<BODY>
<DIV>
<ul>
<li onclick="test(this)">This is fair</li>
<li onclick="test(this)">No its not</li>
<li onclick="test(this)">Why not</li>
<li onclick="test(this)">Becoz...</li>
</ul>
</DIV>
</BODY>
</HTML>
$(this) or $(e.target) or any other jQuery variable to so that I could traverse the document using the jQuery way?Converting DOM element to jQuery object
var jquery_object = jQuery(dom_element);
$(this) or $(event.target) - depending on whether you want current element or the element that actually fired the event (in your case they are the same, unless event will be fired by some descendant element).Converting jQuery object to DOM element
jQuery object as array or use its get() method like that:var dom_element = jquery_object[0];
var dom_element = jquery_object.get(0);
0 into other index to get appropriate element, or just omit the argument for get() to retrieve all the elements as array).Your code changed to use
jQuery<HTML>
<HEAD>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
function test(target) { alert(target.get(0).nodeName); }
</SCRIPT>
</HEAD>
<BODY>
<DIV>
<ul>
<li onclick="test($(this))">This is fair</li>
<li onclick="test($(this))">No its not</li>
<li onclick="test($(this))">Why not</li>
<li onclick="test($(this))">Becoz...</li>
</ul> </DIV>
</BODY>
Your solution changed to bind events outside
<body><HTML>
<HEAD>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
$(function(){
$('li').on('click', function(event){
alert(event.target.nodeName);
});
});
</SCRIPT>
</HEAD>
<BODY>
<DIV>
<ul>
<li>This is fair</li>
<li>No its not</li>
<li>Why not</li>
<li>Becoz...</li>
</ul> </DIV>
</BODY>
