jqueryセレクター百科事典、jqueryセレクターの包括的かつ詳細な説明

セレクターには固定された定義がありません。jQuery のセレクターは、スタイル シートのセレクターとある程度似ています。セレクターには次の特徴があります:
1.コードの記述を簡素化します
2.暗黙的な反復
3.オブジェクトが存在するかどうかを判断する必要はありません。jQuery ライブラリでは、$ は $("#foo") や jQuery("#foo) の略称です。はい、$.ajax と jQuery.ajax は同等です。特別な指示がなければ、プログラム中の$記号はjQueryの略称と理解していただければと思います。
これで正式に jQuery セレクターの勉強に入ります。セレクターは、機能の習慣に従って分類され、読者がそれらを習得できるように、さまざまなタイプの分類子が以下に分類され、それぞれ説明されます。
1. 基本的なセレクター
基本的なセレクターには #id、element、.class、* と selectorl、selector2.selectorN の 5 種類のセレクターがあり、それぞれのセレクターの役割と使用方法を例を示して紹介します。
1． #id セレクター
#id セレクターは、指定された ID に基づいて要素と一致します。セレクターに特殊文字が含まれている場合は、2 つのスラッシュでエスケープでき、戻り値は Array になります。
2．要素セレクター
要素セレクターは、検索に使用される要素です。 DOM ノードを指すタグ名。戻り値は Array です。
3．クラス セレクター
クラス セレクターは、指定されたクラスに基づいて要素を照合し、検索に使用されるクラスです。要素は複数のクラスを持つことができます。一致するものが 1 つある限り、その要素は Array と一致します。

例:

<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. *セレクター

*セレクターは主に、コンテキストに基づいて検索し、すべての要素に一致するために使用されます。戻り値は Array です。
5． selector1, selector2, selectorN selector
このタイプのセレクターは、各セレクターで一致した要素を組み合わせて、それらをまとめて返します。任意の数のセレクターを指定し、一致した要素を 1 つの結果にマージできます。戻り値は Array です。次の例では、選択した項目に対して CSS 操作を実行することで、読者は selector1、selector2、および selectorN の機能を明確に理解できます。
2. レベルセレクター
レベルセレクターには、祖先、子孫、親>子、前+次、前〜兄弟の5つの形式が含まれます。以下では、例を使用して、各セレクターの役割と使用法を詳しく紹介します。
1．先祖子孫セレクター
は、指定された先祖要素の下にあるすべての子孫要素を照合することを指します。一方、子孫は要素を照合するために使用されるセレクターであり、最初の子孫です。戻り値は Array です。
2．親>子セレクター
親>子セレクターは、指定された親要素の下にあるすべての子要素と一致することを意味します。 2 つのパラメータの意味は次のとおりです。親は有効なセレクタを表し、子は要素の一致に使用されるセレクタであり、最初のセレクタの子要素です。戻り値は Array です。
3． prev+next セレクター
このタイプのセレクターの機能は、prev 要素の直後にあるすべての next 要素と一致することです。 2 つのパラメータの意味は次のとおりです。prev は任意の有効なセレクタを表し、next は最初のセレクタの直後にある有効なセレクタを表します。戻り値は Array です。
4． prev ~ 兄弟セレクター
prev ~ 兄弟セレクターは、prev 要素に一致するすべての兄弟要素を表します。 2 つのパラメーターの意味は次のとおりです: prev は任意の有効なセレクターを表し、sisters はセレクターを表し、最初のセレクターの兄弟として機能します。戻り値は Array です。

例:

<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 の疑似クラス セレクターと同じ構文を持ちます。つまり、セレクターがすべて前にあります。コロンの始まりによって。
フィルターセレクターは合計 6 種類と多くの内容を含みますが、分類することができます。以下では、さまざまな種類のセレクターについて詳しく説明します。
1．基本的なフィルター セレクター
基本的なフィルター セレクターは、最も一般的に使用されるタイプのフィルター セレクターであり、ここで詳しく説明されている次の形式が主に含まれています:
(1): 最初/: 最後のセレクター。
(2): セレクターではありません。
(3) :even および :odd セレクター。
(4):eq:gt、:lt、セレクター。
(5): ヘッダーセレクター。
(6):アニメーションセレクター。
例:

<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(&#39;hyip&#39;)").text();
//内容为空的li的后一个li内容 结果为理财
jQuery("li:empty+li").text();
//包含a标签的li的内容 结果为投资
jQuery("li:has(a)").text();

3．可见性过滤选择器
可见性过滤选择器比较简单，其包含两种选择器，主要是用来匹配所有可见元素和不可见元素。下面将会对这两种选择器进行详细介绍。
（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） [attribute]选择器。
（2）[attribute=value]、[attribute!=value]选择器（此处包含两种）。
（3）[attribute^=value]、[attribute$=value]、[attribute*=value]选择器（此处包含三种）。
（4）[selector][selector2]选择器。
举例：

<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=&#39;hyipinvest&#39;]").val());
//name以hyip开始的值 结果为hyip投资
alert(jQuery("input[name^=&#39;hyip&#39;]").val());
//name以hyip结束的值 结果为投资hyip
alert(jQuery("input[name$=&#39;hyip&#39;]").val());
//name包含oo的值 结果为HYIP
alert(jQuery("input[name*=&#39;oo&#39;]").val());

5．子元素过滤选择器
html由层层嵌套在一起的标签组成，由于一些标签需要进行单独处理，如何选取一个或者一些特定的嵌套标签在程序中就成为了一个问题。jQuery提供了子元素过滤选择器解决了这个问题。它包括4个选择器，具体内容将在下面详细讲解。
（1）:nth-child选择器。
（2）:first-child、:last-child选择器（两种）。
（3）:only-child选择器。
6．表单对象属性过滤选择器
这部分内容相当简单，只包含四种类型的选择器，这些选择器分别用来匹配可用元素或者不可用元素、选中元素等。下面将以实例的形式对此部分内容进行讲解。
（1）:enabled、:disabled选择器。
（2）:checked选择器。
（3）:selected选择器。
表单过滤选择器是用于处理html中表单的选择器，其中不仅仅包括经常用到的按钮、文本域、单选框、复选框等，还涉及了很少用到的图片、隐藏域、文件上传等标签。下面将会对这些选择器进行具体介绍。
（1）:input选择器。
（2）:text、:password选择器。
（3）:radio、:checkbox选择器。
（4）:submit、:image、:reset、:button、:file选择器。
（5）:hidden选择器。

Query选择器就总结到这里，这些基本上都是在学习过程中遇到的，还有极少部分没有总结出来。经过一段时间实践，相信大家就能够熟练的使用jQuery选择器了。

更多jquery选择器大全 全面详解jquery选择器相关文章请关注PHP中文网！