4

これがばかげた、または簡単な質問である場合は申し訳ありませんが、私は Javascript/jQuery にかなり慣れていません。先月、私は実際にスクリプトの世界を掘り下げ始め、人々varが Javascript/jQuery で使用する 2 つの異なる方法、おそらく 3 つの方法を見てきました。

varの使い方はこんな感じで、

var nav = $('nav');

nav.hide();

人々が vars を使用するのを私が見た非常に一般的な方法は、

var nav = $('nav');

$(nav).hide();

回答から、

var $nav = $('nav');

$nav.hide();

Google で検索して学んだことから、変数内に入力した内容は、後で使用するためにそこに保存されます。次に、変数を使用しているときに変数の周りに $() を書いた場合、$() が複製されると考えました。それでも、両方の方法が機能しているように見えるので、重複していないことがわかっているため、同じものであることがわかります。

正しい使用方法はありますvarsか、それともどちらも同じで問題ありませんか?

これが既知の回答である場合は再度お詫び申し上げます。誰かが元の質問を見せていただければ喜んで削除しますが、何も見つかりませんでした。

回答としてマークしなかった回答からの多くの情報ですが、非常に重要であることがわかりました。

var element = document.createElement("div");
$("body").append(element);
$(element).hide();

上記の例では、DOM オブジェクトを受け取り、それを jQuery セレクターに変換するため、$(element) が必要です。jQuery 関数は jQuery セレクターでのみ機能するため、単純に element.hide() を実行することはできません。

4

6 に答える 6

9

$()新しい jQuery オブジェクトを作成します。jQuery オブジェクトを変数に保存した場合、その変数から別の jQuery オブジェクトを作成しても意味がありませんが、それでも機能します。以前に jQuery オブジェクトとして作成された変数を$()純粋に悪い習慣のためにラップし、それが既にオブジェクトであることを忘れているか、最初に何を作成したかを理解していない人をよく見かけます。

もしかしたら見たことがあるかもしれません

var $nav = $('nav');

$nav.hide();

$コードを読みやすくするために、変数が jQuery オブジェクトであることを示すために、接頭辞を使用するのが一般的な方法です。

于 2013-11-05T19:58:25.610 に答える
4

どちらの変数も、jQuery メソッドにアクセスできる jQuery オブジェクトを格納します。後者のアプローチでは、その jQuery オブジェクトを別のjQuery オブジェクトに不必要に再ラップしようとします。前者のアプローチは、率直に言って、より効率的で効率が悪いという点で「正しい」です。

于 2013-11-05T19:55:45.887 に答える
3

私は多くの場所でこの問題を見てきました。人々は、必要のないときに多くの $ を使用します。変数名の飾りとしてのみ使用する人もいますが、これが混乱を招きます。

まず、jQuery の変数はなく、JavaScript の変数だけで、おっしゃる通り、変数には情報が格納されます。右側が $() で始まる場合、jQuery 関数の結果を変数に格納しています。ほとんどの場合、保存するものは jQueryセレクターと呼ばれます。

の場合、var nav = $('nav')保存しているのは、ナビゲーション タグである DOM 内のすべての要素を表すセレクターです。つまり、似ている<nav></nav>(または同等のもの)。

他の人がすでに述べたように、$(nav)は保存されたセレクターを取得し、そこから新しいセレクターを作成しています。それは何も達成せず、冗長であり、たとえそれが普及していたとしても、貧弱なプログラミングの実践です.

ただし、意味のある同様の構文があります。

var element = document.createElement("div");
$("body").append(element);
$(element).hide();

上記の例$(element)では、DOM オブジェクトを受け取り、それを jQuery セレクターに変換するため、 が必要です。jQuery 関数は jQuery セレクターでのみ機能するため、単純にelement.hide().

冒頭で述べたように、 $ を変数名のデコレーターとして使用する人もいますvar $selector = $("nav")。$左側は何も意味しません。これは変数名の単なる文字ですが、jQuery セレクターを格納していることを思い出させるための規則として使用されます。混乱を招くだけなので避けたいと思いますが、そこにあるので、言及したかっただけです.

于 2013-11-05T20:01:59.003 に答える
2

これらの回答はすべて、回答全体の断片です。. . もう一品追加させてください。:)

他の人が言ったように、$(...)表記は JQuery オブジェクトを返す JQuery 関数です。「...」が何であるかに応じて、それがどのように行われるかを決定します。

いくつかの例：

  • そこに「div」などのセレクターを配置すると、セレクター パターンに一致するすべての DOM 要素を含む JQuery オブジェクトが取得されます。. . この場合、すべての<div>要素です。

  • HTML 要素の文字列表現 (例: "<div></div>") を渡すと、新しく作成された要素を指す JQuery オブジェクトが取得され<div>ます。

  • そこに DOM ノード参照 (たとえば、 を使用して作成されたものdocument.getElementsByTagName("div")) を配置すると、参照内のそのノードを指す JQuery オブジェクトが作成されます。

これの全体的なポイントは、JQuery が JQuery オブジェクトで動作するということです。したがって、これらのさまざまな関数はプログラマーがオブジェクトを作成するのに役立ちます。

これがあなたの質問に行き着くところです。. .

を使用するたびに$("...")、まったく新しいオブジェクトが作成されるため、たとえば、次のコードは 2 つの一意の JQuery オブジェクトを生成し、それぞれが同一の DOM 要素を指します。

var $firstObject = $("div");
var $secondObject = $("div");

したがって、それらを (このように($firstObject === $secondObject)) 比較すると、同じオブジェクトではないため、同等とは見なされません。

ここで、もう少し明確にするために、2 番目の例を少し変えてみましょう。次のように、3 番目の変数を作成して 2 番目の変数と同じ値に設定すると、次のようになります。

var $thirdObject = $secondObject;

. . . 実際には同じ JQuery オブジェクトを指している 2 つの要素があるため、実際には同じです (つまり、($secondObject === $thirdObject)true と評価されます)。

最後に、このコードで示したものは次のとおりです。

$(nav).hide();

. . . は、JQuery オブジェクトを作成しようとする単なる別の例です。. . 今回は別の JQuery オブジェクトを使用します。ただし、上で作成した 3 番目の変数でこれを行うと、2 番目の変数との関係が壊れます。. . ($secondObject === $($thirdObject)). . . 比較の両側が同じオブジェクトを指していないため、それらは等しくなくなります。$firstObject以前のとの比較と同様に$secondObject、この比較では 2 つの一意の JQuery オブジェクトを使用しています。

でも 。. .

他のいくつかの回答とは異なり、それが完全に間違った形式のコーディングであることに同意しません。. . あなたの例で提供する状況では決して使用しませんが、JQuery オブジェクトを$(...)関数に渡すことは、基本的に を使用することと同じです.clone()。以下の 2 つの$bar割り当ては、機能的に同等です。

var $foo = $("<div></div>");

var $bar = $($foo);
var $bar = $foo.clone();

JQuery API でも同じことが言えます ( http://api.jquery.com/jQuery/ )。

jQuery オブジェクトの複製

jQuery オブジェクトが $() 関数に渡されると、オブジェクトのクローンが作成されます。この新しい jQuery オブジェクトは、最初のものと同じ DOM 要素を参照します。

編集 ：

好奇心から、jsPerf で簡単なテストをセットアップしました。このアプローチは、Firefox、IE9、および Chrome $($foo)よりもかなり高速です: http://jsperf.com/clone-technique-test.clone()

于 2013-11-05T20:56:34.080 に答える
2

varあらゆる種類の変数を作成するために使用されます。var diceRoll = 4または、またはその他のものである可能性がありvar myMessage = "Hello!"ます。

$は、jQuery が提供する関数であり、渡す内容に応じてさまざまな方法で動作します。たとえば、文字列 (例: 'nav') を渡すと、ドキュメント内のすべての要素が検索さnavれ、見つかった DOM 要素ごとに 1 つの jQuery オブジェクト (要素) のセットが返されます。と言うときはvar nav = $('nav');、この一連の jQuery オブジェクトを変数に割り当てているnavので、後で作業できます。ここまでは順調ですね。

文字列を に渡す代わりに$、技術的には jQuery オブジェクトを$関数に戻すことができます。これは、 と言うときに行っていることです$(nav).hide();。navこれを行うことはほとんど意味がありません-最初に入れたのと同じjQueryオブジェクトの配列を返すだけです!!

$個人的には、jQuery オブジェクトを保持する変数の前に記号を付けるのが好きですvar $nav = $('nav');。これは、この変数がネイティブの DOM 要素や整数などではなく、jQuery オブジェクト (要素) を保持していることを一目で確認できるようにするための規則です。コードに $($myVar) が表示されたら、おそらく寝る時間だと思います...

$()更新:文字列以外にも、関数に渡すことが理にかなっているものが他にもあります。たとえば、DOM 要素を渡すと ( と言うなど$(document))、その DOM 要素の jQuery オブジェクト表現が作成されます。これは非常に便利です。

于 2013-11-05T20:02:18.807 に答える
1 
var nav = $('nav');

$(nav).hide();

navはすでに jQuery オブジェクトであるため、役に立ちません$(nav)。

于 2013-11-05T19:54:56.303 に答える