关闭

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

标签: jquery改变背景色选择器
1218人阅读 评论(0) 收藏 举报
分类:

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:11029次
    • 积分:260
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:2篇
    • 译文:0篇
    • 评论:1条
    最新评论