idが関数の最初の引数として渡されるとき、jQuery $（id）によって達成されるのは何ですか？

Question

次の関数では、idが最初の引数として渡されます。
jQuery $（id）は、括弧や＃がないので私を混乱させています。
$（id）とは何ですか？ また、この短い関数の代わりにJavaScriptに相当するネイティブJavaScriptは何ですか？

function swapColor(id, color) { 
    $(id).css("background-color", color); 
} 

Answer 1

を連結番号：

function swapColor(id, color) { 
     $("#"+id).css("background-color", color); 
    } 

Answer 2

idswapColor関数に渡される引数です。それはstringでなければならず、この特定のケースではセレクタマーカー - hash sign#を正しく含んでいなければなりません。

function swapColor(id, color) { 
 
    $(id).css("background-color", color); 
 
} 
 

 
swapColor('#box', 'blue')

#box { 
 
    height: 100px; 
 
    width: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='box'></div>

Answer 3

あなたは色をターゲットと変更することを、多くの地域で同じ機能を再利用し、動的要素のidを渡すことができます。そのような

swapColor("#btn", "#cececece"); 

一方、のような、他の方法は、特定のタイプ（またはID、またはクラス名）に機能をハードワイヤし、そのタイプが変更されたことです。その、機能自体は、その特定にだけ仕事に配線接続されるだろうどちらか

1. こと、
   • ケース
   • だろうイベント
   • のマイナス面要素
2. あるいは他の場所から実行される関数を得ることができれば、その特定のIDを持つ要素の色だけが変更されます。また注 HTMLでは、複数の要素が同じIDを対象とすることは不正です。

もう一つ、あなたはこのようにそれがいずれかで関数を実行することができますよう、ダイナミックIDは、多くの点で有用であろうことができ、イベントハンドラ—クリックハンドラ、またはイベントハンドラを書いていません要素。あなたにも、選択したクラスを渡すと

あなたは...

真を選択する#を付加する必要がありますが、見て、あなたのコードは動作します。このように、あなたは次のように関数宣言を変更しても、それはまだ

次のものよりも、この機能をより良い場合になるだろうものです

function swapColor(elementSelector, color) { 
    $(elementSelector).css("background-color", color); 
} 

/* Valid use cases 
* 1. #btn 
* 2. .btn 
* 3. button 
*/ 

、

function swapColor(color) { 
    $("#myElement").css("background-color", color); 
} 

私は願って、働くだろう基本的な地下の概念を明らかにする。

Answer 4

これはネイティブのJavaScriptで（ほぼ）同等です。ここではIDSに限られています。

あなたは、セレクタを使用する必要が

function swapColor(id, color) { 
    document.getElementById(id).style.backgroundColor = color; 
} 

Answer 5

（ID（＃）、クラス（）、タグ。）か、要素自体を渡すことができます。

let element = document.getElementById('element'); 
$(element).css('background-color', 'tomato');