jQuery基本セレクター(1)

基本的なセレクター

セレクターを使用するときは、まず「$()」を使用してCSSルールをラップし、次にjqueryオブジェクトを返す必要があります

以下を見てみましょう。以下に示すセレクター:

まず、次の ID セレクターを見てみましょう

ID セレクターを使用して、div タグ内のテキストの色を変更します

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#dv').css("color","red");
		})
	</script>
</head>
<body>
	<div id="dv">php 中文网</div>
</body>
</html>

CSS では、##DV {

COROR: Red; // Add style}}

jquery でビヘイビアーを追加すると呼ばれます。最も一般的に使用されるセレクターです

要素タグ名セレクターを見てみましょう

次のコードを見てください。 :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("div").css("color","#f60");
		})
	</script>
</head>
<body>
	<div>php 中文网</div>
	<div>php 中文网</div>
	<div>php 中文网</div>
</body>
</html>

上記のコードを見てください。複数の div タグがあり、ID がないので、要素タグセレクター $("要素名") の動作

クラスセレクター

を見てみましょう。最初のコード:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".dv1").css("color","green");
		})
	</script>
</head>
<body>
	<div class="dv1">php 中文网</div>
	<div>php 中文网</div>
	<div class="dv1">php 中文网</div>
</body>
</html>

クラスセレクターを使用して、CSS スタイルの .class 名を記述します。その後、スタイルを追加するには、jquery で次のように記述する必要があります: $(".dv1")

。注: ID がページ上に 1 回だけ表示される場合は、CSS を使用できますが、JQuery を使用すると、ページ上に複数の ID が表示される場合、これは厳密さに欠けます。

そのため、開発者は適切なコーディング習慣を身に付ける必要があります。ページ ID は 1 回だけ (同じ ID) 出現することができます。

ID が単一の要素を返すことを証明するには、要素のタグ名とクラスが複数の要素を返す場合、jquery コアに付属する length または size() メソッドを使用して、返された要素の個々の要素を表示できます。数値

例を使用して説明しましょう:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			alert($("#dv").size());
		})
	</script>
</head>
<body>
	<div id="dv">php 中文网</div>
	<div id="dv">php 中文网</div>
	<div id="dv">php 中文网</div>
</body>
</html>

までは 3 つあります。

ですが、返される結果は1です

クラスclassを使用すると

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			alert($(".dv").size());
		})
	</script>
</head>
<body>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
</body>
</html>

返される結果は3です

タグ名を使用します:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			alert($("div").size());
		})
	</script>
</head>
<body>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
</body>
</html>

返される結果は3です

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#dv').css("color","red"); }) </script> </head> <body> <div id="dv">php 中文网</div> </body> </html>

提出するリセットコード

自動運転