JQuery公式学習資料:JQuery対象

新しい要素を作成するたびに(または既存の要素を選択する)、JQueryは要素のセットを返します.ほとんどの開発者が新たにJQueryに触れたとき,この集合を配列としていた.この集合のDOM要素にはゼロから始まるインデックスがあり、この集合には配列でよく使われるメソッドやlengthプロパティも含まれていますが、JQueryオブジェクトはこれより複雑です.
 

DOMおよびDOM要素

ここでDOMはHTMLドキュメントを表しています.多くのDOM要素が含まれている可能性があります.1つの要素はページ内のものであり、テキストと他のDOM要素が含まれています.単一のDOM要素がタイプ(ラベル)、属性などから構成されていてもよい.
要素にはJavaScriptオブジェクトのように多くの属性が含まれています.これらの属性は、Webページのインタラクションを行う唯一の方法です.
 

操作要素

実際に直接要素を操作するのは難しい複雑で、JQueryは開発者がより便利な操作要素を行うのに役立つ方法を定義しています.
DOM法を用いて要素を操作することができる.var target = document.getElementById( "target" ); target.innerHTML = "<td>Hello <b>World</b>!</td>"; var newElement = document.createElement( "div" ); target.parentNode.insertBefore( target.nextSibling, newElement )しかし、ブラウザの互換性の問題により、DOMメソッドが一部のブラウザで失効することが多いため、JQueryメソッドを使用して要素を操作することができ、有効であるだけでなく、操作がより便利になります.var target = document.getElementById( "target" ); $( target ).html( "<td>Hello <b>World</b>!</td>" ); var newElement = document.createElement( "div" ); $( target ).after( newElement ); 

要素をJQueryオブジェクトの

に取得
JQueryメソッドがCSSの選択によって呼び出されると、一致するセレクタの要素を含むJQueryオブジェクトが返されます.// <h1> . var headings = $( "h1" );ここでheadingsはJQueryオブジェクトにこのページのすべてのh 1ラベルが含まれており、lengthプロパティでh 1ラベルを持つ数を表示できます.// <h1> var allHeadings = $( "h1" ); alert( allHeadings.length );ページに複数のh 1ラベルが含まれている場合、lengthはh 1ラベルの数を表示し、ページにh 1ラベルがない場合、lengthは0になります.lengthプロパティをチェックすると、セレクタがページの要素に正常に一致しているかどうかを確認できます.
複数の要素のうちの最初の要素が望ましい場合、この要件を達成する方法はいくつかあります.例えば、使用します.eq()メソッド.// var headings = $( "h1" ); var firstHeading = headings.eq( 0 );現在firstHeadingはJQueryオブジェクトであり、ページ上の最初のh 1ラベルが含まれており、JQueryオブジェクトであるため、JQueryの方法を使用することができます.そのうちの1つです.get()メソッドは、JQueryで包まれた要素ではなく、要素自体を返します.// var firstHeadingElem = $( "h1" ).get( 0 );JQueryペアはクラス配列のように見えるため、配列の下付きでサブアイテムを取得することもサポートされています.// var firstHeadingElem = $( "h1" )[ 0 ];firstHeadingElemにはローカルのDOM要素が含まれています.これはDOM要素の属性や方法も含まれていることを意味しますが、JQueryの方法より使いやすいです.
 

JQueryオブジェクトは===で作成された

ではありません.
オブジェクトが同じセレクタで同じDOM要素を作成または参照している場合でも、JQueryに包まれた各オブジェクトは一意であることに注意してください.// JQuery 。 var logo1 = $( "#logo" ); var logo2 = $( "#logo" );同じ方法で作成されますが、異なるオブジェクトです.// 2 alert( $( "#logo" ) === $( "#logo" ) ); // falseいずれにしても、2つのオブジェクトには同じ要素が含まれており、通過することができる.get()メソッドを比較すると,両者に含まれる要素は確かに同じである.// DOM var logo1 = $( "$logo" ); var logo1Elem = logo1.get( 0 ); var logo2 = $( "#logo" ); var logo2Elem = logo2.get( 0 ); alert( logo1Elem === logo2Elem ); // trueどのような命名規則を使用しても、JQueryオブジェクトとDOM要素が大きく異なり、オリジナルのDOMメソッドと属性はJQueryオブジェクトには存在せず、逆も同様であることが重要です.
 

JQueryオブジェクトは「生きている」

ではありません
ページ上のすべての段落要素をJQueryで取得します.// <p> var allParagraphs = $( "p" );選択した要素のセットは、変化を送信したり、増加したり、減少したりする可能性があります.しかし、JQueryオブジェクトに含まれるこの要素のセットは自動的に変化しません.ドキュメントが変化した場合は、JQueryオブジェクトを再作成して要素を取得する必要があります.// allParagraphs = $( "p" ); 

包装

DOMが提供するすべての機能は、私たちが必要とするインタラクティブなWebページを作成することができますが、それは面倒です.JQueryオブジェクトパッケージの要素を使用すると非常に簡単です.JQueryを使用して要素を作成および選択すると、要素は新しいJQueryオブジェクトにパッケージされます.ローカルDOM要素を使用する必要がある場合は、使用することができる.get()メソッドまたは配列の下付きで要素を取得します.