首页 前端知识 jQuery操作练习-隔行变色

jQuery操作练习-隔行变色

2024-02-16 14:02:21 前端知识 前端哥 573 750 我要收藏

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>jQuery操作练习-隔行变色</title>
        <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            
            $(document).ready(function(){//页面加载完成以后
                //1. 点击所有的 p 节点, 能够弹出其对应的文本内容
                $("p").click(function(){
                    //弹出被点击p标签的文本信息
                    alert("^^" + $(this).text() + "^^");
                });

                //2. 点击按钮使第一个 table 隔行变色
                $("button:eq(1)").click(function () {
                    //第一个table中的tr下标是0,2,4...
                    $("table:eq(0) tr:even").css("background", "yellow");
                });

                //3. 点击按钮使第二个 table 隔行变色
                $("button:last").click(function () {
                    //第一个table中的tr下标是1,3,5...
                    $("table:last tr:odd").css("background","red")
                });
                //3. 点击 button, 弹出 checkbox 被选中的个数
                $(":button:first").click(function(){
                    alert("选中个数是:" + $(":checkbox:checked").length);
                });
            });
            
        </script>
    </head>
    <body>
        <p>我是中国人</p>
        <p>我爱我的祖国</p>
        <p>祝福祖国繁荣富强</p>
        
        <table>
            <tr>
                <td>第一行第一列</td><td>第一行第二列</td>
            </tr>
            <tr>
                <td>第二行第一列</td><td>第二行第二列</td>
            </tr>
            <tr>
                <td>第三行第一列</td><td>第三行第二列</td>
            </tr>
            <tr>
                <td>第四行第一列</td><td>第四行第二列</td>
            </tr>
            <tr>
                <td>第五行第一列</td><td>第五行第二列</td>
            </tr>
            <tr>
                <td>第六行第一列</td><td>第六行第二列</td>
            </tr>
        </table>
        <br/>
        <br/>
        <br/>
        <table>
            <tr>
                <td>第一行第一列</td><td>第一行第二列</td>
            </tr>
            <tr>
                <td>第二行第一列</td><td>第二行第二列</td>
            </tr>
            <tr>
                <td>第三行第一列</td><td>第三行第二列</td>
            </tr>
            <tr>
                <td>第四行第一列</td><td>第四行第二列</td>
            </tr>
            <tr>
                <td>第五行第一列</td><td>第五行第二列</td>
            </tr>
            <tr>
                <td>第六行第一列</td><td>第六行第二列</td>
            </tr>
        </table>
        
        <input type="checkbox" name="test" />java
        <input type="checkbox" name="test" />CSS
        <input type="checkbox" name="test" />HTML<br/>
        <input type="checkbox" name="test" />JS
        <input type="checkbox" name="test" />mySql
        <input type="checkbox" name="test" />JDBC<br/>

        <button>您选中的个数</button><br/>
        <button>第一个表格隔行变色</button><br/>
        <button>第二个表格隔行变色</button><br/>
    </body>
</html>

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2186.html
标签
评论
发布的文章

jquery.动画和事件

2024-03-03 11:03:13

jQuery位置方法

2024-03-03 11:03:13

jQuery中val()和text()的区别

2024-03-03 11:03:11

jquery实现甘特图时效管理

2024-03-03 11:03:47

django之 echarts数据可视化

2024-03-03 11:03:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!