jQuery第1 课（黑马程序员）

其他 2018-07-08 05:08:55 阅读次数: 0

本文参考黑马程序员视频讲座

用时建议查看官方文档为上策

jQuery介绍

jQuery 是一个 JavaScript 函数库，可以在官网下载，其中.min.js是压缩版的，.js是非压缩版的，两者内容一样，只不过压缩版的把大部分换行等去除了，只占据一行或几行。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-1.8.3.min.js"></script>
        <script>
            $(function(){
                alert("Hello, jQuery!");
            })
        </script>
    </head>
    <body>
    </body>
</html>

这里写图片描述

JS与jQuery页面加载区别

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS与jQuery加载页面的区别</title>
        <script src="../jquery-1.8.3.min.js"></script>

        <!--JS与jQuery加载页面区别总结：
        1.JS页面加载后面的会覆盖掉前面的
        2.jQuery页面加载不会覆盖，按照代码书写顺序顺次加载
        3.JS页面加载比jQuery慢（JS是在整个页面加载后，才调用window.onload）
        4.jQuery页面加载写法共三种如下
        -->
        <script>

            window.onload=function(){
                alert("JS加载页面1");
            }


            window.onload=function(){
                alert("JS加载页面2");
            }

            $(function(){
                alert("jQuery加载页面1");
            })

            $(document).ready(function(){
                alert("jQuery加载页面2");
            });

            jQuery(document).ready(function(){
                alert("jQuery加载页面3");
            });
        </script>
    </head>
    <body>
    </body>
</html>

这里写图片描述

这里写图片描述
这里写图片描述
这里写图片描述

JSjQuery的获取

这里写图片描述

JQ的获取.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ的获取</title>
        <script type="text/javascript" src="../jquery-1.8.3.min.js" ></script>
        <script>
            $(function(){
                //1.JS方式获取
                /*document.getElementById("btn").onclick= function(){
                    location.href="惊喜.html";
                }*/

                //2.JQ方式获取=====>>>$("#btn")
                $("#btn").click(function(){
                    location.href="惊喜.html"
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="点我有惊喜" id="btn"/>
    </body>
</html>

惊喜.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>打飞机</title>
        <style>
            div{
                border: 1px solid white;
                width: 500px;
                height: 300px;
                margin: auto;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="../img/飞机05.gif" width="100%" height="100%"/>
        </div>
    </body>
</html>

Dom与JQ对象之间的转换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Dom与JQ对象之间的转换</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
        <script>
            function write1(){
//              //1.JS的DOM操作
//              document.getElementById("span1").innerHTML="萌萌哒！";
//              //DOM对象无法操作JQ对象里面属性和方法，下面代码错误
//              document.getElementById("span1").html("萌萌哒！");

                var spanEle = document.getElementById("span1");

                //将DOM对象转换成JQ对象
                $(spanEle).html("思密达");
            }


            $(function(){
                $("#btn").click(function(){
                    //JQ对象无法操作JS里面的属性和方法！！！，下面代码错误
                    //$("#span1").innerHTML="呵呵哒！"
                    $("#span1").html("呵呵哒！");

                    //JQ对象向DOM对象转换方式一
                    //$("#span1").get(0).innerHTML="美美哒！";

                    //JQ对象向DOM对象转换方式二
                    //$("#span1")[0].innerHTML="棒棒哒！";

                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="JS写入" onclick="write1()"/>
        <input type="button" value="JQ写入" id="btn"/><br />
        班长：<span id="span1">你好帅！</span>
    </body>
</html>

案例一：使用JQ完成首页定时弹出广告图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <style>
            #father{
                border: 0px solid red;
                width: 1300px;
                height: 2170px;
                margin: auto;
            }
            /*#logo{
                border: 0px solid black;
                width: 1300px;
                height: 50px;
            }*/
            .top{
                border: 0px solid blue;
                width: 431px;
                height: 50px;
                float: left;
            }
            #top{
                padding-top: 12px;
                height: 38px;
            }
            #menu{
                border: 0px solid red;
                width: 1300px;
                height: 50px;
                background-color: black;
                margin-bottom: 10px;
            }
            ul li{
                display: inline;
                color: white;
            }
            #clear{
                clear: both;
            }

            #product{
                border: 0px solid red;
                width: 1300px;
                height: 558px;
            }
            #product_top{
                border: 0px solid blue;
                width: 100%;
                height: 45px;
                padding-top: 8px;
            }
            #product_bottom{
                border: 0px solid green;
                width: 100%;
                height: 500px;
            }
            #product_bottom_left{
                border: 0px solid red;
                width: 200px;
                height: 500px;
                float: left;
            }
            #product_bottom_right{
                border: 0px solid blue;
                width: 1094px;
                height: 500px;
                float: left;
            }
            #big{
                border: 0px solid red;
                width: 544px;
                height: 248px;
                float: left;
            }
            .small{
                border: 0px solid blue;
                width: 180px;
                height: 248px;
                float: left;
                /*让里面的内容居中*/
                text-align: center;
            }

            #bottom{
                text-align: center;
            }

            a{
                text-decoration: none;
            }
        </style>

        <script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
        <script>
            $(function(){
                //1.书写显示广告图片的定时操作
                time1=setInterval("showAd()",1000);
            });

            //2.书写显示广告图片的函数
            function showAd(){
                //3.获取广告图片，并让其显示
                //$("#img2").show(2000);
                $("#img2").slideDown(5000);
                //$("#img2").fadeIn(4000);
                //4.清除显示图片定时操作
                clearInterval(time1);
                //5.设置隐藏图片的定时操作
                time2 = setInterval("hiddenAd()",3000);
            }

            function hiddenAd(){
                //6.获取广告图片，并让其隐藏
                //$("#img2").hide();
                $("#img2").slideUp(5000);
                //$("#img2").fadeOut(6000);
                //7.清除隐藏图片的定时操作
                clearInterval(time2);
            }
        </script>

    </head>
    <body>
        <div id="father">
            <!--定时弹出广告图片位置-->
            <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display:none" id="img2"/>

            <!--1.logo部分-->
            <div id="logo">
                <div class="top">
                    <img src="../img/logo2.png" height="46px"/>
                </div>
                <div class="top">
                    <img src="../img/header.png" height="46px" />
                </div>
                <div class="top" id="top">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>
            <div id="clear">

            </div>
            <!--2.导航栏部分-->
            <div id="menu">
                <ul>
                    <a href="#"><li style="font-size: 20px;">首页</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>手机数码</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>家用电器</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>鞋靴箱包</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>孕婴保健</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>奢侈品</li></a>
                </ul>
            </div>
            <!--3.轮播图部分-->
            <div id="">
                <img src="../img/1.jpg" width="100%" id="img1"/>
            </div>
            <!--4.最新商品-->
            <div id="product">
                <div id="product_top">
                    &nbsp;&nbsp;&nbsp;
                    <span style="font-size: 25px;padding-top: 8px;">最新商品</span>&nbsp;&nbsp;&nbsp;
                    <img src="../img/title2.jpg" />
                </div>
                <div id="product_bottom">
                    <div id="product_bottom_left">
                        <img src="../img/big01.jpg" width="100%" height="100%"/>
                    </div>
                    <div id="product_bottom_right">
                        <div id="big">
                            <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--5.广告图片-->
            <div id="">
                <img src="../img/ad.jpg" width="100%"  />
            </div>
            <!--6.热门商品-->
            <div id="product">
                <div id="product_top">
                    &nbsp;&nbsp;&nbsp;
                    <span style="font-size: 25px;padding-top: 8px;">热门商品</span>&nbsp;&nbsp;&nbsp;
                    <img src="../img/title2.jpg" />
                </div>
                <div id="product_bottom">
                    <div id="product_bottom_left">
                        <img src="../img/big01.jpg" width="100%" height="100%"/>
                    </div>
                    <div id="product_bottom_right">
                        <div id="big">
                            <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--7.广告图片-->
            <div id="">
                <img src="../img/footer.jpg" width="100%"/>
            </div>
            <!--8.友情链接和版权信息-->
            <div id="bottom">
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
                <a href="#">招贤纳士</a>
                <a href="#">法律声明</a>
                <a href="#">友情链接</a>
                <a href="#">支付方式</a>
                <a href="#">配送方式</a>
                <a href="#">服务声明</a>
                <a href="#">广告声明</a>
                <p>
                    Copyright © 2005-2016 传智商城 版权所有 
                </p>
            </div>
        </div>
    </body>
</html>

toggle()的使用：实现显示和隐藏的切换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>toggle的使用</title>
        <style>
            div{
                border: 1px solid white;
                width: 500px;               
                height: 350px;
                margin: auto;
                text-align: center;
            }
        </style>
        <script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
        <script>
        $(function(){
                $("#btn").click(function(){
                    $("#img1").toggle();
                });
            });
        </script>
    </head>
    <body>
        <div>
            <input type="button" value="显示/隐藏" id="btn" /><br />|
            <img src="../img/飞机05.gif" width="100%" height="100%" id="img1"/>
        </div>
    </body>
</html>

jQuery中的选择器

style.css

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
    background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
    padding-left:25px;
}
.onSuccess{
    background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
    padding-left:25px;
}
.high{
    color:red;
}

  div,span,p {
    width:140px;
    height:140px;
    margin:5px;
    background:#aaa;
    border:#000 1px solid;
    float:left;
    font-size:17px;
    font-family:Verdana;
  }
  div.mini { 
    width:55px;
    height:55px;
    background-color: #aaa;
    font-size:12px;
  }
  div.hide { 
    display:none;
  }

table       { border:0;border-collapse:collapse;}
td  { font:normal 12px/17px Arial;padding:2px;width:100px;}
th          { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even       { background:#FFF38F;}  /* 偶数行样式*/
.odd        { background:#FFFFEE;}  /* 奇数行样式*/
.selected       { background:#FF6500;color:#fff;}

基本选择器

基本选择器.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本选择器</title>
        <link rel="stylesheet" href="../../css/style.css" />
        <script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("#one").css("background-color","pink");
                });

                $("#btn2").click(function(){
                    $(".mini").css("background-color","pink");
                });

                $("#btn3").click(function(){
                    $("div").css("background-color","pink");
                });

                $("#btn4").click(function(){
                    $("*").css("background-color","pink");
                });

                $("#btn5").click(function(){
                    $("#two,.mini").css("background-color","pink");
                });
            });
        </script>

    </head>
    <body>
        <input type="button" id="btn1" value="选择为one的元素"/>
        <input type="button" id="btn2" value="选择样式为mini的元素"/>
        <input type="button" id="btn3" value="选择所有的div元素"/>
        <input type="button" id="btn4" value="选择所有元素"/>
        <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>

        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>

        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>

        <span id="four">

        </span>
    </body>
</html>

层级选择器

层级选择器.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层级选择器</title>
        <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
        <script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){
                    $("body div").css("background-color","gold");
                });

                $("#btn2").click(function(){
                    $("body>div").css("background-color","gold");
                });

                $("#btn3").click(function(){
                    $("#two+div").css("background-color","gold");
                });

                $("#btn4").click(function(){
                    $("#one~div").css("background-color","gold");
                });
            });
        </script>


    </head>
    <body>
        <input type="button" id="btn1" value="选择body中的所有的div元素"/>
        <input type="button" id="btn2" value="选择body中的第一级的孩子"/>
        <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
        <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>

        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>

        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>

        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>

        <span id="four">

        </span>
    </body>
</html>

基本过滤选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层级选择器</title>
        <link rel="stylesheet" href="../../css/style.css" type="text/css"/>
        <script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("body div:first").css("background-color","red");
                });

                $("#btn2").click(function(){
                    $("body div:last").css("background-color","red");
                });

                $("#btn3").click(function(){
                    $("body div:odd").css("background-color","red");
                });

                $("#btn4").click(function(){
                    $("body div:even").css("background-color","red");
                });
            });
        </script>


    </head>
    <body>
        <input type="button" id="btn1" value="body中的第一个div元素"/>
        <input type="button" id="btn2" value="body中的最后一个div元素"/>
        <input type="button" id="btn3" value="选择body中的奇数的div"/>
        <input type="button" id="btn4" value="选择body中的偶数的div"/>

        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>

        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>

        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>

        <span id="four">

        </span>
    </body>
</html>

属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层级选择器</title>
        <link rel="stylesheet" href="../../css/style.css" />
        <script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("div[id]").css("background-color","red");
                });

                $("#btn2").click(function(){
                    $("div[id='two']").css("background-color","red");
                });

            });
        </script>


    </head>
    <body>
        <input type="button" id="btn1" value="选择有id属性的div"/>
        <input type="button" id="btn2" value="选择有id属性的值为two的div"/>

        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>

        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>

        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>

        <span id="four">

        </span>
    </body>
</html>

表单选择器

案例二：使用jQuery完成隔行换色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用jQuery完成表格隔行换色</title>
        <link rel="stylesheet" href="../css/style.css" />
        <script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
        <script>
            //1.页面加载
            $(function(){
//              //2.获取tbody下面的偶数行并设置背景颜色
//              $("tbody tr:even").css("background-color","yellow");
//              //3.获取tbody下面的奇数行并设置背景颜色
//              $("tbody tr:odd").css("background-color","grey");


                //下面是使用style.css中配置好的css类来写
                //2.获取tbody下面的偶数行并设置背景颜色
                $("tbody tr:even").addClass("even");
                $("tbody tr:even").removeClass("even");
                //3.获取tbody下面的奇数行并设置背景颜色
                $("tbody tr:odd").addClass("odd");
            });
        </script>

    </head>
    <body>
        <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr >
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr >
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr >
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr >
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

案例三：使用jQuery完成全选全部选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用jQuery完成复选框的全选和全不选</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
        <!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>-->
        <script>
            $(function(){
                $("#select").click(function(){
                    //获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
                    //attr方法与JQ的版本有关，在1.8.3及以下有效。
                    //$("tbody input").attr("checked",this.checked);
                    $("tbody input").prop("checked",this.checked);
                });
            });
        </script>

    </head>
    <body>
        <table border="1" width="500" height="50" align="center" id="tbl" >
            <thead>
                <tr>
                    <td colspan="4">
                        <input type="button" value="添加" />
                        <input type="button" value="删除" />
                    </td>
                </tr>
                <tr>
                    <th><input type="checkbox" id="select"></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/ccnuacmhdu/article/details/80200028
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
OOP第二次作业
java web 乱码问题
android 禁止scrollview 因控件变化自动滚动到底的方法
mysql服务解压版的安装(5.7)
centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
面向对象之------多态与多态性
开发Teams Tabs应用程序
C# 希尔排序
第2章 Jupyter Notebooks
每日归档
更多
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022