jQuery练习

朴灿烈づ我的快乐病毒、 2021-12-19 17:41 170阅读 0赞

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

转载于:https://www.cnblogs.com/xiemin-minmin/p/11021368.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211219/68bda5bc5c7445e8a0eac59cc8a7512e.png