ホームページ > 記事 > ウェブフロントエンド > jqueryはidセレクターのみを使用できますか?
jqueryはidセレクターのみを使用できますか?
- WBOYオリジナル
- 2022-04-20 17:44:561529ブラウズ
jquery は ID セレクターを使用するだけではありません。 jquery には、1. クラスを指定して要素を検索できるクラス セレクター、2. HTML タグ名で要素を選択できるタグ セレクター、3. XPath 式を使用して、指定された Attribute 要素を持つ要素を選択する属性セレクター、3. 属性セレクター、および 3. 属性セレクターが用意されています。 4. グループセレクターなど
このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。
jQuery では ID セレクターのみを使用できますか?
jQuery セレクターを使用すると、HTML 要素のグループまたは個々の要素を操作できます。
jQuery セレクターは、要素の ID、クラス、タイプ、属性、属性値などに基づいて HTML 要素を「検索」(または選択) します。これは、いくつかのカスタム セレクターに加えて、既存の CSS セレクターに基づいています。
jQuery のすべてのセレクターはドル記号 $() で始まります。
jQuery 要素セレクター
jQuery は、CSS セレクターを使用して HTML 要素を選択します。
$("p")
要素を選択します。
$("p.intro") class="intro" を持つすべての
要素を選択します。
$("p#demo") id="demo" を持つすべての
要素を選択します。
jQuery 属性セレクター
jQuery は、XPath 式を使用して、指定された属性を持つ要素を選択します。
$("[href]") href 属性を持つすべての要素を選択します。
$("[href='#']") href 値が「#」に等しいすべての要素を選択します。
$("[href!='#']") href 値が「#」に等しくないすべての要素を選択します。
$("[href$='.jpg']") href 値が「.jpg」で終わるすべての要素を選択します。
#id セレクター
jQuery #id セレクターは、HTML 要素の id 属性を通じて指定された要素を選択します。
ページ内の要素の ID は一意である必要があるため、ページ内の唯一の要素を選択する場合は、#id セレクターを使用する必要があります。
ID で要素を選択するための構文は次のとおりです:
$("#test")例は次のとおりです:
123 <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script>这是一个标题
这是一个段落
这是另外一个段落
出力結果:
.クラスセレクター
jQuery クラスセレクターは、クラスを指定して要素を検索できます。
構文は次のとおりです:
$(".test")例は次のとおりです:
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
这是一个标题
这是一个段落。
这是另外一个段落。
出力結果:
グループ選択
グループ セレクターは、複数のセレクターで同じ操作を同時に実行するために使用されます。
構文:
$("选择器1, 选择器2, ... , 选择器n")2 つのセレクターは英語のカンマで区切る必要があります。そうしないと、セレクターは有効になりません。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("h3,div,p,span").css("color","red");
})
</script>
</head>
<body>
<h3>中文网</h3>
<div>中文网</div>
<p>中文网</p>
<span>中文网</span>
</body>
</html> 推奨される関連ビデオ チュートリアル: jQuery ビデオ チュートリアル
以上がjqueryはidセレクターのみを使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。