javascript - jQueryがまったく読み込まれない

Question

初めてjQueryを試していますが、正しく機能させる方法がわかりません。<head>開始タグの近くに次のコードを含めました。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>

次のjQueryコードが続きます。

<script>
    $('.darkmask > img').hover(function(){
             $(this).parent().toggleClass('darkmask-hover');
    })
</script>

残念ながら、このコードはブラウザやJSFiddleで試してみると機能しません。ただし、JSFiddleのフレームワークをjQuery自体をロードするように設定すると、独自のコードを介してjQueryをロードするのではなく、アニメーションが正しく機能します。

jQueryの読み込みが間違っていますか？もしそうなら、正しい方法は何ですか？

score 2 · Accepted Answer

問題は、JSFiddleのコードがページの読み込み時に実行されるということです。代わりに、コードでは、HTML要素がに含まれているためにHTML要素がまだロードされていないときに実行が行われるHEADため、セレクターは.darkmask実際には何も参照しません。

解決策は次を使用することです。

$(document).ready(
function()
{
 ... your code here
}

ページが読み込まれて準備ができたときに確実に実行されるように、すべてのHTML要素がそこにあるため、JQueryセレクターは何かを操作できます。

score 0 · Accepted Answer

次のように、jQueryコードをready関数内でラップする必要があります。

$(document).ready(function(){
    // put your code here.
});

また、スクリプトタグの属性としてtype = "text / javascript"が含まれていることを確認してください。そうでない場合、javascriptとして実行されません。

score 0 · Accepted Answer

コードを次のようにラップします。

$(function() {
    .... Your code here ...

});

これは、DOMツリーがロードされた後にコードが実行されることを意味します。

score 0 · Accepted Answer

コードの実行時に HTML 要素はありますか?

試す：

$(function () { // this function executes when the page loads
   alert(x);
   // put your code here
});

score 0 · Accepted Answer

コード全体を次のようにラップします。

$(document).ready(function() {

    //ALL CODE GOES HERE

});

5 に答える 5