jQuery練習

時間 2019-11-12

標籤 jquery 練習欄目 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

1. JQuery練習
2. Jquery練習190328
3. jquery練習
4. jQuery UI練習
5. jquery-練習題
6. jquery練習題
7. JQuery練習題
8. jQuery動畫練習
9. JS——jquery初識練習
10. jQuery練習2——倒計時
更多相關文章...
• 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
• 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• Kotlin學習（二）基本類型

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。