1. 程式人生 > >jquery選擇器之偽類選擇器

jquery選擇器之偽類選擇器

偽類選擇器:

:nth-child的用法:

nth-child是一個css3偽類選擇符,在jQuery中被實現了,在Jquery API中對nth-child的定義是:”匹配其父元素下的第N個子或奇偶元素“。

例  偽類nth-child實現隔行換色

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery實現隔行變色</title> 
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<style type="text/css"> 

</style> 
<script type="text/javascript"> 
$(function(){ 
    $("#tbEmp tr:nth-child(even)").addClass("trOdd"); 
    $('#tbEmp tr:nth-child(odd)').css("color","red");
    $('#tbEmp tr:nth-child(even)').css("color","blue");
}); 
</script> 
 
</head> 
 
<body> 
<table id="tbEmp" cellpadding="0" cellspacing="0"> 
    <tbody > 
        <tr><td>1</td></tr> 
        <tr><td>2</td></tr> 
        <tr><td>3</td></tr> 
        <tr><td>4</td></tr> 
        <tr><td>5</td></tr> 
        <tr><td>6</td></tr> 
    </tbody> 
</table> 
</body> 
</html>