[jQuery]選取器—某一種類的(tag,類別,所有物件)

[jQuery]選取器—某一種類的(tag,類別,所有物件)

選取某種Html Tag的物件集合

  • 例如:選取所有的div
$('div')

 

選取使用某類別名稱的物件集合

  • 例如:所用類別名稱為d1的物件
$('.d1')

 

所有物件

$(*)

 

 

 

範例:

<HTML>
	<HEAD>
		<Script Type="text/javascript" src="js/jQuery.js"></Script>
		<Script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$('div').removeClass();
					$('div').addClass('d2');
				});
				$('#btn2').click(function(){
					$('.d2').html('我的class=d2');
				});
				$('#btn3').click(function(){
					$('p').addClass('d3');
				});
				$('#btn4').click(function(){
					$('*').removeClass();
					$('*').addClass('d4');
				});
			})
		</Script>
		<Style type="text/css">
			.d1
			{
				background-color:red;
				color:green;
			}
			.d2
			{
				background-color:orange;
				color:blue;
			}
			.d3
			{
				background-color:yellow;
				color:blue;
			}
			.d4
			{
				background-color:green;
				color:red;
			}
		</Style>
	</HEAD>
	<BODY>
		<input type="Button" id="btn1" name="btn1" value="全部div改變"><br>
		<input type="Button" id="btn2" name="btn2" value="改變class=d2的"><br>
		<input type="Button" id="btn3" name="btn3" value="改變p的"><br>
		<input type="Button" id="btn4" name="btn4" value="改變所有的*"><br>
		
		<hr />
		<div id="div1" class="d1">我是div1</div>
		<div id="div2" class="d2">我是div2</div>
		<div id="div3" class="d3">我是div3</div>
		<div id="div4" class="d4">我是div4</div>
		<p>我是p</p>
		
	</BODY>
</HTML>

範例說明:

這個範例有4個div,各自不同的class,另外還有一個p

有四個按鈕

  1. 改變全部的div
  2. 改變類別名稱是d2的
  3. 改變p
  4. 改變所有物件

以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat