『Jquery』セレクタ

5209 ワード

jquery 選択

<script type="text/javascript" src="jquery-1.6.4.js" ></script>

IDセレクタ

<script type="text/javascript" >
$(function(){
	 $("#mysql").css({"background-color":"#F99"});
});
</script>
</head>
<body>
<div id="mysql">ID    </div>
</body>

2.ラベルセレクタ

<script type="text/javascript" >
$(function(){
	 $("div").css({"background-color":"#F99"});
});
</script>
</head>
<body>
<div id="mysql">      </div>
</body>

3.クラスセレクタ

<script type="text/javascript" >
$(function(){
	 $(".cs").css("background-color","#F69");
});
</script>
</head>
<body>
<div class="cs">     </div>

4.スルーセレクタ

<script type="text/javascript" >
$(function(){
	 $("div *").css("background-color","#F69");
});
</script>
</head>
<body>
<div ><p>11111111111</p><p>2222222222</p></div>
<p>333333333333</p>
</body>

5.グループセレクタ

<script type="text/javascript" >
$(function(){
	 $("h2,div").css("background-color","#F69");
});
</script>
</head>
<body>
<div ><p>11111111111</p></div>
<span>333333333333</span>
<h2>333333333333</h2>
</body>

6.セレクタを含む

<script type="text/javascript" >
$(function(){
	 $("div p").css("background-color","#F69");
});
</script>
</head>
<body>
<div ><p>11111111111</p></div>
<span>333333333333</span>
<h2>333333333333</h2>
</body>

7.サブセレクタ

<script type="text/javascript" >
$(function(){
	 $("div > p").css("background-color","#F69");
});
</script>
</head>
<body>
<div ><p>11111111111</p></div>
<span>333333333333</span>
<h2>333333333333</h2>
</body>

8.隣接セレクタ

<script type="text/javascript" >
$(function(){
	 $("div + span").css("background-color","#F69");
});
</script>
</head>
<body>
<div ><p>11111111111</p></div>
<span>333333333333</span>
<h2>333333333333</h2>
</body>

9.兄弟選択器

<script type="text/javascript" >
$(function(){
	 $("div ~ span").css("background-color","#F69");
});
</script>
</head>
<body>
<span>1111111</span>
<div ><p>22222222</p></div>
<span>333333333333</span><br>
<span>44444444444</span>
<h2>55555555555</h2>
</body>

10.位置決めセレクタ

<script type="text/javascript" >
$(function(){
	 $("p:first").css("background-color","#F00");
	 $("p:last").css("background-color","#FC0");
	 $("p:eq(1)").css("background-color","#0F0");//eq   0  
});
</script>
</head>
<body>
<p>1111111111111</p>
<p>2222222222222</p>
<p>3333333333333</p>
<p>4444444444444</p>
</body>

11.指定範囲セレクタ

<script type="text/javascript" >
$(function(){
	 $("p:even").css("background-color","#F00"); //even 
	 $("p:odd").css("background-color","#FC0");  //odd 
});
</script>
</head>
<body>
<p>1111111111111</p>
<p>2222222222222</p>
<p>3333333333333</p>
<p>4444444444444</p>
</body>

12.セレクタの除外

<script type="text/javascript" >
$(function(){
	 $("p:not(p:last)").css("background-color","#FC0");  
});
</script>
</head>
<body>
<p>1111111111111</p>
<p>2222222222222</p>
<p>3333333333333</p>
<p>4444444444444</p>
</body>

13.特殊セレクタ

<script type="text/javascript" >
$(function(){
	 $(":header").css({"color":"red"});  //    
	 $("div").css({"background-color":"#F00","border":"solid 1px red","width":"200px","height":"200px","left":"500px","position":"absolute"});
	
	 $("div").click(function(){
	 	$(this).animate({left:100}).animate({left:700});//    
		 
	 });
});
</script>
</head>
<body>
<h1>1111</h1>
<h2>2222</h2>
<div class="cs"></div>
</body>

本文は「Lovelyにゃん」ブログから、転載お断り!

Objective-C言語特性

mysqlページング・ストレージ・プロシージャ