相对元素的练习
关键词:this
语法:$('td:odd',$(this)).css('backgroundColor','yellow');
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#tb tr').click(function () {
//$('td', $(this).siblings()).css('backgroundColor', '');
//$('td:even', $(this)).css('backgroundColor', 'red');
$('td:odd', $(this)).css('backgroundColor', 'yellow');
// $(this 'td:even').css('backgroundColor', 'red');
//因为使用了this.无法加引号,所以上述语句是错误的,显示无
//总之因为this
//1注意, 小手属于样式,在style中
//2注意相对元素的写法
});
});
</script>
</head>
<body>
<table id='tb' border="1" style='cursor: pointer;'>
<tr>
<td>
乔布斯
</td>
<td>
乔布斯1
</td>
<td>
乔布斯2
</td>
<td>
乔布斯3
</td>
<td>
乔布斯4
</td>
</tr>
<tr>
<td>
乔布斯5
</td>
<td>
乔布斯6
</td>
<td>
乔布斯7
</td>
<td>
乔布斯8
</td>
<td>
乔布斯9
</td>
</tr>
<tr>
<td>
乔布斯10
</td>
<td>
乔布斯11
</td>
<td>
乔布斯12
</td>
<td>
乔布斯13
</td>
<td>
乔布斯14
</td>
</tr>
<tr>
<td>
乔布斯20
</td>
<td>
乔布斯21
</td>
<td>
乔布斯22
</td>
<td>
乔布斯23
</td>
<td>
乔布斯24
</td>
</tr>
<tr>
<td>
乔布斯30
</td>
<td>
乔布斯31
</td>
<td>
乔布斯32
</td>
<td>
乔布斯33
</td>
<td>
乔布斯34
</td>
</tr>
<tr>
<td>
乔布斯40
</td>
<td>
乔布斯41
</td>
<td>
乔布斯42
</td>
<td>
乔布斯43
</td>
<td>
乔布斯44
</td>
</tr>
</table>
</body>
</html>
个人总结:相对元素是想要寻找的元素写在前面,范围写在后面.因为中间采用逗号的方式连接,所以可以在范围中直接写上this.更简洁!