jQueryセレクター
jQueryセレクターとは何ですか?
jQuery セレクターは、jQuery ライブラリの非常に重要な部分の 1 つです。 Web 開発者によく知られている CSS 構(gòu)文をサポートしており、ページを迅速かつ簡(jiǎn)単に設(shè)定できます。 jQuery セレクターを理解することは、jQuery 開発を効率的に行うための鍵です。一般的な jQuery セレクター構(gòu)文の形式:
$(selector).methodName();
selector は、DOM 內(nèi)の要素を識(shí)別し、jQuery が提供するメソッド セットを使用して要素を設(shè)定するために使用される文字列式です。
ほとんどの場(chǎng)合、jQuery は次のような操作をサポートします:
$(selector).method1().method2().method3();
この例は、暗黙的な DOM 內(nèi)の id="goAway" を持つ要素を表します。 for class="incognito" 屬性を追加します。
$('#goAway').hide().addClass('incognito');
ヒント: セレクター式が複數(shù)の要素に一致する場(chǎng)合、配列ポインターを使用して、JavaScript の配列操作と同様に便利かつ柔軟に選択できます。これは例です:
var element = $('img')[0];
マッチング式で表される要素のうち、最初の要素オブジェクトが変數(shù)要素に割り當(dāng)てられます。
基本セレクター
1. 要素セレクター
jQuery 要素セレクターは、名前に基づいて要素を選択します。
<!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").hide();
});
});
</script>
</head>
<body>
<h2>標(biāo)題</h2>
<p>段落。</p>
<p>另一個(gè)段落。</p>
<button>點(diǎn)擊隱藏P標(biāo)簽內(nèi)容</button>
</body>
</html>2.#idセレクター
<!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").hide();
});
});
</script>
</head>
<body>
<p>段落</p>
<p id="test">另一個(gè)段落</p>
<button>點(diǎn)擊隱藏id</button>
</body>
</html>3.クラスセレクター
<!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").hide();
});
});
</script>
</head>
<body>
<h2 class="test">標(biāo)題</h2>
<p class="test">段落。</p>
<button>點(diǎn)擊隱藏所有class</button>
</body>
</html>4.要素セレクター
p要素のテキストサイズを12px：
$（document）.ready（function（）{
5。 * selector $（document）.ready（function（）{
）にセットします。 // フォームの下のすべての要素を走査し、フォントの色を赤に設(shè)定します $ ('form *') .css('color', '#FF0000');
$(document).ready(function () {
} // p要素を結(jié)合 div要素のマージンを0に設(shè)定 $('p, div').css('margin', ' 0'); });
他のレベルセレクターとフィルターセレクターについては、後続の章で段階的に紹介します。 チュートリアルで jQuery を説明するときは、関數(shù)を <head> セクションに直接追加します。ただし、次のように、それらを別のファイルに置く方がよいでしょう (src 屬性を介してファイルを參照します):
別のファイルで jQuery 関數(shù)を使用する Web サイトに多くのページが含まれており、jQuery 関數(shù)の保守を容易にしたい場(chǎng)合は、jQuery 関數(shù)を別の .js ファイルに配置します。 <head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>
