jQuery フィルターの詳細: フィルター機能にどのような要素が含まれているかを調べます。

jQuery は、DOM 操作とイベント処理を簡素化するために使用される非常に人気のある JavaScript ライブラリです。 jQuery では、フィルターは開発者が特定の要素または要素のグループを選択するのに役立つ強力な機能です。この記事では、jQuery フィルターの詳細な分析を提供し、さまざまな種類のフィルターとその使用方法を詳しく説明し、読者がこの機能をよりよく理解して使用できるようにコード例を示します。

1. 基本フィルター

1.1 :first

#:first フィルターは、最初に一致する要素を選択するために使用されます。たとえば、次のコードは最初の <div> 要素を選択します: <pre class='brush:javascript;toolbar:false;'>$(&quot;div:first&quot;)</pre><h4>1.2 <code>:last

#:lastFilter は、最後に一致した要素を選択するために使用されます。サンプル コードは次のとおりです。

$("div:last")

1.3

:even および :odd

:evenフィルターは要素を選択します:odd フィルターは奇数の位置にある要素を選択します。サンプル コードは次のとおりです:

$("ul li:even")  // 选择<ul>下偶数位置的<li>元素
$("ul li:odd")   // 选择<ul>下奇数位置的<li>元素

2. コンテンツ フィルター

2.1

:contains()

:contains()Filtering セレクターは、指定されたテキストを含む要素を選択します。サンプル コードは次のとおりです。

$("p:contains('Hello')")  // 选择包含文本“Hello”的<p>元素

2.2

:empty および :parent

:empty フィルターは、 :parent フィルターは、少なくとも 1 つの子要素を持つ要素を選択します。サンプル コードは次のとおりです:

$("div:empty")   // 选择空的<div>元素
$("div:parent")  // 选择有子元素的<div>元素

3. 可視性フィルター

3.1

:visible および :hidden

# # :visible

フィルターは表示要素を選択し、:hidden フィルターは非表示要素を選択します。サンプル コードは次のとおりです: <pre class='brush:javascript;toolbar:false;'>$(&quot;.menu:visible&quot;) // 选择可见的菜单元素 $(&quot;form:hidden&quot;) // 选择隐藏的表单元素</pre>4. フォーム フィルター

4.1

:input

:input

フィルターはすべてを選択しますinput、select、textarea などの入力要素。サンプル コードは次のとおりです。 <pre class='brush:javascript;toolbar:false;'>$(&quot;form :input&quot;) // 选择表单中的所有输入元素</pre>4.2

:checked

および :selected

:checked

フィルターは、 selected complex 選択ボックスまたはラジオ ボタン、:selectedフィルターは、選択された <option></option> 要素を選択します。サンプル コードは次のとおりです: <pre class='brush:javascript;toolbar:false;'>$(&quot;input:checked&quot;) // 选择被选中的输入框 $(&quot;option:selected&quot;) // 选择被选中的&lt;option&gt;元素</pre>5. カスタム フィルター

組み込みフィルターに加えて、カスタム フィルターを作成することもできます。以下は例です:

$.expr[':'].startsWith = function (element, index, match) {
    return $(element).text().trim().startsWith(match[3]);
};

$("ul li:startsWith('A')")  // 选择以“A”开头的<li>元素

結論

この記事の導入を通じて、読者は jQuery フィルターについてより深く理解できます。フィルターは、開発者が操作する必要がある要素を正確に選択し、コードの効率と読みやすさを向上させるのに役立ちます。実際の開発では、プロジェクトの要件に基づいて適切なフィルターを選択することが非常に重要ですが、特定のニーズを満たすために必要に応じてカスタム フィルターを作成することもできます。この記事が、読者が jQuery フィルターの使用をよりよく習得し、フロントエンド開発スキルを向上させるのに役立つことを願っています。