jQuery练习 | 易学教程

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <style>
        div {
            border: 1px solid black;
            width: 400px;
            height: 300px;
            float: left;
        }
        
        table,
        tr,
        td {
            border: 1px solid gray;
        }
    </style>
    <script>
        $(function() {
            //获取多选框下标 值
            $("div:first input[type=checkbox]").click(function() {
                var str = "";
                var count = 0;
                $(":checked").each(function(index, domEle) {
                    count++;
                    str += $(domEle).next("a").text() + "、";
                });
                $("div:first p").html("当前选中了" + count + "项，分别是" + str);

            });
            //隔行变色 前三项字体加粗
            $("#btn1").click(function() {
                $("#two table tr:odd").css("background-color", "red");
                $("#two table tr:even").css("background-color", "blue");
            });
            $("#btn2").click(function() {
                $("#two ul li:lt(3)").css("font-weight", "bolder");
            });
            //开关灯
            $("#btn_close").click(function() {
                if ($(this).text() == "关灯") {
                    $("#show_light").css("background-color", "black");
                    $(this).text("开灯");
                } else {
                    $("#show_light").css("background-color", "white");
                    $(this).text("关灯");
                }
            });
            //鼠标点击整行变色
            /*$("#four table tr").mouseover(function() {
                $(this).css("background-color", "yellow");
            });*/
            $("#four table tr").click(function() {
                $(this).css("background-color", "yellow");
            });
            $("#four table tr").mouseout(function() {
                $(this).css("background-color", "white");
            });
            //计算
            $("#btn_equal").click(function() {
                var value1 = $("#txt1").val() * 1;
                var value2 = $("#txt2").val() * 1;
                $("#txt3").val(value1 + value2);
            });
            //全选反选
            $("#allcheck").click(function() {
                $("#last input:checkbox").each(function(index, domEle) {
                    $(domEle).prop("checked", "true");
                });
            });
            $("#invertcheck").click(function() {
                $("#last input:checkbox").each(function(index, domEle) {
                    $(domEle).prop("checked", !$(domEle).prop("checked"));
                });

            });
            $("#unallcheck").click(function() {
                $("#last input:checkbox").each(function(index, domEle) {
                    $(domEle).removeAttr("checked");
                });
            });
        })
    </script>
</head>

<body>
    <div>
        <input type="checkbox"><a>.net</a>
        <input type="checkbox"><a>java</a>
        <input type="checkbox"><a>php</a>
        <p></p>
    </div>
    <div id="two">
        <button id="btn1">表格隔行变色</button>
        <button id="btn2">前三名</button><br>
        <table>
            <tr>
                <td>火箭</td>
            </tr>
            <tr>
                <td>魔术</td>
            </tr>
            <tr>
                <td>湖人</td>
            </tr>
            <tr>
                <td>骑士</td>
            </tr>
            <tr>
                <td>太阳</td>
            </tr>
        </table>
        <ul>
            <li>火箭</li>
            <li>火箭</li>
            <li>火箭</li>
            <li>火箭</li>
            <li>火箭</li>
        </ul>
    </div>
    <div id="show_light">
        <button id="btn_close">关灯</button>
    </div>
    <div id="four">
        <table>
            <tr>
                <td>TOP1</td>
                <td>夏承凛</td>
            </tr>
            <tr>
                <td>TOP2</td>
                <td>问奈何</td>
            </tr>
            <tr>
                <td>TOP3</td>
                <td>荧祸</td>
            </tr>
            <tr>
                <td>TOP4</td>
                <td>元佛子</td>
            </tr>
            <tr>
                <td>TOP5</td>
                <td>夜雨沧神</td>
            </tr>
        </table>
    </div>
    <div>
        <input type="text" id="txt1">+<input type="text" id="txt2"><button id="btn_equal">=</button><input type="text" id="txt3">
    </div>
    <div id="last">
        <input type="checkbox" id="">菊花台
        <br>
        <input type="checkbox" id="">千里之外
        <br>
        <input type="checkbox" id="">青花瓷
        <br>
        <input type="checkbox" id="">兰亭序
        <br>
        <input type="checkbox" id="">超人不会飞
        <br>
        <input type="checkbox" id="">七里香
        <br>
        <input type="checkbox" id="">龙战骑士
        <p>============================</p>
        <button id="allcheck">全选</button>
        <button id="invertcheck">反选</button>
        <button id="unallcheck">全不选</button>

    </div>
</body>

</html>
View Code
来源：https://www.cnblogs.com/xiemin-minmin/p/11021368.html
标签
table
input
jquery
click