ホームページ ウェブフロントエンド jsチュートリアル JQuery filters_jquery の全シリーズの紹介

JQuery filters_jquery の全シリーズの紹介

May 16, 2016 pm 05:24 PM

1. オブジェクトを選択します

1).基本

・#id 指定された ID に基づいて要素を照合します。例: $("#id")
·element は、指定された要素名に基づいてすべての要素と一致します。例: $("div")
·.class 指定されたクラスに基づいて要素を照合します。例: $(".style1");
·* はすべての要素に一致します。例: $("*")
·selector1,selector2,selectorN は、各セレクターに一致する要素を結合して一緒に返します。例: $("#id,div,.style1")

2).フォーム

・:button はすべてのボタンと一致します。例: $(":button")
·:checkbox はすべてのチェックボックスと一致します。例: $(":checkbox")
·:file はすべてのファイル フィールドに一致します。例: $(":File")
・:hidden は、すべての非表示要素、または非表示タイプの要素に一致します。例: $("input:hidden")
·:image すべての画像フィールドに一致します。例: $(":image")
·:input は、すべての input、textarea、select、button 要素に一致します。例: $(":input")
·:password はすべてのパスワード ボックスに一致します。例: $(":password")
·:radio はすべてのラジオ ボタンに一致します。例: $(":radio")
·:reset はすべてのリセット ボタンに一致します。例: $(":reset")
·:submit すべての送信ボタンと一致します。例: $(":submit")
·:text すべての単一行テキスト ボックスに一致します。例: $(":text")
·:header は、h1、h2、h3 などのヘッダー要素と一致します。例: $(":header").css("background", "#EEE");

2. フィルタ条件

1).属性フィルタリング

·[attribute*=value] 指定された属性を、特定の値を含む要素と照合します。例: $("input[name*='man'")
·[attribute!=value] は、指定された属性を含むすべての要素と一致しますが、その属性は特定の値と等しくありません。例: $(input[name!='man');
·[attribute$=value] は、指定された属性が何らかの値で終わる要素と一致します。例: $("input[name$='man']")
·[attribute=value] は、指定された属性が特定の値である要素と一致します。例: $("input[name='man']");
·[attribute] は、指定された属性を含む要素と一致します。例: $("div[id]")
·[attribute^=value] は、指定された属性が何らかの値で始まる要素と一致します。例: $("input[name^='man']")
·[selector1][selector2][selectorN] は同時に複数の条件を満たします。例: $("input[id][name$='man']")
·:hidden はすべての非表示要素に一致します。例: $("tr:hidden")
·:visible は、すべての表示要素に一致します。例: $("tr:visible")
·:checked は、選択されたすべての選択要素 (チェック ボックス、ラジオ ボタンなど、select のオプションを除く) に一致します。例: $("input:checked")
·:disabled は、無効になっているすべての要素に一致します。例: $("input:disabled")
·:enabled は、使用可能なすべての要素と一致します。例: $("input:enabled")
·:selected は、選択されたすべてのオプション要素と一致します。例: $("select option:selected")

2) コンテンツフィルタリング

·:contains(text) 指定されたテキストを含む要素と一致します。例: $("div:contains('John')")
·:empty は、子要素またはテキストを含まないすべての空の要素に一致します。例: $("td:empty")
·:has(selector) は、セレクターによって一致する要素を含む要素に一致します。例: $("div:has(p)");
·:parent は、子要素またはテキストを含む要素に一致します。例: $("td:parent")

3) レベルフィルタリング

・ancestor子孫は、指定された祖先要素の下にあるすべての子孫要素と一致します。例: $("form input")
·parent > child は、指定された親要素の下にあるすべての子要素と一致します。例: $("form > input")
·prev next は、prev 要素の直後にあるすべての next 要素と一致します。例: $("label input")
·prev ~ neighbors は、prev 要素の後のすべての兄弟要素と一致します。例: $("form ~ input")
·:first-child は最初の子要素と一致します。例: $("ul li:first-child")
·:last-child は最後の子要素と一致します。例: $("ul li:last-child")
·:nth-child(index/even/odd/equation) は、親要素の下にある N 番目の子要素または奇数偶数要素と一致します。例: $("ul li:nth-child(2)")
·:only-child 要素が親要素の唯一の子要素である場合、その要素が一致します。例: $("ul li:only-child")

4).方法スクリーニング

·:animated は、アニメーション効果を実行するすべての要素と一致します。例: $("div:animated");
·:eq(index) は、指定されたインデックス値を持つ要素と一致します。例: $("tr:eq(1)")
·:even は、0 から数えて偶数のインデックス値を持つすべての要素に一致します。例: $("tr:even")
·:first は、最初に見つかった要素と一致します。例: $("tr:first")
·:gt(index) は、0 から数えて、指定されたインデックス値より大きいすべての要素に一致します。例: $("tr:gt(0)")
·:last は最後に見つかった要素と一致します。例: $("tr:last")
·:lt(index) は、指定されたインデックス値よりも小さいすべての要素に一致します。例: $("tr:lt(2)")
·:not(selector) 指定されたセレクターに一致するすべての要素を削除します。例: $("input:not(:checked)")
·:odd は、0 から数えて奇数のインデックス値を持つすべての要素に一致します。例: $("tr:odd")

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? 独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

jQueryマトリックス効果 jQueryマトリックス効果 Mar 10, 2025 am 12:52 AM

マトリックスの映画効果をあなたのページにもたらしましょう!これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです! それがどのように機能するか プラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata(x、y、settings.greasize、settings.greasize).data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します

シンプルなjQueryスライダーを構築する方法 シンプルなjQueryスライダーを構築する方法 Mar 11, 2025 am 12:19 AM

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。 今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています! 画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。 次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

Angularを使用してCSVファイルをアップロードおよびダウンロードする方法 Angularを使用してCSVファイルをアップロードおよびダウンロードする方法 Mar 10, 2025 am 01:01 AM

データセットは、APIモデルとさまざまなビジネスプロセスの構築に非常に不可欠です。これが、CSVのインポートとエクスポートが頻繁に必要な機能である理由です。このチュートリアルでは、Angular内でCSVファイルをダウンロードおよびインポートする方法を学びます

See all articles