模拟用户操作

模拟用户的操作触发事件
在jQuery中一般常用triggerHandler()方法和tigger()方法来模仿用户的操作触发事件

$("#button").trigger("click");

例、为按钮绑定click事件,弹出参数msg1+msg2连接到一起的字符串,在使用tigger()方法。

  <input type="button" name="button" id="button" value="按钮" />
  <script type="text/javascript"> 
   $(document).ready(function(){
    $("input:button").bind("click",function(event,msg1,msg2){
     alert(msg1+msg2);
    }).trigger("click",["欢迎访问","明日科技"]);
   });
  </script>

2、模仿悬停事件
模仿悬停事件是指模仿鼠标移动到一个对象上面又从该对象上面移除的事件,可以通过hover()方法实现。
例、添加hover()方法鼠标移到该元素时,触发第一个函数,鼠标移除时,出发第二个函数。

  <script type="text/javascript">
   $(document).ready(function(){
    $("a.main").hover(function){
     window.status="http://www.mrbccd.com";return ture;
    },function(){
     window.status="完成";return ttrue;
    });
   });
  </script>

事件捕获与事件冒泡
css样式

<style type="text/css">
   .redBorder{
    border: 1px solid red;
   }
   .testl{
    width: 240px;
    height: 150px;
    background-color: #cef;
    text-align: center;
   }
   .test2{
    width: 160px;
    height: 100px;
    background-color: #ced;
    text-align: center;
    line-height: 20px;
    margin: 10px auto; 
   }
   span{
    
    width: 60px;
    height: 35px;
    background-color: #fff;
    padding: 20px 20px 20px 20px; 
   
    
   }
   body{
    font-size: 12px;
    }
  </style>

事件对象

 <div class="testl">
  <b>div元素</b>
   <p class="test2">
    <b>p元素</b><br><br>
    <span><b>span元素</b></span>
   </p>
  </div>
 <script type="text/javascript">
  
$(".test1").mouseout(function(){
   $(".test1").removeClass("redBorder");
  });

阻止事件冒泡

 $(".test1").mouseover(function(event){
   $(".test1").addClass("redBorder");
   //event.stopPropagation();
  });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值