jQuery のコアコンポーネントは、CSS 構文を継承し、ブラウザーの互換性を気にせずに DOM 要素のタグ名、属性名、ステータスなどを迅速かつ正確に選択できるセレクター エンジンです。
そのため、ほとんどの jQuery セレクター以下に紹介するものは、前に学習した CSS セレクターに似ています
CSS セレクターは、ページ上の要素を検索して配置し、要素にスタイルを設定するために使用されます
同じことが jQuery セレクターにも当てはまります 要素の検索に使用されます要素を見つけたら、いくつかの指定されたメソッドを使用して要素を変更、削除、さらには移動することができます
jQuery セレクターを使用する場合は、「$()」関数を使用して、 css ルールをパラメータとして jQuery オブジェクトに渡すと、ページ内の対応する要素を含む jQuery オブジェクトが返され、取得した DOM ノードに対して動作操作を実行できます。
要素セレクター
jQuery 要素セレクターは、名前に基づいて要素を選択します。
ページ内のすべての <p> 要素を選択します:
$("p")
例
ユーザーがボタンをクリックすると、すべての <p> の色が変わります:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css('color','red'); //添加一个行为
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html> Run プログラムを試してみる #id セレクター
jQuery #id セレクターは、HTML 要素の id 属性を通じて指定された要素を選択します。 注: ID はページ上に 1 回のみ表示できます。通常、開発者はこのルールを遵守し、維持する必要があります。ただし、ページ内に 3 回表示され、CSS スタイルを使用する場合でも、これら 3 つの要素は効果を発揮します。ただし、これを jQuery で実行すると、有効になるのは 1 つの ID だけになるため、問題が発生します。ページ上で 1 つの ID だけを使用する習慣があります ID で要素を選択するための構文は次のとおりです:$("#test")
例
ユーザーがボタンをクリックすると、 is id="test "属性を持つ要素が赤になります:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").css('color','red');
});
});
</script>
</head>
<body>
<h2>标题</h2>
<p>段落</p>
<p id="test">我变颜色了</p>
<button>点我</button>
</body>
</html>プログラムを実行して試してください.class selector
jQueryクラスセレクターは、指定されたクラスで要素を検索できます。
構文は次のとおりです:
$(".test")
Instance
ユーザーがボタンをクリックすると、class="test" 属性を持つすべての要素の色が変わります:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").css('color','blue');
});
});
</script>
</head>
<body>
<h2 class="test">class选择器</h2>
<p class="test">class选择器</p>
<button>点我</button>
</body>
</html> プログラムを実行してみる
その他のセレクターの例
| 構文 | 説明 |
|---|---|
| $(this) | 現在のHTML要素 |
| $("p") | すべての <p> 要素 |
| $("p.intro") | class="intro" を持つすべての <p> 要素 |
| $(".intro") | All class= " intro" 要素 |
| $("#intro") | id="intro" 要素 |
| $("ul li:first") | 各 <ul> 要素の最初の |
| $("[href$='.jpg']") | 属性値が「.jpg」で終わるすべての href 属性 |
| $("div#intro . head") | id="intro" <div> 要素内の class="head" を持つすべての要素 |
