将 JavaScript 'this' 转换为 jQuery '$(this)'

2023-11-21

请看一下下面的代码：

<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>

函数 test 接收目标（li 节点）作为参数。

现在，我可以以某种方式将此变量转换为 jQuery$(this) or $(e.target)或者任何其他 jQuery 变量，以便我可以使用 jQuery 方式遍历文档？

将 DOM 元素转换为 jQuery 对象

To 将 DOM 元素转换为 jQuery 对象您执行以下操作：

var jquery_object = jQuery(dom_element);

所以，在你的例子中它将是$(this) or $(event.target)- 取决于您想要当前元素还是实际触发事件的元素（在您的情况下它们是相同的，除非事件将由某些后代元素触发）。

将 jQuery 对象转换为 DOM 元素

To 将 jQuery 对象转换为 DOM 元素，你可以简单地对待jQuery对象作为数组或使用它的get()像这样的方法：

var dom_element = jquery_object[0];

var dom_element = jquery_object.get(0);

上面将返回存储在 jQuery 对象中的第一个对象 - 如果只有一个，应该没有问题（如果有更多，只需更改0进入其他索引以获得适当的元素，或者只是省略参数get()以数组形式检索所有元素）。

您的代码更改为使用`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>

except 在这种情况下使用 jQuery 是完全没用的你可以直接操作 DOM 元素，在需要时将它们转换为 jQuery :)

您的解决方案更改为绑定外部事件`<body>`

在 jQuery 1.7+ 中使用 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(){
        $('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>

请参阅此处的上述操作：jsfiddle.net/tadeck/2PqPP/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

html

Traversal