jQueryセレクター

jQuery セレクター

jQuery セレクターを使用すると、HTML 要素のグループまたは個々の要素を操作できます。

jQuery セレクター

jQuery セレクターを使用すると、HTML 要素のグループまたは個々の要素を操作できます。

jQuery セレクターは、要素の ID、クラス、タイプ、属性、属性値などに基づいて HTML 要素を「検索」(または選択) します。これは、いくつかのカスタムセレクターに加えて、既存の CSS セレクターに基づいています。

jQuery のすべてのセレクターはドル記号 $() で始まります。

要素セレクター

jQuery 要素セレクターは、名前に基づいて要素を選択します。

ページ内のすべての <p> 要素を選択します:

$("p")

例

ユーザーがボタンをクリックすると、すべての <p> 要素が非表示になります:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>jQuery示例</title> 
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

#id セレクター

jQuery #id セレクターは、HTML 要素の id 属性を通じて指定された要素を選択します。

ページ上の要素の ID は一意である必要があるため、ページ上で一意の要素を選択したい場合は、#id セレクターを使用する必要があります。

ID で要素を選択するための構文は次のとおりです:

$("#test")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>
<body>
<h2>好好学习</h2>
<p>天天向上</p>
<p id="test">PHP测试</p>
<button>点我</button>
</body>
</html>

.class selector

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

文法は次のとおりです: ($ (". Test")

文法

説明

("*") すべての要素を選択

$ (this) 現在の HTML 要素を選択

$ ("" " p.intro") クラスのイントロを持つ <p> 要素を選択します。

$("p:first")最初の要素を選択します("ul li:first-child") 各

要素を選択します
$("[href] ") href 属性を持つ要素を選択します
$("a [target='_blank']") target 属性値が "_blank" に等しい <a> 要素をすべて選択します
$("a[target! ='_blank']") "_blank" & Lt; a & gt; 要素
$(": Button") すべて選択 type = "Button" & lt; input と等しくない対象の属性値をすべて選択します& gt; 要素と & lt; ボタン & gt; 要素
("tr: ODD") 要素を選択します。
jQuery 関数の使用
Web サイトに多くのページが含まれており、jQuery 関数のメンテナンスが簡単であることを希望する場合は、jQuery 関数を別の .js ファイルに入れてください。
チュートリアルで jQuery を説明するときは、関数を <head> セクションに直接追加します。ただし、次のように、それらを別のファイルに置く方がよいでしょう (src 属性を介してファイルを参照します):
```
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
```

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); </script> </head> <body> <h2 class="test">你马上就看不见我了</h2> <p class="test">你就要看不见我了</p> <p>为什么还能看见我</p> <button>点我</button> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear