jQuery学习心得----鼠标经过时改变table行的背景色

时间:2022-12-12 16:53:18

学习了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>