変数を見つけるためにjQueryを使用するJavaScript変数 - javascript、jquery、html、css、変数

私が作った フィドル ボタン付き。今、JavaScriptでは、jqueryを学習しようとしています。そうすることで、古いフィドルをJavaScriptからjqueryに変換していますが、方法は知っています。

私の問題は、initという関数で、変数に格納されたIDを持つHTML要素を取得するJavaScriptの方法を変換する方法を理解できないことです。

JavaScriptの古いコード：

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

jQueryの新しいコード：

var but = $("#but");

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

回答：

回答№1は1

追加する必要があります [0] ドキュメント要素を取得するためにjqueryコードに追加しますが、イベントリスナーを追加するjqueryメソッドでは、それはかなり無意味です。私はどちらかを提案します $("#but").mouseout(etc) または $("#but").on("mouseout", etc).

私はあなたのjsfiddleをに更新しました 期待どおりに動作する、しかし私はここで短いツタンカーメンを与えようとします：

jqueryのドキュメントに従って、慣れる必要のあるイベントリスナーを追加する方法は2つあります。の .on() メソッド、および .(event)() 方法。後者の代わりにjqueryオブジェクトに追加できます object.(eventName)() 例として、クリックハンドラーをオブジェクトに追加します。 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() イベントです。スペースで区切ることにより、複数のイベントを添付できます。 .on("click hover")。 2番目のパラメーターは、実行、またはターゲット要素。上記の例の場合はスパンです。もちろん、最後のパラメーターは実行する関数です。私が知る限り、実行する関数を参照するには、単に関数をそこに記述するのではなく、無名関数が必要です。

これが助けになったことを願っています。

---

回答№2の場合は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);
}

---

回答№3の場合は0

分かりますか？完全に、しかし、これはあなたが大まかに探しているものです：

var b1 = document.getElementById("button");
var b2 = $(b1);
b2.click( function(){
alert("hi");
})

---