<!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 οnclick="alert('a')" id="btnTemplate">按钮</button>
</div>
<div class="canvas" id="div_template">
</div>
<div id="div_bgcolor">
</div>
</body>
</html>
JQuery常用方法(二)
最新推荐文章于 2023-03-10 16:13:26 发布