1

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

问题

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

注意：我验证了两者都使用相同version的 jQuery（通过 jQuery 的警报）

alert($.fn.jquery);

代码

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

参考

  1. 使用 jQuery 检索 Button 值
  2. 如何确定和打印 jQuery 版本？
4

3 回答 3

2

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

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

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

所以，在第一个版本中，你的代码被转换成这样的东西 -

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

对于第二个版本 -

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

编辑

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

此方法有点类似于window.onload，不同之处在于它会在您的 HTML 文档加载后立即触发，并window.onload在页面的所有内容（包括图像和其他资源）完全加载后调用。

于 2012-12-11T17:01:45.813 回答
1

因为

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

这就是JQuery 的工作原理

于 2012-12-11T17:03:35.773 回答
0

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

$(function(){alert($('.myButton').attr("value"));});
于 2012-12-11T17:03:44.490 回答