jQuery セレクター
jQuery セレクターを使用すると、HTML 要素のグループまたは個々の要素を操作できます。
jQuery セレクター
jQuery セレクターを使用すると、HTML 要素のグループまたは個々の要素を操作できます。
jQuery セレクターは、要素の ID、クラス、タイプ、属性、属性値などに基づいて HTML 要素を「検索」(または選択) します。 これは、いくつかのカスタム セレクターに加えて、既存の CSS セレクターに基づいています。
jQuery のすべてのセレクターはドル記号 $() で始まります。
要素セレクター
jQuery 要素セレクターは、名前に基づいて要素を選択します。
ページ内のすべての <p> 要素を選択します:
$("p")
例
ユーザーがボタンをクリックすると、すべての <p> 要素が非表示になります:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery示例</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 セレクター
jQuery #id セレクターは、HTML 要素の id 属性を通じて指定された要素を選択します。 ページ上の要素の ID は一意である必要があるため、ページ上で一意の要素を選択したい場合は、#id セレクターを使用する必要があります。 ID で要素を選択するための構文は次のとおりです: $("#test")<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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">PHP测试</p>
<button>点我</button>
</body>
</html>.class selector
jQuery クラス セレクターは、指定されたクラスで要素を検索できます。 文法は次のとおりです: ($ (". Test") 文法説明
("*") すべての要素を選択 $ (this) 現在の HTML 要素を選択 $ ("" " p.intro") クラスのイントロを持つ <p> 要素を選択します。
$("p:first")最初の要素を選択します("ul li:first-child") 各
$("[href] ") href 属性を持つ要素を選択します
$("a [target='_blank']") target 属性値が "_blank" に等しい <a> 要素をすべて選択します
$("a[target! ='_blank']") "_blank" & Lt; a & gt; 要素
$(": Button") すべて選択 type = "Button" & lt; input と等しくない対象の属性値をすべて選択します& gt; 要素と & lt; ボタン & gt; 要素
("tr: ODD") 要素を選択します。
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>
