jQuery を始めるための最初のレッスン jQuery selector_jquery

WBOY

リリース： 2016-05-16 18:32:35

オリジナル

1143 人が閲覧しました

セレクターは、getElementById メソッドの拡張バージョンと考えることができます。 getElementById メソッドは HTML 要素を返し、jQuery セレクターは HTML 要素のラッパーを返します。このラッパーセットを使用すると、jQuery は HTML 要素により多くの操作可能なメソッドを提供します。 JQuery では、コア関数の 1 つは $ です。はい、それは単なる奇妙な名前の関数です。この関数は選択関数であり、一般的な使用法は

var obj=$(selector);

ここで selector は文字列であり、これは以下で紹介するセレクターです。返されるのは、ラップされた要素のコレクションです。実際、JQuery のコア $ 関数の能力は、セレクターとして使用されることをはるかに超えています。そのパラメーターが関数である場合、その関数はページの DOM 要素が完全にロードされると、メソッドによって次のように実行されます。処刑される。 onload には、onload よりも多くの利点があります。onload は 1 つの関数しか登録できませんが、複数回呼び出すことができます。つまり、DOM が完全にロードされた後に複数の関数を登録して実行でき、onload はページ上のすべてのコンテンツが完了するまで待機する必要があります。後で実行すると、大きな画像やその他のコンテンツがあると、関数の実行に遅延が発生する可能性があります。 $ 関数は、DOM 構造が完全にロードされている限り実行できます。簡単な例を見てみましょう:

コードをコピーしますコードは次のとおりです:

JQuery の最初のページスクリプトタイプ = "テキスト/javascript" src="jquery-1.3.2.js">

<スクリプトタイプ = "テキスト/javascript">
$(関数(){
var p=$('#p1')

私は
>
ご覧のとおり、最も単純なセレクターは getElementById に似ており、要素の ID をセレクターとして使用します。 p が何であるかを確認するには、js デバッガーを使用します。

p は、選択された要素を含む配列のようなオブジェクトです。 [メソッド] ノードを開くと、jQuery によって提供されている多くのメソッドが表示されます。この例では要素が 1 つだけであるため、HTML 要素は p[0] を通じて取得できます。これは getElementById によって取得されるオブジェクトと同じです。

jQuery セレクターの利点は、ブラウザーが CSS2 と互換性があるかどうかに関係なく、CSS2 セレクターとほぼ完全な互換性があることです。 CSS セレクターに詳しくない場合は、私の以前のブログ「CSS セレクター」を参照してください。選択した要素には多くのメソッドを適用できますが、これらのメソッドはこの記事では取り上げません。このメソッドは、attr 属性の値を与えることができます。以下に示す例では、このメソッドを使用してページ要素に少しのフォント変更を追加し、特定のセレクターによって選択されている要素を区別できます。この例の内容は前回の記事の例とほぼ同じなので説明は省略しますが、この記事の例はIE6にも適用できます。

コードをコピー

コードは次のとおりです:

JQuery Selector

This is H1

This is H2

This is H3

Real Warning!

Common Worning

Warning and Big

I am title

Real Warning!

P with an ID and class

The last line.

P with an ID

I am title

I am title2

Hello World

HelloWorld

Hello-World

Class warning inside p

效果如下:

jQuery的强大之处还不限于此，除了支持CSS选择符以外，jQuery自身还支持其他的选择符，其中一大类就是基于位置的选择符。例如选择列表中的第一个，或者表格中的偶数行等等。这类选择器的一般形式是 :location，例如 a:first，匹配页面上第一个a， p:even 匹配页面上偶数个p.下面详细介绍。

选择器	描述
:first	页面最先出现的。li a:first 在li标签下第一个出现的a
:last	同上,最后出现的。
:first-child	最先的子元素
:last-child	最后的子元素
:nth-child(n)	返回第n个子元素（从1开始）
:nth-child(even\|odd)	返回第偶数\|奇数个子元素
:even :odd	第偶数、奇数个元素
:eq(n) :gt(n) :lt(n)	返回第n个元素（从0开始），第n个元素之后元素，第n个元素之前的元素

先見一例子再作解释：

复制代码代码如下:

< ;html xmlns="http://www.w3.org/1999/xhtml">

カスタムセレクター

エントリーレベルのデジタル一眼レフカメラの価格

会社
モデル
価格

キヤノン
1000D
3800

キヤノン
450D
4100

キヤノン
500D
4900

キヤノン
550D
6100

ニコン
D3000
3600

ニコン
D5000
4600

ペンタックス
Kx
3900

ソニー
a230
2900

ソニー
a450
4400

日付: 2010-03

最初の句は、最初の行を大文字に設定します。 2 番目の句は、カップリングの背景を灰色に設定します。第４の条件は、第２の行が開始するすべてのｔｒの第１の子要素を斜めに配置することである。

の 4 番目の列は、セレクターの組み合わせ使用を示しています。この種のセレクターと CSS セレクターは同様に、組み合わせて使用できることに注意してください。前者は全体的に示されています。上の解釈を組み合わせると、最終的な結果は次のようになります。