jQueryセレクター
jQuery のコアコンポーネントは、CSS 構(gòu)文を継承し、ブラウザーの互換性を気にせずに DOM 要素のタグ名、屬性名、ステータスなどを迅速かつ正確に選択できるセレクター エンジンです。
そのため、ほとんどの jQuery セレクター以下に紹介するものは、前に學(xué)習(xí)した CSS セレクターに似ています
CSS セレクターは、ページ上の要素を検索して配置し、要素にスタイルを設(shè)定するために使用されます
同じことが jQuery セレクターにも當(dāng)てはまります 要素の検索に使用されます要素を見(jiàn)つけたら、いくつかの指定されたメソッドを使用して要素を変更、削除、さらには移動(dòng)することができます
jQuery セレクターを使用する場(chǎng)合は、「$()」関數(shù)を使用して、 css ルールをパラメータとして jQuery オブジェクトに渡すと、ページ內(nèi)の対応する要素を含む jQuery オブジェクトが返され、取得した DOM ノードに対して動(dòng)作操作を?qū)g行できます。
要素セレクター
jQuery 要素セレクターは、名前に基づいて要素を選択します。
ページ內(nèi)のすべての <p> 要素を選択します:
$("p")
例
ユーザーがボタンをクリックすると、すべての <p> の色が変わります:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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'); //添加一個(gè)行為
});
});
</script>
</head>
<body>
<h2>這是一個(gè)標(biāo)題</h2>
<p>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>
<button>點(diǎn)我</button>
</body>
</html> Run プログラムを試してみる #id セレクター
jQuery #id セレクターは、HTML 要素の id 屬性を通じて指定された要素を選択します。 注: ID はページ上に 1 回のみ表示できます。通常、開(kāi)発者はこのルールを遵守し、維持する必要があります。ただし、ページ內(nèi)に 3 回表示され、CSS スタイルを使用する場(chǎng)合でも、これら 3 つの要素は効果を発揮します。ただし、これを jQuery で実行すると、有効になるのは 1 つの ID だけになるため、問(wèn)題が発生します。ページ上で 1 つの ID だけを使用する習(xí)慣があります ID で要素を選択するための構(gòu)文は次のとおりです:$("#test")
例
ユーザーがボタンをクリックすると、 is id="test "屬性を持つ要素が赤になります:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>標(biāo)題</h2>
<p>段落</p>
<p id="test">我變顏色了</p>
<button>點(diǎn)我</button>
</body>
</html>プログラムを?qū)g行して試してください.class selector
jQueryクラスセレクターは、指定されたクラスで要素を検索できます。
構(gòu)文は次のとおりです:
$(".test")
Instance
ユーザーがボタンをクリックすると、class="test" 屬性を持つすべての要素の色が変わります:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>點(diǎn)我</button>
</body>
</html> プログラムを?qū)g行してみる
その他のセレクターの例
| 構(gòu)文 | 説明 |
|---|---|
| $(this) | 現(xiàn)在の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> 要素內(nèi)の class="head" を持つすべての要素 |
