zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    SCILAB简介[z]
    UG OPEN API编程基础 2约定及编程初步
    Office 2003与Office 2010不能共存的解决方案
    UG OPEN API 编程基础 3用户界面接口
    NewtonRaphson method
    UG OPEN API编程基础 13MenuScript应用
    UG OPEN API编程基础 14API、UIStyler及MenuScript联合开发
    UG OPEN API编程基础 4部件文件的相关操作
    UG OPEN API编程基础 1概述
    16 UG Open的MFC应用
  • 原文地址:https://www.cnblogs.com/xiemin-minmin/p/11021368.html
Copyright © 2011-2022 走看看