jQuery操作练习-隔行变色

最新推荐文章于 2024-06-16 09:00:57 发布
最新推荐文章于 2024-06-16 09:00:57 发布
阅读量716 收藏
点赞数
分类专栏： jQuery 练习题 文章标签： jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heliuerya/article/details/130840162
版权

<!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>

 

heliuerya
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery选取商品隔行变色
09-22
jquery选取商品隔行变色
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
<script src="jquery-1.7.1.js"> $("table").tableUI(); ``` 这样，表格就会根据配置自动应用隔行变色和鼠标滑过高亮效果。这个插件的灵活性在于，你可以通过传递不同的配置对象来定制样式类，以适应不同的设计...
jQuery隔行换色
ahao4311的博客
02-20 269
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-2.1.0.min.js"></s...
jquery案例3——jq隔行换色
努力、拼搏、奋进
05-16 857
一、案例描述 隔行换色 二、案例效果演示 三、案例整体代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
jQuery练习2-表格隔行变色
hacket
10-30 741
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 html> 3 head> 4 title>exe_1.htmltitle> 5 meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6
jQuery练习--[实现左移右移功能,实现列表动态新增,删除功能；实现表格隔行变色,选中时高亮显示.]
从零开始的异世界JAVA学习
07-18 1368
(1)实现左移右移功能 实现左移右移功能，点击向右按钮把左边选中的内容移动到右边.
HTML(HBuilder)作业题4- 隔行换色（jquery）
古古的博客
01-06 904
Hbuilder.jquery. 隔行换色
jQuery基础篇章-2019-06-18,定时广告，隔行变色，全选和不全选案例
qq847196660的博客
06-18 168
AA.jQuery 概念 a.jQuery 核心函数 a-1:当函数用：(DOM标签);a−2：当对象用：(DOM标签); a-2：当对象用：(DOM标签);a−2：当对象用：.属性或方法(); b.jQuery 核心对象 $obj.属性或方法(); 补充知识点： 1. $(“标签对象”).click(); jQuery绑定 点击 事件方法 2. consal.log( 对象 ); ...
7.webpack-创建列表隔行变色项目
weixin_45847120的博客
02-15 179
前端工程化-Node.js中通过babel体验ES6模块化 设置淘宝镜像 一台电脑只需要设置一次 npm config set registry “https://registry.npm.taobao.org” 2. 创建项目文件夹 名称不要使用中文 不能使用 webpack 因为会和第三方模块webpack名称冲突 推荐使用: webpack-study 3. 打开cmd窗口 在地址栏输...
jquery 练习二 是一个特定的表格隔行变色
健健
08-02 1167
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;jquery&lt;/title&gt; &lt;script src="js/jquery-1.8.3.min.js" type="text/javascript
简单实现jquery隔行变色
10-19
主要为大家详细介绍了实现jquery隔行变色效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery实现简单隔行变色的方法
10-22
主要介绍了jQuery实现简单隔行变色的方法,涉及jQuery针对页面元素样式的相关操作技巧,需要的朋友可以参考下
JS与jQuery实现隔行变色的方法
10-21
主要介绍了JS与jQuery实现隔行变色的方法,结合实例形式对比分析了javascript与jQuery实现隔行变色的具体操作步骤与相关技巧,体验一下jQuery的华丽与简洁,需要的朋友可以参考下
HTML静态网页成品作业(HTML+CSS)—— 零食商城网页(1个页面)
weixin_42283461的博客
06-14 373
HTML静态网页成品作业(HTML+CSS)—— 零食商城网页(1个页面)
HTML前端
2302_77125952的博客
06-15 536
比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。提供许多标签，不同标签功能不同，网页就是通过这些标签描述出来的，最终由浏览器解释运行我们看到的网页。HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。<标签 属性=“ ”/>完成一个特定的设置功能，没有标签体 换行标签。<开始标签>标签名</结束标签> 闭合标签（双标签）标签中可以有属性：可以标签属性。table标签：表格标签。tr标签：表格中的行。td标签：表格单元格。
HTML---盒子模型
最新发布
Dreamkidya的博客
06-16 1066
盒子模型在网页设计中扮演着至关重要的角色，它是控制元素布局和样式的基础。本文将详细解析盒子模型的概念、结构和应用，帮助读者更好地掌握这一概念。无论您是初学者还是有经验的开发者，了解盒子模型都是必不可少的。通过深入了解盒子模型，您将能够更加灵活地控制网页元素的外观和布局，提升网页设计的效果和体验。让我们一起探究盒子模型的奥秘，为您的网页设计增添更多可能性作者建议:学习知识在于深度理解，多动手、多动脑，总能更快地领悟。不要仅仅停留在阅读代码的层面，亲自动手敲打一遍，会带来更丰富的收获。
超文本标记语言（HTML）简介
一起coding，一起嗨。
06-15 503
超文本标记语言（HTML）简介
DAY02 HTML
adminstate的博客
06-15 787
HTML基础学习
jquery的隔行变色
06-06
jQuery是一款流行的JavaScript库，它简化了DOM操作和事件处理，使得前端开发更加便捷。如果你想在表格或者其他列表中实现隔行变色的效果，你可以使用jQuery的简单遍历和CSS样式来完成。以下是一个基本的示例： ```javascript $(document).ready(function() { // 获取所有的行元素（假设是tr） var rows = $("table tr"); // 遍历每一行 rows.each(function(index) { // 如果索引是偶数（0-based），即偶数行 if (index % 2 === 0) { // 给当前行添加背景颜色，比如淡灰色 $(this).css("background-color", "#f2f2f2"); } else { // 如果索引是奇数，即奇数行 $(this).css("background-color", "#ffffff"); // 或者你喜欢的其他颜色 } }); }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值