[jQuery]選擇器--基本篩選一【First/Last/Not】

[jQuery]選擇器--基本篩選【First/Last/Not】

語法:篩選的前置帶號是冒號【:】

  • :first 符合某定義下的第一個內容
    • $('tr:first') : 第一個tr
    • $('td:first') : 第一個td
  • :last 符合某定義下的最後一個內容
    • $('tr:last') : 最後一個tr
    • $('td:last') : 最後一個td
  • :not
    • :not之後要加(括號)
    • $('tr:not(:first)') : 除了第一個tr以外的所有tr

範例程式:

	<HEAD>
		<Script Type="text/javascript" src="js/jQuery.js"></Script>
		<Script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$('tr:first').removeClass();
					$('tr:first').addClass('first');
				});
				$('#btn2').click(function(){
					$('td:first').removeClass();
					$('td:first').addClass('first');
				});
				$('#btn3').click(function(){
					$('tr:last').removeClass();
					$('tr:last').addClass('last');
				});
				$('#btn4').click(function(){
					$('td:last').removeClass();
					$('td:last').addClass('last');
				});
				$('#btn5').click(function(){
					$('tr:not(:first)').removeClass();
					$('tr:not(:first)').addClass('first');
				});
			})
		</Script>
		<style type="text/css">
			.first
			{
				background-Color:blue;
				color:yellow;
			}
			.last
			{
				background-Color:yellow;
				color:blue;
			}
		</style>
	</HEAD>
	<BODY>
		<input type="Button" id="btn1" name="btn1" value="測試First Tr">
		<br />
		<input type="Button" id="btn2" name="btn2" value="測試First Td">
		<br />
		<input type="Button" id="btn3" name="btn3" value="測試Last Tr">
		<br />
		<input type="Button" id="btn4" name="btn4" value="測試Last Td">
		<br />
		<input type="Button" id="btn5" name="btn5" value="測試Not First Tr">
		<br />
		<hr />
		<table border="1">
			<tr>
				<td>1,1</td>
				<td>2,1</td>
				<td>3,1</td>
				<td>4,1</td>
				<td>5,1</td>
			</tr>
			<tr>
				<td>1,2</td>
				<td>2,2</td>
				<td>3,2</td>
				<td>4,2</td>
				<td>5,2</td>
			</tr>
			<tr>
				<td>1,3</td>
				<td>2,3</td>
				<td>3,3</td>
				<td>4,3</td>
				<td>5,3</td>
			</tr>
		</table>
	</BODY>
</HTML>

 


以下是簽名:


Visual Studio and Development Technologies
(2005~2019/6)