jQuery の 4 つのセレクターの使用法と例
この記事は、jQuery の 4 つのセレクターの使用方法と例をまとめたもので、皆さんが jQuery を学ぶのに役立つことを願っています。
jQuery 要素セレクター
jQuery は CSS セレクターを使用して HTML 要素を選択します。
$("p") は
要素を選択します。
$("p.intro") は、class="intro" を持つすべての
要素を選択します。
$("p#demo") は、id="demo" を持つすべての
要素を選択します。
サンプルコード:
jqueryパート
$(document).ready(function(){//页面加载完成后执行
tagName();
// idName();
// className();
});
function tagName(){
$('p').addClass('heighlight');
}
function idName(){
$('#p').addClass('heighlight2');
}
function className(){
$('p.pClass').addClass('heighlight2');
}htmlパート
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/select.js" ></script> <link rel="stylesheet" href="css/select.css" /> </head> <body> <p id="p"> <p>this is my name!!</p> <p class="pClass">class is import!</p> <a href="#">you cai!!</a> </p> </body> </html>
cssパート
.heighlight {
background-color: blue;
}
.heighlight2 {
background-color: red;
}
.alt{
background-color:#ccc;
}jQuery 属性セレクター
クエリは XPath 式を使用して要素を選択します指定された属性。
$("[href]") href 属性を持つすべての要素を選択します。
$("[href='#']") href 値が「#」に等しいすべての要素を選択します。
$("[href!='#']") href 値が「#」に等しくないすべての要素を選択します。
$("[href$='.jpg']") href 値が「.jpg」で終わるすべての要素を選択します。
jquery部分、その他の部分は上記と同様です。
jquerycssselector
.AddClass（）または.css（）
| セレクター | インスタンス | Select |
|---|---|---|
| * | $("*") | すべての要素 |
| #id | $("#lastname") | id=要素「姓」の |
| .class | $(".intro") | class="intro"を持つすべての要素 |
| element | $("p") | すべての 要素 |
| .class.class | $(".intro.demo") | class="intro" および class="demo" を持つすべての要素 |
| :first | $("p:first") | 最初の 要素 |
| :last | $("p:last") | 最後の 要素 |
| $("tr:even") | すべての偶数 | |
| $("tr:odd") | すべての奇数 | |
| :eq(index) | $("ul li:eq(3)") | リストの 4 番目の要素 (インデックスは 0 から始まります) |
| : gt(no) | $("ul li:gt(3)") | インデックスが 3 より大きい要素をリストする |
| :lt(no) | $("ul li:lt ( 3)") | インデックスが 3 未満の要素をリストします |
| :not(selector) | $("input:not(:empty)") | 空ではないすべての入力要素 |
| :header | $( ":header")すべてのヘッダー要素 | |
| すべてのアニメーション要素 | ||
| :contains(text) | $(":contains('W3School')") | 指定された文字列のすべての要素が含まれます |
| :empty | $( ":empty") | 子 (要素) ノードのないすべての要素 |
| :hidden | $("p:hidden") | すべての非表示の 要素 |
| :visible | $("table:visible") | すべての表示可能なテーブル |
| s1,s2,s3 | $("th,td,.intro") | 選択が一致するすべての要素 |
| [attribute] | $("[href]") | href属性を持つすべての要素 |
| [attribute=value] | $("[href='#' ]" ) | href 属性値が "#" に等しいすべての要素 |
| [attribute!=value] | $("[href!='#']") | すべての href 属性要素その値は "#" と等しくありません |
| [attribute$=value] | $("[href$='.jpg']") | すべての href 属性の値には "が含まれています。 jpg」要素を最後に |
| :input | $(":input") | すべての 要素 |
| :text | $(":text") | すべてのタイプ= text" の 要素 |
| :password | $(":password") | すべての type="password" 要素 |
| :radio | $(":radio") | type="radio" のすべての 要素 |
| :checkbox | $(":checkbox") | すべての type="checkbox" |
| :submit | $(":submit") | type="submit" のすべての 要素 |
| :reset | $(":reset" ) | type="reset" のすべての 要素 |
| :button | $(":button") | type="button" のすべての 要素 |
| :image | $(":image") | すべて type="image" 要素 |
| :file | $(":file") | type="file" のすべての |
| :enabled | $(":enabled") | すべてのアクティブ化された入力要素 |
| :disabled | $(":disabled") | すべての無効化された入力要素 |
| :selected | $( ":selected") | 選択されたすべての入力要素 |
| :checked | $(":checked") | 選択されたすべての入力要素 |
以上がjQuery の 4 つのセレクターの使用法と例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7518
15
1378
52
81
11
21
68
CrystalDiskmarkとはどのようなソフトウェアですか? -crystaldiskmarkの使い方は？
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark は、シーケンシャルおよびランダムの読み取り/書き込み速度を迅速に測定する、ハード ドライブ用の小型 HDD ベンチマーク ツールです。次に、編集者が CrystalDiskMark と Crystaldiskmark の使用方法を紹介します。 1. CrystalDiskMark の概要 CrystalDiskMark は、機械式ハード ドライブとソリッド ステート ドライブ (SSD) の読み取りおよび書き込み速度とパフォーマンスを評価するために広く使用されているディスク パフォーマンス テスト ツールです。 ). ランダム I/O パフォーマンス。これは無料の Windows アプリケーションで、使いやすいインターフェイスとハード ドライブのパフォーマンスのさまざまな側面を評価するためのさまざまなテスト モードを提供し、ハードウェアのレビューで広く使用されています。
foobar2000のダウンロード方法は？ -foobar2000の使い方
Mar 18, 2024 am 10:58 AM
foobar2000 は、音楽リソースをいつでも聴くことができるソフトウェアです。あらゆる種類の音楽をロスレス音質で提供します。音楽プレーヤーの強化版により、より包括的で快適な音楽体験を得ることができます。その設計コンセプトは、高度なオーディオをコンピュータ上で再生可能 デバイスを携帯電話に移植し、より便利で効率的な音楽再生体験を提供 シンプルでわかりやすく、使いやすいインターフェースデザイン 過度な装飾や煩雑な操作を排除したミニマルなデザインスタイルを採用また、さまざまなスキンとテーマをサポートし、自分の好みに合わせて設定をカスタマイズし、複数のオーディオ形式の再生をサポートする専用の音楽プレーヤーを作成します。過度の音量による聴覚障害を避けるために、自分の聴覚の状態に合わせて調整してください。次は私がお手伝いさせてください
NetEase メールボックス マスターの使用方法
Mar 27, 2024 pm 05:32 PM
NetEase Mailbox は、中国のネットユーザーに広く使用されている電子メール アドレスとして、その安定した効率的なサービスで常にユーザーの信頼を獲得してきました。 NetEase Mailbox Master は、携帯電話ユーザー向けに特別に作成された電子メール ソフトウェアで、電子メールの送受信プロセスが大幅に簡素化され、電子メールの処理がより便利になります。 NetEase Mailbox Master の使い方と具体的な機能について、以下ではこのサイトの編集者が詳しく紹介しますので、お役に立てれば幸いです。まず、モバイル アプリ ストアで NetEase Mailbox Master アプリを検索してダウンロードします。 App Store または Baidu Mobile Assistant で「NetEase Mailbox Master」を検索し、画面の指示に従ってインストールします。ダウンロードとインストールが完了したら、NetEase の電子メール アカウントを開いてログインします。ログイン インターフェイスは次のとおりです。
Baidu Netdisk アプリの使用方法
Mar 27, 2024 pm 06:46 PM
クラウド ストレージは今日、私たちの日常生活や仕事に欠かせない部分になっています。中国有数のクラウド ストレージ サービスの 1 つである Baidu Netdisk は、強力なストレージ機能、効率的な伝送速度、便利な操作体験により多くのユーザーの支持を得ています。また、重要なファイルのバックアップ、情報の共有、オンラインでのビデオの視聴、または音楽の聴きたい場合でも、Baidu Cloud Disk はニーズを満たすことができます。しかし、Baidu Netdisk アプリの具体的な使用方法を理解していないユーザーも多いため、このチュートリアルでは Baidu Netdisk アプリの使用方法を詳しく紹介します。まだ混乱しているユーザーは、この記事に従って詳細を学ぶことができます。 Baidu Cloud Network Disk の使用方法: 1. インストール まず、Baidu Cloud ソフトウェアをダウンロードしてインストールするときに、カスタム インストール オプションを選択してください。
BTCC チュートリアル: BTCC 取引所で MetaMask ウォレットをバインドして使用する方法は?
Apr 26, 2024 am 09:40 AM
MetaMask (中国語ではリトル フォックス ウォレットとも呼ばれます) は、無料で評判の高い暗号化ウォレット ソフトウェアです。現在、BTCC は MetaMask ウォレットへのバインドをサポートしており、バインド後は MetaMask ウォレットを使用してすぐにログイン、値の保存、コインの購入などが可能になり、初回バインドで 20 USDT のトライアル ボーナスも獲得できます。 BTCCMetaMask ウォレットのチュートリアルでは、MetaMask の登録方法と使用方法、および BTCC で Little Fox ウォレットをバインドして使用する方法を詳しく紹介します。メタマスクウォレットとは何ですか? 3,000 万人を超えるユーザーを抱える MetaMask Little Fox ウォレットは、現在最も人気のある暗号通貨ウォレットの 1 つです。無料で使用でき、拡張機能としてネットワーク上にインストールできます。
iOS 17.4の新しい高度な機能「盗難デバイス保護」の使い方を教えます
Mar 10, 2024 pm 04:34 PM
Appleは火曜日にiOS 17.4アップデートを公開し、iPhoneに多数の新機能と修正をもたらした。このアップデートには新しい絵文字が含まれており、EU ユーザーは他のアプリ ストアから絵文字をダウンロードすることもできます。さらに、このアップデートでは iPhone のセキュリティ制御も強化され、より多くの「盗難デバイス保護」設定オプションが導入され、ユーザーにより多くの選択肢と保護が提供されます。 「iOS17.3では、「盗難デバイス保護」機能が初めて導入され、ユーザーの機密情報のセキュリティが強化されています。ユーザーが自宅やその他の身近な場所から離れている場合、この機能ではユーザーは最初に生体認証情報を入力する必要がありますApple ID パスワードの変更や盗難デバイス保護の無効化など、特定のデータにアクセスして変更するには、情報を再度入力する必要があります。
Xiaomi Autoアプリの使い方
Apr 01, 2024 pm 09:19 PM
Xiaomi 車用ソフトウェアは、車のリモート制御機能を提供し、ユーザーが携帯電話やコンピュータを介して車両のドアや窓の開閉、エンジンの始動、車両のエアコンやオーディオの制御など、車両を遠隔制御できるようにします。このソフトウェアの使い方や内容について、一緒に学びましょう。 Xiaomi Auto アプリの機能と使用方法の包括的なリスト 1. Xiaomi Auto アプリは 3 月 25 日に Apple AppStore で公開され、Android スマートフォンのアプリストアからダウンロードできるようになりました; 車の購入: 主要なハイライトと技術パラメータについて学びますXiaomi Auto のサービスを利用して、試乗の予約をし、Xiaomi 車の設定と注文を行い、車の受け取りの To-Do 項目のオンライン処理をサポートします。 3. コミュニティ: Xiaomi Auto ブランド情報を理解し、車の経験を交換し、素晴らしいカーライフを共有します; 4. 車の制御: 携帯電話はリモコン、遠隔制御、リアルタイム セキュリティ、簡単です。
Go 言語のインデントの仕様と例
Mar 22, 2024 pm 09:33 PM
Go 言語のインデント仕様と例 Go 言語は Google によって開発されたプログラミング言語であり、その簡潔で明確な構文で知られており、インデント仕様はコードの読みやすさと美しさに重要な役割を果たします。この記事ではGo言語のインデントの仕様を紹介し、具体的なコード例を通して詳しく解説します。インデントの仕様 Go 言語では、スペースの代わりにタブがインデントに使用されます。インデントの各レベルは 1 つのタブで、通常はスペース 4 個の幅に設定されます。このような仕様により、コーディング スタイルが統一され、チームが協力してコンパイルできるようになります。
