jQueryセレクター

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

jQuery セレクター

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

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

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

要素セレクター

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

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

$("p")

例

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</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 selector

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

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

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

$("#test")

例

ユーザーがボタンをクリックすると、id="test" 属性を持つ要素は次のようになります。 hidden:

サンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<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">这是另外一个段落</p>
<button>点我</button>
</body>

</html>

サンプルの実行»

オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください

.クラスセレクター

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

構文は次のとおりです:

$(".test")

Instance

ユーザーがボタンをクリックすると、class="test" 属性を持つすべての要素が非表示になります:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<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>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

その他の例

$(" li:first-child")$("[href]")$("a[target='_blank']")$("a [target!='_blank']")$(":button")$("tr:even") 要素を選択奇数の位置にある <tr> 要素を選択しますWeb サイトに多くのページが含まれており、jQuery 関数を使用する場合メンテナンスが簡単なため、jQuery 関数を別の .js ファイルに配置してください。

構文	説明	インスタンス
$("*")	すべての要素を選択	オンラインの例
$(this)	現在の HTML 要素を選択します	オンラインインスタンス
$("p.intro")	クラスイントロを持つ<p>要素を選択	オンラインインスタンス
$("p:first")	最初のものを選択<p> 要素	オンラインインスタンス
$("ul li:first")	最初の要素の最初の要素を選択します
各 <ul> 要素の最初の <li> 要素を選択します	オンライン例
href 属性を持つバンド要素を選択します	オンラインインスタンス
ターゲット属性値が「_blank」に等しい <a> 要素をすべて選択します	オンラインインスタンス
target 属性値が "_blank" と等しくない <a> 要素をすべて選択します	オンライン例
すべて選択 < type="button" の ;input> 要素と <button>	オンラインインスタンス

	$ ("tr:odd")
オンラインの例

チュートリアルで jQuery を説明するときは、関数を <head> セクションに直接追加します。ただし、次のように、それらを別のファイルに置く方がよいでしょう (src 属性を介してファイルを参照します):

Example

<head>

</head>

← jQueryの構文

jQueryイベント →

jQueryセレクター