jqueryの$('#id')とdocument.getElementById('id')の違い

jqueryの$("#id")とdocument.getElementByIdx_x("id")は同じ効果があると思っていましたが、今日特殊効果をやっていて、これは違うことに気づきました。この場合のテスト結果は次のとおりです:

1.alert($("#p")) は [object Object]

を取得します。 [ object HTMLpElement]

3.alert($("#p")[0]) またはalert($("#p").get(0)) は [object HTMLpElement] を取得します。

理由の説明:

document.getElementById() は DOM オブジェクトを返しますが、$() は jQuery オブジェクトを返します

jQueryオブジェクトとは何ですか?
---DOMオブジェクトをjQueryでラップして生成したオブジェクトです。 jQuery オブジェクトは jQuery に固有であり、jQuery のメソッドを使用できます。
例:
$("#test").html() の意味: ID テストを持つ要素内の HTML コードを取得します。このうち、html() は jQuery のメソッドです。このコードは、DOM を使用してコードを実装するのと同等です。 DOM オブジェクトをラップした後に jQuery オブジェクトが生成されますが、同様に DOM オブジェクトも jQuery 内のメソッドを使用できなくなります。 エラーを報告してください。例: $("#test").innerHTML、document.getElementById("id").html() などの記述方法が間違っています。 もう 1 つの注意点は、#id をセレクターとして使用して取得される jQuery オブジェクトと document.getElementById("id") で取得される DOM オブジェクトは同等ではないということです。以下の 2 つの間の変換を参照してください。
また jQuery は異なりますが関連していますが、jQuery オブジェクトと DOM オブジェクト は相互に変換することもできます。 2 つを変換する前に、まず規則を示します。jQuery ペアを取得した場合 var $variab = jQuery object; DOM オブジェクトを取得した場合は、通常と同じです。 var variab = DOM オブジェクト。この規則は説明と区別の便宜のためだけであり、実際の使用においては規定されていません。
jQuery オブジェクトを DOM オブジェクトに変換します。
2 つの変換メソッドは、jQuery オブジェクトを DOM オブジェクトに変換します: [index] と .get(index)
(1) jQuery オブジェクトはデータ オブジェクトであり、パススルーできます。 [index ] メソッドを使用して、対応する DOM オブジェクトを取得します。
例: var $v =$("#v"); //jQuery オブジェクト var v=$v[0]; //DOM オブジェクト alert(v.checked) //このチェックボックスがチェックされているかどうかを検出します
( 2) jQuery 自体は、.get(index) メソッドを通じて対応する DOM オブジェクトを提供します
例: var $v=$("#v") //jQuery オブジェクト var v=$v.get(0); //DOM オブジェクト
alert(v.checked) //このチェックボックスが選択されているかどうかを検出します

jQuery オブジェクトに変換された DOM オブジェクト:

DOM オブジェクトの場合は、$() を使用して DOM オブジェクトをラップするだけで取得できます。 jQuery オブジェクト。 $(DOM オブジェクト)
例: var v=document.getElementById("v"); //DOM オブジェクト
var $v=$(v); //jQuery オブジェクト
変換後は、任意の jQuery メソッドを使用できます。
上記のメソッドを通じて、
jQuery オブジェクトと DOM オブジェクト
を相互に自由に変換できます。もう一度強調しておく必要があるのは、DOM オブジェクトのみが DOM 内のメソッドを使用でき、jQuery オブジェクトは DOM 内のメソッドを使用できないということです。 その他の関連する使用方法は次のとおりです:

1. DOM オブジェクトを jQuery オブジェクトに変換する
通常の Dom オブジェクトは、$() を通じて jQuery オブジェクトに変換できます。

例: $(document.getElementById("msg")) 返されるのは jQuery オブジェクトであり、jQuery メソッドが使用できます。

2. jQuery オブジェクトを DOM オブジェクトに変換する
jQuery オブジェクト自体はコレクションであるため。したがって、jQuery オブジェクトを Dom オブジェクトに変換する場合は、項目の 1 つを取得する必要があります。通常はインデックスを通じて取得できます。 例: $("#msg")[0]、$("p").eq(1)[0]、$("p").get()[1]、$("td") [ 5]

これらは Dom オブジェクトです。Dom 内のメソッドは使用できますが、jQuery メソッドは使用できなくなります。

次の記述方法は正しいです:
$("#msg").html();
$("#msg")[0].innerHTML; $("#msg").eq(0 )[ 0].innerHTML; $("#msg").get(0).innerHTML;



3. オブジェクトを取得する 2 つのメソッド:
If any

$('#

formid

')

名前で

document.getElementsByName('formName')[0]

$("form[name=' formName ']")

jquery 固有メソッド:

document.getElementByI d( ) は DOM オブジェクトを返しますが、$() は jQuery オブジェクト を返します

jQuery オブジェクトとは何ですか?
---DOMオブジェクトをjQueryでラップして生成したオブジェクトです。 jQuery オブジェクトは jQuery に固有であり、jQuery のメソッドを使用できます。
例:
$("#test").html() の意味: ID テストを持つ要素内の HTML コードを取得します。このうち、html() は jQuery のメソッドです。このコードは、DOM を使用してコードを実装するのと同等です。 DOM オブジェクトをラップした後に jQuery オブジェクトが生成されますが、同様に DOM オブジェクトも jQuery 内のメソッドを使用できません。 エラーを報告してください。例: $("#test").innerHTML、document.getElementById("id").html() などの記述方法が間違っています。 もう 1 つの注意点は、#id をセレクターとして使用して取得される jQuery オブジェクトと document.getElementById("id") で取得される DOM オブジェクトは同等ではないということです。以下の 2 つの間の変換を参照してください。
また jQuery は異なりますが関連していますが、jQuery オブジェクトと DOM オブジェクトは相互に変換することもできます。 2 つを変換する前に、まず規則を示します。jQuery ペアを取得した場合 var $variab = jQuery object; DOM オブジェクトを取得した場合は、通常と同じです。 var variab = DOM オブジェクト。この規則は説明と区別の便宜のためだけであり、実際の使用においては規定されていません。
jQuery オブジェクトを DOM オブジェクトに変換します。 2 つの変換メソッドは、jQuery オブジェクトを DOM オブジェクトに変換します: [index] と .get(index)
(1) jQuery オブジェクトはデータ オブジェクトであり、パススルーできます。 [index ] メソッドを使用して、対応する DOM オブジェクトを取得します。 例: var $v =$("#v"); //jQuery オブジェクト
var v=$v[0]; //DOM オブジェクト
alert(v.checked) //このチェックボックスがチェックされているかどうかを検出します
( 2) jQuery 自体は、.get(index) メソッドを通じて対応する DOM オブジェクトを提供します
例: var $v=$("#v") //jQuery オブジェクト var v=$v.get(0); //DOM オブジェクト
alert(v.checked) //このチェックボックスが選択されているかどうかを検出します

jQuery オブジェクトに変換された DOM オブジェクト:

DOM オブジェクトの場合は、$() を使用して DOM オブジェクトをラップするだけで取得できます。 jQuery オブジェクト。 $(DOM オブジェクト)
例: var v=document.getElementById("v"); //DOM オブジェクト
var $v=$(v); //jQuery オブジェクト
変換後は、任意の jQuery メソッドを使用できます。
上記のメソッドを通じて、jQuery オブジェクトと DOM オブジェクトを自由に相互に変換できます。もう一度強調しておく必要があるのは、DOM 内のメソッドを使用できるのは DOM オブジェクトのみであり、jQuery オブジェクトは DOM 内のメソッドを使用できないということです。

その他の関連する使用方法は次のとおりです: 1. DOM オブジェクトを jQuery オブジェクトに変換する
通常の Dom オブジェクトは、$() を通じて jQuery オブジェクトに変換できます。

例: $(document.getElementById("msg"))
返されるのは jQuery オブジェクトであり、jQuery メソッドが使用できます。


2. jQuery オブジェクトを DOM オブジェクトに変換する
jQuery オブジェクト自体はコレクションであるため。したがって、jQuery オブジェクトを Dom オブジェクトに変換する場合は、項目の 1 つを取得する必要があります。通常はインデックスを通じて取得できます。 例: $("#msg")[0]、$("p").eq(1)[0]、$("p").get()[1]、$("td") [ 5]

これらは Dom オブジェクトです。Dom 内のメソッドは使用できますが、jQuery メソッドは使用できなくなります。

次の記述方法は正しいです:
$("#msg").html();
$("#msg")[0].innerHTML; $("#msg").eq(0 )[ 0].innerHTML; $("#msg").get(0).innerHTML;



3. オブジェクトを取得する 2 つのメソッド:
If any

$('#

formid

')

名前で

document.getElementsByName('formName')[0]

$("form[name='formName']")

以上がjqueryの$('#id')とdocument.getElementById('id')の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。