学习了jQuery选择器,下面给大家一个关于选择器的例子,注释很详细,大家可以自己体会。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--引入jQuery,因为举例,所以直接网上引一个,一般可以去官网下一个jQuery包-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<title>Title</title>
</head>
<body>
<style type="text/css">
.tr1{background-color: #FF9933;}
</style>
<script language="JavaScript">
$(function(){
//$("#tb tr")--选择id为tb的table,再选择该table的行tr
// mouseover--鼠标放上去的事件(悬停)
//$("#tb tr").mouseover();--给tb的行tr添加鼠标悬停事件
$("#tb tr").mouseover(function(){
$(this).addClass("tr1");//添加样式tr1,$(this)表示当前选择的元素。
});
// mouseout--鼠标离开的事件
$("#tb tr").mouseout(function(){
$(this).removeClass("tr1");//去掉样式tr1
});
});
</script>
<table border="2" align="center" id="tb">
<tbody>
<tr height="40">
<td align="center" colspan="3">商品表</td>
</tr>
<tr height="40">
<td ></td>
<td >商品编号</td>
<td >价格(元)</td>
</tr>
<tr height="40">
<td >A商场</td>
<td >pp02333</td>
<td >234</td>
</tr>
<tr height="40">
<td >B商场</td>
<td >pp56333</td>
<td >231</td>
</tr>
<tr height="40">
<td >C商场</td>
<td >pp97833</td>
<td >541</td>
</tr>
</tbody>
</table>
</body>
</html>