JQuery的常用方法及使用教程

程序员文章站 2022-06-21 16:52:08

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>

上一篇： Zipkin分布式跟踪系统介绍

下一篇：程昱为何会被称为曹操手下的*谋士？有何才能

JQuery的常用方法及使用教程

Android编程实现全局获取Context及使用Intent传递对象的方法详解

Win7系统电脑将鼠标停留在桌面图标上不出现提示信息的原因及解决方法图文教程

jQuery使用ajax方法解析返回的json数据功能示例

Android编程实现获取系统内存、CPU使用率及状态栏高度的方法示例

Android开发中使用颜色矩阵改变图片颜色，透明度及亮度的方法

jQuery添加新内容的四个常用方法分析【append，prepend，after，before】

使用 Eclipse 给 APK 签名遇到的问题及解决方法

java的Console类的使用方法及实例

CodeIgniter针对数据库的连接、配置及使用方法

jQuery使用正则验证15/18身份证的方法示例