Question

我有两个jQuery代码 - http://jsfiddle.net/Lijo/CXGX7/7/和http://jsfiddle.net/Lijo/CXGX7/8/。第一个代码返回undefined，而第二个代码返回按钮文本。

问题

结果出现这种差异的原因是什么？
为什么第一个代码没有返回按钮的预期文本？

注意：我确认两者都使用相同的version jQuery（通过jQuery的警告）

alert($.fn.jquery);

CODE

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.1.js"></script>

<script type="text/javascript">

    alert($('.myButton').attr("value"));

</script>

</head>
<body>

<form method="post" action="Test.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE0MDM4MzYxMjNkZMycQvsYQ+GPFsQHoQ8j/8vEo2vQbqkhfgPc60kxXaQO" />
</div>

<div class="aspNetHidden">

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKqxqqrCgLi/JazDQKM54rGBqgaroRQTXJkD1LyUlVxAmLRCNfTGVe73swQBMemBtvN" />
</div>
<div>

    <input name="txtEmpName" type="text" id="txtEmpName" />

    <input type="submit" name="Button1" value="Submit" id="Button1" class="myButton" />
</div>
</form>
</body>
</html>

参考

Answer 1

那是因为在第一个版本中，当您的脚本执行时，该按钮可能尚未加载到DOM中。

在this版本中，您直接在html页面中编写alert。因此，当页面的这一部分加载到浏览器中时，它将立即执行。此时，您的页面的其余部分未加载，因此您的$('.myButton')选择器不会返回任何内容（您可以通过$('.myButton').length进行检查。）

在this版本中，您正在JsFiddle的JavaScript面板中编写此代码。您在此处编写的JS代码在onload事件处理程序内运行，该处理程序确保在执行任何JS代码之前已加载所有html。

因此，在第一个版本中，您的代码将转换为类似的内容 -

$(document).ready(function () {
    alert($.fn.jquery);
});

和第二个版本 -

$(document).ready(function () {
    alert($('.myButton').attr("value"));
    alert($.fn.jquery);
});

修改

只要DOM在浏览器中完全加载，就会调用$(document).ready()函数。您将回调函数作为参数传递给此函数，该函数将在发生时调用。通常，你想用jQuery做什么，你在回调中做。这是了解jQuery的第一件事。您可以获得有关它的官方教程here。

此方法有点类似于window.onload，除了它在加载HTML文档后立即触发，并且在页面的所有内容（包括图像和其他资源）之后调用window.onload ）已满载。

Answer 2

因为

<script type="text/javascript">
   // some code to run as soon as possible
</script>

不像

<script type="text/javascript">
     $(document).ready(function(){
         // some code to run when all page is ready
     }):
</script>

这是How JQuery works

Answer 3

在第一个样本中调用alert()时，您的按钮未添加到DOM中。使用ready()回调函数：

$(function(){alert($('.myButton').attr("value"));});

相同的jQuery代码返回两个不同的结果 - 提交按钮文本

3 个答案: