jqueryはidセレクターのみを使用できますか?-フロントエンドQ&A-php.cn

jqueryはidセレクターのみを使用できますか?

WBOY

リリース： 2022-04-20 18:00:29

オリジナル

1511 人が閲覧しました

jquery は ID セレクターを使用するだけではありません。 jquery には、1. クラスを指定して要素を検索できるクラスセレクター、2. HTML タグ名で要素を選択できるタグセレクター、3. XPath 式を使用して、指定された Attribute 要素を持つ要素を選択する属性セレクター、3. 属性セレクター、および 3. 属性セレクターが用意されています。 4. グループセレクターなど

jqueryはidセレクターのみを使用できますか?

このチュートリアルの動作環境: 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(){
    $(&quot;#test&quot;).hide();
  });
});
</script>


这是一个标题
这是一个段落
这是另外一个段落

ログイン後にコピー

出力結果:

jqueryはidセレクターのみを使用できますか?

.クラスセレクター

jQuery クラスセレクターは、クラスを指定して要素を検索できます。

構文は次のとおりです:

$(".test")

ログイン後にコピー

例は次のとおりです:

<script>
$(document).ready(function(){
  $("button").click(function(){
    $(&quot;.test&quot;).hide();
  });
});
</script>


这是一个标题
这是一个段落。
这是另外一个段落。

ログイン後にコピー

出力結果:

jqueryはidセレクターのみを使用できますか?

グループ選択

グループセレクターは、複数のセレクターで同じ操作を同時に実行するために使用されます。

構文:

$("选择器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 サイトの他の関連記事を参照してください。