1

http://jsfiddle.net/Lijo/CXGX7/7/とhttp://jsfiddle.net/Lijo/CXGX7/8/の 2 つのjQueryコードがあります。最初のコードは戻りますが、2 番目のコードはボタンのテキストを返します。undefined

質問

  1. この結果の違いの理由は何ですか?
  2. 最初のコードが期待されるボタンのテキストを返さないのはなぜですか?

注：両方が同じversionjQueryを使用していることを確認しました（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 でボタンの値を取得する
  2. jQueryのバージョンを確認して印刷するには?
4

3 に答える 3

2

これは、最初のバージョンでは、スクリプトの実行時にボタンがまだ DOM にロードされていない可能性があるためです。

このバージョンでは、html ページに直接書き込みますalert。そのため、ページのその部分がブラウザに読み込まれると、すぐに実行されます。この時点では、ページの残りの部分は読み込まれていないため、$('.myButton')セレクターは何も返しません ( で確認できます$('.myButton').length)。

このバージョンでは、このコードを JsFiddle のパネル内に記述していますJavaScript。ここに記述した JS コードは、onloadイベント ハンドラー内で実行されます。これにより、内部の JS コードを実行する前に、すべての html が読み込まれます。

したがって、最初のバージョンでは、コードは次のように変換されます -

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

そして2番目のバージョンの場合-

$(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 に答える