Jquery
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:editor 阅读 312
看Jquery已有一段日子,最近忙于工作看得慢了一些,今天我主要是学了toggle和trigger两个函数,它们的具体使用方法,我大致了解如下<!DOCTYPEhtmlPUBLIC"-/

          看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

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2