JQuery中的事件及动画用法实例

2020-05-23 06:04:26易采站长站整理

<script>
$(function () {
var comment = $(“#comment”);
$(“.bigger”).click(function () {
if (comment.height() < 500) {
comment.height($(“#comment”).height() + 100);  //在原有高度的基础上增高100
}
});
$(“.smaller”).click(function () { 
if (comment.height() > 100) {
comment.height($(“#comment”).height() – 100);  //在原有高度的基础上降低100
}
});
})
</script>
<body>
<form action=”#” method=”post” id=”regform”>
<div class=”msg”><span class=”bigger”>放大</span><span class=”smaller”>缩小</span></div>
<div style=”” data-mce-style=”color: #800000;”>”><textarea rows=”8″ cols=”20″ id=”comment”>海海海海</textarea></div>
</form>
</body>
上面的操作实现了点击放大时间,textarea的高度变高即面积变大,当点击缩小时间textarea的面积变小,即实现了动画的效果。

7.复选框应用
<script src=”script/jquery-1.7.1.min.js”></script>
<script>
$(function () {
$(“#checkall”).bind(“click”, function () {
$(“:checkbox”).each(function () {
$(this).attr(“checked”, “checked”);         //点击按钮时间需要全部选中
});
});
$(“#checkno”).bind(“click”, function () {
$(“:checkbox”).attr(“checked”, false);    //点击按钮时间需要全部不选中
});
$(“#checkRev”).bind(“click”, function () {
$(“:checkbox”).each(function () {
if ($(this).attr(“checked”) == “checked”) {
$(this).attr(“checked”, false);
}
else {
$(this).attr(“checked”, true);   //点击按钮时间需要选中的清除,未选中的被选中
}
});
});
//或者:
$(this).attr(“checked”, !$(this).attr(“checked”));
});
</script>
<body>
<form>你爱好的运动?<br />
<input type=”checkbox” name=”names” value=”足球 ”  />足球<br />
<input type=”checkbox” name=”names” value=”篮球 ” />篮球<br />
<input type=”checkbox” name=”names” value=”排球 ” />排球<br />
<input type=”checkbox” name=”names” value=”羽毛球 ” />羽毛球<br />
<input type=”button” id=”checkall” value=”全选 ” /><br />