May*_*ank 10 html javascript jquery traversal
请看下面的代码:
<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>
功能测试接收目标(li节点)作为参数.
现在,我可以以某种方式将此变量转换为jQuery $(this)或$(e.target)任何其他jQuery变量,以便我可以使用jQuery方式遍历文档吗？
Tad*_*eck 19
要将DOM元素转换为jQuery对象,请执行以下操作:
var jquery_object = jQuery(dom_element);
因此,在您的示例中它将是$(this)或$(event.target)- 取决于您是否需要当前元素或实际触发事件的元素(在您的情况下它们是相同的,除非事件将由某些后代元素触发).
要将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>
除非在这种情况下使用jQuery是完全没用的,你可以直接在DOM元素上操作,在需要时将它们转换为jQuery :)
<body>使用jQuery在jQuery 1.7+中绑定事件的代码可能如下所示:
<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/
| 归档时间： |
|
| 查看次数： |
15542 次 |
| 最近记录： |