欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery的常用方法及使用教程

程序员文章站 2022-06-21 16:52:08
jquery的常用方法及使用教程

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;  
        }  
  
        #p_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($("#p_template").clone().removeattr("id"));  
                $("#p_button").append($("#btntemplate").clone(true));//true带事件,但是属性onclick里面的方法依然有效  
  
            });  
            $("#btntemplate").click(function () {  
                //alert("ab");//属性上的onclick依然有效  
  
  
            });  
            $("#btnhasclass").click(function () {  
                alert($("#p_template").hasclass("canvas"));  
            });  
  
            $("#btntoggle").click(function () {  
                $("#p_template").toggle(3000);  
            });  
  
            $("#btntoggleclass").click(function () {  
                $("#p_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>  
    <p id="p_button">  
        <button onclick="alert('a')" id="btntemplate">按钮</button>  
    </p>  
    <p class="canvas" id="p_template">  
  
    </p>  
    <p id="p_bgcolor">  
  
    </p>  
</body>  
</html>