码迷,mamicode.com
首页 > Web开发 > 详细

jQuery_事件学习

时间:2017-11-09 20:46:41      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:meta   charset   内容   none   idt   input   元素   splay   lib   

一、click事件

click事件----鼠标单击事件

$(‘.bt‘).click(function() { alert("本身的事件");})

当class为bt的div被但单击时执行函数体的内容部分

 $(‘.bt‘).click(function() {
          $(‘.bt2‘).click();
        })
当class为bt的div被但单击时执行class为bt2的div的click()事件

栗子:
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
   .bt{
       background:#F00;
       
   }
   .bt2{
       background:#f0f;
       display:none;
   }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <div class="bt">click()鼠标单击事件</div>
     <div class="bt2">间接响应</div>
    <script type="text/javascript">
        $(‘.bt‘).click(function() {
            alert("本身的事件");
          $(‘.bt2‘).click();
        })
         $(‘.bt2‘).click(function() {
          alert("调用其他对象绑定的事件");
        })
</script>

</body>

</html>

二、mousemove()和mousemout()

鼠标移入(当鼠标移入到该元素的内部时触发)和移出事件(当鼠标移出元素的内部时触发)

栗子:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<style>
    .test{
        height:100px;
        width:100px;
        background:#F00;
    }
    
</style>
<body>
    <h2>.mousemove()方法</h2>
    <div class="test"></div>
    <script type="text/javascript"> 
    //鼠标移入事件
    $(".test").mousemove(function(){
         $(".test").css({"background":"blue","width":"100px","height":"100px"});
    });
    //鼠标移出事件
     $(".test").mouseout(function(){
         $(".test").css({"background":"yellow","width":"50px","height":"50px"});
     });
    </script>
</body>

</html>

 

三、hover事件

hover()方法是同时绑定 mouseenter和 mouseleave事件。

使用:hover(function(){

  鼠标移入元素时触发的内容

  },function(){

  鼠标移出元素时触发的内容

})

栗子:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .test{
        width:100px;
        height:100px;
        background:#000;
        color:#FFF;
    }
    
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <div class="test">hover()事件</div>
    <script type="text/javascript">
    $(".test").hover(function(){
        $(".test").css("background","red");
    },function(){
        $(".test").css("background","blue");
    });

    </script>
</body>

</html>

 

四、focusin()聚焦事件和focusout()失焦事件

聚焦事件--当该元素获得聚焦时触发

失焦事件---当该元素失去焦点时触发

栗子:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head> 

<body>
    <p>聚焦事件:<input class="in"/></p>
    <p>失焦事件:<input class="ot"/></p>
    <script type="text/javascript">
        //input聚焦元素增加一个边框
        $(".in").focusin(function() {
             $(this).css(‘border‘,‘2px solid red‘);
        });
        $(".ot").focusout(function(){
            alert("真的要放弃填写吗?");
        });
    </script>
</body>

</html>

 

jQuery_事件学习

标签:meta   charset   内容   none   idt   input   元素   splay   lib   

原文地址:http://www.cnblogs.com/soulsjie/p/7811087.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!