3

ボタンでフィドルを作りました。現在、javascript で jquery を学習しようとしています。そうすることで、古いフィドルを javascript から jquery に変換していますが、方法はわかっています。

私の問題は、init と呼ばれる関数で、変数に格納された ID を持つ html 要素を取得する JavaScript の方法を変換する方法がわからないことです。

JavaScript の古いコード:

var but = document.getElementById("but");

jQuery の新しいコード:

var but = $('#but');

問題は、javascript ステートメントから始めて、jQuery を使用することだと思います。jQueryの変数に関して何をすべきかわかりません。

4

3 に答える 3

1

$('#but')DOM オブジェクトではなく、jQuery オブジェクトを返します。その上で jQuery メソッドを呼び出すことも、そこから DOM オブジェクトを取得することもできますが、直接 DOM メソッドを使用することはできません。DOM オブジェクトを取り出したい場合は、次のようにして取得できます。

$('#but')[0]

そして、あなたの方法は次のようになります：

function init() {
    var but = $('#but')[0];
    but.addEventListener("mouseover", butResult, false);
    but.addEventListener("mouseout", reverse, false);
    var button = $('#button')[0];
    button.addEventListener("mouseover", buttonResult, false);
    button.addEventListener("mouseout", reverse, false);
}

または、ネイティブ DOM メソッドを使用する代わりに、jQuery オブジェクトで jQuery メソッドを使用できます。

function init() {
    $('#but').on("mouseover", butResult).on("mouseout", reverse);
    $('#button').on("mouseover", buttonResult).on("mouseout", reverse);
}
于 2012-09-07T23:45:08.157 に答える
1

ドキュメント要素を取得するには、jquery コードに追加する必要があり[0]ますが、イベント リスナーを追加する jquery メソッドでは意味がありません。$('#but').mouseout(etc)またはのいずれかをお勧めします$('#but').on('mouseout', etc)。

jsfiddle を期待どおりに動作するように更新しましたが、ここで短い説明を試みます。

jquery のドキュメントに従って理解する必要があるイベント リスナーを追加する方法は 2 つあります。.on()メソッド、メソッド.(event)()。object.(eventName)()後者は、例としてクリック ハンドラーをオブジェクトに追加する 代わりに、jquery オブジェクトに追加できます。object.click(function() { console.log('executed'); });

ただし、このメソッドは「ライブ」ではありません。要素が動的に追加された場合、それ自体は更新されません。イベントは、ドキュメントが準備完了の場合にのみ関連付けられます( $(document).ready(function() { do stuff });)。動的に追加された要素にイベントをアタッチするには、.on()メソッドが必要です。

たとえば、次の html を見てください。

<div class="wrapper">
    <span class="dynamically_added">stuff</span>
</div>

動的に追加されたスパンにイベント リスナーをアタッチするには、jquery に次を追加します。

$(".wrapper").on('click', '.dynamically_added', function() {
    console.log('executed');
});

.on()is(are)の最初のパラメータはイベントです。複数のイベントをスペースで区切って添付できます: .on('click hover'). 2 番目のパラメーターは、実行する関数またはターゲット要素のいずれかです。上記の例の場合、それはスパンです。もちろん、最後のパラメータは実行する関数です。私の知る限り、単にそこに書くのではなく、実行する関数を参照する匿名関数が必要です。

これがお役に立てば幸いです。

于 2012-09-07T23:45:32.687 に答える
0

私があなたを理解しているかどうかわかりませんか？完全に、しかし、これはあなたが大まかに探しているものですか：

var b1 = document.getElementById('button');
var b2 = $(b1);
    b2.click( function(){
      alert('hi');            
    })
于 2012-09-07T23:47:52.860 に答える