jQueryセレクターを使用すると、HTML要素のグループまたは単なる要素を操作できます。
jQueryセレクターは、要素のID、クラス、タイプ、属性、属性値などに基づいてHTML要素を検索(または選択)します。これは既存のCSSセレクターに基づいており、さらにいくつかのカスタムセレクターもあります。
jQueryのすべてのセレクターはドル記号“$()”で始まります。
目次
要素セレクター
jQuery要素セレクターは、要素名に基づいて要素を選択します。
ページ内のすべての<p>要素を選択します。
$("p")
実例
ユーザーがボタンをクリックすると、すべての<p>要素が非表示になります。
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
#idセレクター
jQuery #idセレクターは、HTML要素のid属性によって指定された要素を選択します。
ページでの要素のIDは唯一であり、#idセレクターを使用してページでの唯一の要素を選択する必要があります。
idで要素を選択する構文は次のとおりです。
$("#test")
実例
ユーザーがボタンをクリックすると、id=”test”属性を含む要素が非表示になります。
$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });
.classセレクター
jQueryクラスセレクターは、指定されたクラス(class)によって要素を検索できます。
構文は次のとおりです。
$(".test")
実例
ユーザーがボタンをクリックすると、class=”test”属性を含むすべての要素が非表示になります。
$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
他の実例
構文 | 説明 | 実例 |
$(“*”) | すべての要素を選択する | 実例を見る |
$(this) | 現在のHTML要素を選択する | 実例を見る |
$(“p.intro”) | Classをintroの<p>要素として選択する | 実例を見る |
$(“p:first”) | 最初の<p>要素を選択する | 実例を見る |
$(“ul li:first”) | 最初の<ul>要素にある最初の<li>要素を選択する | 実例を見る |
$(“ul li:first-child”) | 各<li>要素にある最初の<li>要素を選択する | 実例を見る |
$(“[href]”) | href属性が含む要素を選択する | 実例を見る |
$(“a[target=’_blank’]”) | target属性値が”_blank”要素に等しいすべての<a>要素を選択する | 実例を見る |
$(“a[target!=’_blank’]”) | target属性値が”_blank”要素に等しくないすべての<a>要素を選択する | 実例を見る |
$(“:button”) | type=”button”ですべての<input>要素と<button>要素を選択する | 実例を見る |
$(“tr:even”) | 偶数行の<tr>要素を選択する | 実例を見る |
$(“tr:odd”) | 奇数行の<tr>要素を選択する | 実例を見る |
スタンドアロンファイルでjQuery関数を使用する
Webサイトに多くのページが含まれていて、jQuery関数を簡単に維持できるようにしたい場合は、jQuery関数を別の.jsファイルに配置してください。
次の例では関数を<head>に直接追加します。ただし、次のように別のスタンドアロンファイルに配置することをお勧めします。(src属性によってファイルを参照します)
実例
<head> <script src=" https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js
"> </script> <script src="my_jquery_functions.js"></script> </head>
コメントを残す