[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>以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |