jQuery を始めるための最初のレッスン jQuery selector_jquery
セレクターは、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にも適用できます。
コードをコピー
コードは次のとおりです:
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
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">
エントリーレベルのデジタル一眼レフカメラの価格
日付: 2010-03