jQueryセレクター

jQueryセレクターとは何ですか?

jQuery セレクターは、jQuery ライブラリの非常に重要な部分の 1 つです。 Web 開発者によく知られている CSS 構文をサポートしており、ページを迅速かつ簡単に設定できます。 jQuery セレクターを理解することは、jQuery 開発を効率的に行うための鍵です。一般的な jQuery セレクター構文の形式:
$(selector).methodName();
selector は、DOM 内の要素を識別し、jQuery が提供するメソッドセットを使用して要素を設定するために使用される文字列式です。
ほとんどの場合、jQuery は次のような操作をサポートします:
$(selector).method1().method2().method3();
この例は、暗黙的な DOM 内の id="goAway" を持つ要素を表します。 for class="incognito" 属性を追加します。
$('#goAway').hide().addClass('incognito');
ヒント: セレクター式が複数の要素に一致する場合、配列ポインターを使用して、JavaScript の配列操作と同様に便利かつ柔軟に選択できます。これは例です:
var element = $('img')[0];
マッチング式で表される要素のうち、最初の要素オブジェクトが変数要素に割り当てられます。

基本セレクター

1. 要素セレクター

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

<!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").hide();
  });
});
</script>
</head>
<body>
<h2>标题</h2>
<p>段落。</p>
<p>另一个段落。</p>
<button>点击隐藏P标签内容</button>
</body>
</html>

2.#idセレクター

<!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").hide();
  });
});
</script>
</head>
<body>
<p>段落</p>
<p id="test">另一个段落</p>
<button>点击隐藏id</button>
</body>
</html>

3.クラスセレクター

<!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").hide();
  });
});
</script>
</head>
<body>
<h2 class="test">标题</h2>
<p class="test">段落。</p>
<button>点击隐藏所有class</button>
</body>
</html>

4.要素セレクター

p要素のテキストサイズを12px：

$（document）.ready（function（）{
5。 * selector $（document）.ready（function（）{
）にセットします。 // フォームの下のすべての要素を走査し、フォントの色を赤に設定します $ ('form *') .css('color', '#FF0000');

});

$(document).ready(function () {
} // p要素を結合 div要素のマージンを0に設定 $('p, div').css('margin', ' 0'); });

他のレベルセレクターとフィルターセレクターについては、後続の章で段階的に紹介します。

別のファイルで 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"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script> $(document).ready(function () { $('.cube').css('background', 'pink'); }); </script> <p class="cube" style="width: 50%;">选择器是jQuery最基础的东西</p> <p>选择器是jQuery最基础的东西</p> </body> </html>

提出するリセットコード

自動運転