jqueryセレクタ大全体詳しくはjqueryセレクタです。

7092 ワード
jquery jqueryセレクタ
セレクタには固定的な定義がありません。jQueryのセレクタとスタイルシートのセレクタはある程度似ています。選択器具には次のような特徴があります。1.コードを簡略化した作成2.暗黙的な反復3.対象が存在するかどうかを判断する必要はありません。この中の「$」はセレクタにとって不可欠な部分です。jQueryライブラリには$jQueryという簡単な書き方があります。特に説明がない場合は、プログラム中のドル記号をすべてjQueryの略字形式として理解することができます。今私たちは正式にjQueryセレクタの勉強に入ります。セレクタの機能習慣によって、セレクタを分類し、異なるタイプの分類器を分類し、それぞれ説明して、読者に習得させる。一、基本的なセレクタは5種類のセレクタを含みます。铂id、element、.class、*とselectorl、selector 2.selectorN、それぞれのセレクタの役割と使用方法を紹介します。1.萼idセレクタ〹idセレクタは、指定されたIDに基づいて要素にマッチします。特殊文字が選択されている場合は、Arayの戻り値を2つのスラッシュで変換できます。2.element選択器element選択器は、検索のための要素です。DOMノードを指すラベル名。その戻り値は、Aray＜Element（s）＞である。3.クラス選択器.クラス選択器は、与えられたクラスマッチング要素に基づいて、検索するクラスです。一つの要素には複数の種類があり、一つの該当があれば、その戻り値はAray＜Element（s）＞である。
例：

<input type="text" id="ID" value="  ID  " />
<a>        </a>
<input type="text" class="classname" value="    css    " />
jQuery("#ID").val();
jQuery("a").text();
jQuery(".classname").val();
は、それぞれ要素の値を得ることができる。以上の3つは最も一般的なセレクタであり、IDセレクタは最も効率的であり、可能な限りそれを使用すべきである。
4.*選択器*選択器は、コンテキストに合わせて検索し、すべての要素にマッチする選択器が多いです。その戻り値は、Aray＜Element（s）＞である。5.selector 1、selector 2、selectorNセレクタのようなセレクタは、各セレクタがマッチする要素を統合して返します。任意の複数のセレクタを指定し、結果にマッチする要素を結合します。その戻り値は、Aray＜Element（s）＞です。次の例では、選択項目をCSS操作で読者にselector 1、selector 2、selectorNセレクタの役割を明確に理解させる。二、階層セレクタ階層セレクタは5種類の形式を含みます。ancestor、descendant、parent＞child、prev+nextとprev~siblings。各セレクタの役割および使用方法については、以下の配合例によってそれぞれ詳細に説明する。1.ancestor descendant選択器は、与えられた祖先要素の下ですべての後代要素に整合することを指し、パラメータとしてのancestorは任意の有効な選択器を表し、descendantは要素に適合する選択器を用い、そして最初の選択器の子孫である。その戻り値は、Aray＜Element（s）＞です。2.parent＞childセレクタparent＞childセレクタは、与えられた親要素の下ですべてのサブ要素に整合することを表す。二つのパラメータがそれぞれ表す意味は以下の通りです。parentは任意の有効選択器を表します。childは元素を整合するためのセレクタであり、最初のセレクタのサブ要素である。その戻り値は、Aray＜Element（s）＞である。3.prev+nextセレクタのようなセレクタの役割は、prev要素の直後のnext要素すべてにマッチすることである。二つのパラメータはそれぞれ以下のように表されています。prevは任意の有効セレクタを表します。nextは有効セレクタを表し、最初のセレクタに続く。その戻り値は、Aray＜Element（s）＞である。4.prev~siblingsセレクタprev~siblingsセレクタは、prev要素に一致した後のすべてのsiblings要素を表す。二つのパラメータはそれぞれ以下のように表されています。prevは任意の有効セレクタを表します。siblingsはセレクタを表し、最初のセレクタの同世代として機能します。その戻り値は、Aray＜Element（s）＞である。例えば、

<div id="divTest">
        <input type="text" value="  " />
        <input id="next" type="text" />
        <input type="text"  value="  " />
        <input type="text" title="  " value="  " />
        <a>1</a>
        <a>2</a>
</div>
//  div  a        12
jQuery("#divTest a").text();
//  div           
jQuery("#divTest>input").val();
//  id next               
jQuery("#next+input").val();
//  ，    title         
jQuery("#next~[title]").val();
3、フィルタセレクタフィルタリングセレクタは、主に特定のフィルタリング規則によって必要なDOM要素をフィルタリングし、フィルタリング規則はCSSの擬似セレクタ文法と同じ、すなわち、セレクタはすべて1つのコロンで始まる。フィルタ選択器に関する内容は多く、全部で6種類ありますが、分類できます。いろいろなタイプのセレクタについて詳しく説明します。1.基本フィルタ選択器の基本フィルタ選択器はフィルタ選択器の中で最も一般的なもので、主に以下のいくつかの形式を含んでいます。ここで詳細に説明します。（1）：first/：lastセレクタ。2）：notセレクタ。（3）：evenと：oddセレクタ。（4)：eq：gt、：lt、セレクタ。5)：headerセレクタ。6）：animedセレクタ。例えば、

<div id="divTest">
    <ul>
        <li>  </li>
        <li>  </li>
        <li>  </li>
        <li>  </li>
        <input type="radio" value="  " checked="checked" />
        <input type="radio" value="   " />
    </ul>
</div>
//   li        
jQuery("li:first").text();
//    li        
jQuery("li:last").text();
//input             
jQuery("li input:not(:checked)").val();
//      li         
jQuery("li:even").text();
//      li         
jQuery("li:odd").text();
//    2 li         
jQuery("li:gt(2)").text();
//    1 li         
jQuery("li:lt(1)").text();
2.コンテンツフィルタ選択器の内容フィルタ選択器は、主に、contains、：empty、：has、：parentの4つのフィルタを含み、この部分のフィルタは、上記で紹介された基本フィルタ選択器の補足であり、ページ選択、設定要素表示などの側面に重要な役割を果たしている。各セレクタについて詳細に説明します。1）：containsセレクタ。2)：emptyセレクタ。3）：hasセレクタ。4)：parentセレクタ。
例えば、

<div id="Test">
    <ul>
        <li>hyip  </li>
        <li>hyip</li>
        <li></li>
        <li>  </li>
        <li><a>  </a></li>
    </ul>
</div>   
//  hyip li       hyip   hyip
jQuery("li:contains('hyip')").text();
//     li    li        
jQuery("li:empty+li").text();
//  a   li         
jQuery("li:has(a)").text();
3.可視フィルタ選択器の視覚的フィルタリングは、2つの選択器を含み、主にすべての可視要素と非可視要素との整合に用いられる。この二つのセレクタについて詳細に説明します。1）：hiddenセレクタ。2)：visibleセレクタ。
たとえば、

<ul>
    <li>  </li>
    <li style="display:none;">   </li>
</ul>
//    li          
jQuery("li:hidden").text();
//   li         
jQuery("li:visible").text();
4.属性フィルタ選択器属性フィルタリングセレクタは、与えられた属性を含む要素と一致するために使用され、もちろん、この属性を含まない要素などと一致することもできる。属性フィルタ選択器は、以下の7つの選択器を含んでいます。1)[アトリブテ]セレクタ。2)[アトリブト=value]、[アトリブト！=選択器(ここには2つの種類があります。)3)[アトリブテ^=value]、[[アトリブトドル=value]、[[アトリブト*=value]セレクタ(ここには三つの種類があります)。4)[selector][selector 2]セレクタ。たとえば、

<input type="text" name="hyipinvest" value="hyip  " />
<input type="text" name="investhyip" value="  hyip" />
<input type="text" name="google" value="HYIP" />
//name hyipinvest      hyip  
alert(jQuery("input[name='hyipinvest']").val());
//name hyip        hyip  
alert(jQuery("input[name^='hyip']").val());
//name hyip          hyip
alert(jQuery("input[name$='hyip']").val());
//name  oo      HYIP
alert(jQuery("input[name*='oo']").val());
5.サブエレメントフィルタセレクタは、複数の層が嵌合されているタブから構成されています。いくつかのタブは単独で処理する必要があるため、どのように1つまたは複数の特定のネストタグを選択するかは、プログラム上で問題となります。jQueryは、この問題を解決するためにサブ要素フィルタ選択器を提供します。4つのセレクタが含まれています。具体的な内容は以下に詳しく説明します。1)：nth-childセレクタ。2)：first-child、：last-childセレクタ（2つ）。3)：only-childセレクタ。6.フォームオブジェクト属性フィルタ選択器のこの部分はかなり簡単で、4種類の選択器だけが含まれています。これらの選択器はそれぞれ利用可能な要素とマッチするか、利用できない要素と選択するかなどに使用されます。この部分について、実例として説明します。1）：enabled、：disabledセレクタ。2）：checked選択。3）：セレクト。フォームフィルタ選択器は、htmlのフォームを処理するためのセレクタであり、頻繁に使用されるボタン、テキストドメイン、単一選択ボックス、チェックボックスなどだけでなく、使用することが少ないピクチャ、隠し領域、ファイルアップロードなどのラベルにも関連している。これらのセレクタについて具体的に説明します。1）：inputセレクタ。（2）：text、：passwordセレクタ。3）：radio、：checkboxセレクタ。4)：submit、：イメージ、：reet、：button、：fileセレクタ。5）：hiddenセレクタ。
Queryセレクタはここまでまとめました。これらは基本的に勉強中に出会ったものです。まだいくつかの部分がまとめられていません。しばらくの時間を経て、皆さんはjQueryセレクタを上手に使うことができると信じています。
ネットではCheckBoxListで単独選択を実現します。
jQueryはページ要素の絶対/相対位置である絶対X，Y座標を獲得します。