看Jquery已有一段日子,最近忙于工作看得慢了一些,今天我主要是学了toggle和trigger两个函数,它们的具体使用方法,我大致了解如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FifthDay</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#toggelDiv").toggle(
function(){$("#toggelDiv").css("background","red")},
function(){$("#toggelDiv").css("background","green")},
function(){$("#toggelDiv").css("background","black")}
);
$("#hideBtn").click(function(){
$("#show").toggle();
});
$("#triggerEventshow").click(function(){alert("这是show按钮的事件");});
$("#showss").click(function(){
$("#selectContent").trigger("select");
$("#triggerEventshow").trigger("click");
});
});
</script>
<style type="text/css">
.title{ border:solid #82C43A 2px;width:360px;margin-bottom:5px;color:gray;margin-top:10px;}
</style>
</head>
<body>
<div class="title">toggel方法的使用,点击颜色方框,改变背景颜色</div>
<div id="toggelDiv" style="width:600px;height:400px; background:#003"></div>
<br />
<div class="title">使用toggel函数,自动切换div的显示和隐藏</div>
<input id="hideBtn" type="button" value="隐藏Button"/>
<div id="show" style="background:#CF9; width:200px;height:40px;">使用toggle隐藏、显示div</div>
<br />
<div class="title">trigger函数,模拟事件触发</div>
<input id="showss" type="button" value="触发Show事件并选择文本框文字"/>
<input id="triggerEventshow" type="button" value="Show"/>
<input type="text" id="selectContent" value="这是选中内容" />
</body>
</html>
Edit:翱翔之心
URL:http://www.cnblogs.com/aoxiangzhixin/archive/2011/08/17/2141705.html
Date:2011-08-17 01:34