コードのより適切なバージョンがあります: JsFiddle
HTML:
<div id="thediv">hola</div>
<input type="button" value="click to show"/>
JavaScript:
$(function() {
var $myDiv = $("#thediv");
$myDiv.hide();
alert($myDiv.attr("id"));
$("input[type=button]").on('click', function() {
$myDiv.show();
alert('click');
});
});
役立つメモ:
- キャッシュ DOM 要素の検索は、検索にコストがかかるため
- クリックの代わりに使用すると、より高速に動作します
$function()
は document.ready のエイリアスです。書き込みが速く、ネットワーク経由で送信するバイト数が少なくなります:)
- div#id セレクターを使用する必要はありません。ページ内で一意である必要があるため、#id で十分です。さらに、jquery が findElementById JavaScript 関数を使用した後、div の追加チェックを実行する必要はありません。
- jQuery のパフォーマンスに関する素晴らしい記事があります: artzstudio
- 入力を開始タグと終了タグに分割しないでください。
おそらくあなたはこれが欲しかった:
HTML:
<div id="thediv">
hola
<input type="button" value="click to show"/>
</div>
そうすれば、JavaScript を最適化できます。
$(function() {
var $myDiv = $("#thediv");
$myDiv.hide();
alert($myDiv.attr("id"));
$myDiv.find("input[type=button]").on('click', function() {
$myDiv.show();
alert('click');
});
});