JQuery常用方法（二）

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        .canvas {
            background-color: red;
            border: solid 1px green;
            width: 100px;
            height: 50px;
            cursor: pointer;
        }

        .colorRed {
            background-color: red;
        }

        .colorBlue {
            background-color: blue;
        }

        #div_bgcolor {
            width: 500px;
            height: 500px;
        }
    </style>
    <script src="Scripts/jquery-2.0.0.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $("#btnClone").click(function () {
                $("body").append($("#div_template").clone().removeAttr("id"));
                $("#div_button").append($("#btnTemplate").clone(true));//true带事件，但是属性onclick里面的方法依然有效

            });
            $("#btnTemplate").click(function () {
                //alert("ab");//属性上的onclick依然有效


            });
            $("#btnHasClass").click(function () {
                alert($("#div_template").hasClass("canvas"));
            });

            $("#btnToggle").click(function () {
                $("#div_template").toggle(3000);
            });

            $("#btnToggleClass").click(function () {
                $("#div_bgcolor").toggleClass("colorRed");
            });

            $("#btnFind").click(function () {
                alert($("body").find(".canvas").attr("id"));

            });

            $("#btnEach").click(function () {
                var obj = new Object();
                obj["name"] = "hhw";
                obj["age"] = 23;
                obj["sex"] = "female";
                $.each(obj, function (key, val) {
                    alert(key + "&" + val);
                });
            });
            $("#btnEach2").click(function () {
                var arr = new Array();
                arr[0] = "jack";
                arr[1] = "abc";
                arr[2] = "hhw";
                $.each(arr, function (i, val) {
                    alert(i + "&" + val);
                });
            });


        });
    </script>
</head>
<body>
    <ul>
        <li><button type="button" id="btnClone">克隆</button></li>
        <li><button type="button" id="btnHasClass">HasClass</button></li>
        <li><button type="button" id="btnToggle">开关</button></li>
        <li><button type="button" id="btnToggleClass">ToggleClass</button></li>
        <li><button type="button" id="btnFind">Find</button></li>
        <li><button type="button" id="btnEach">Each</button></li>
        <li><button type="button" id="btnEach2">Each2</button></li>
    </ul>
    <div id="div_button">
        <button onclick="alert('a')" id="btnTemplate">按钮</button>
    </div>
    <div class="canvas" id="div_template">

    </div>
    <div id="div_bgcolor">

    </div>
</body>
</html>
JQuery常用方法（二）

猜你喜欢
