当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JQuery的常用方法及使用教程

JQuery的常用方法及使用教程

2018年11月28日  | 移动技术网IT编程  | 我要评论

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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网