jQuery フィルターの詳細: フィルター機能にどのような要素が含まれているかを調べます。-jsチュートリアル-php.cn

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

王林

リリース： 2024-02-27 10:18:06

オリジナル

1144 人が閲覧しました

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

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

1. 基本フィルター

1.1 `:first`

#:first フィルターは、最初に一致する要素を選択するために使用されます。たとえば、次のコードは最初の <div> 要素を選択します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$("div:first")</pre><div class="contentsignin">ログイン後にコピー</div></div><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 フィルターは非表示要素を選択します。サンプルコードは次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$(".menu:visible") // 选择可见的菜单元素 $("form:hidden") // 选择隐藏的表单元素</pre><div class="contentsignin">ログイン後にコピー</div></div>4. フォームフィルター

4.1

:input

フィルターはすべてを選択しますinput、select、textarea などの入力要素。サンプルコードは次のとおりです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$("form :input") // 选择表单中的所有输入元素</pre><div class="contentsignin">ログイン後にコピー</div></div>4.2

:checked

および `:selected`

:checked

フィルターは、 selected complex 選択ボックスまたはラジオボタン、:selectedフィルターは、選択された <option> 要素を選択します。サンプルコードは次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$("input:checked") // 选择被选中的输入框 $("option:selected") // 选择被选中的<option>元素</pre><div class="contentsignin">ログイン後にコピー</div></div>5. カスタムフィルター

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

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

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

ログイン後にコピー

結論