jQuery_事件学习

Posted NotFoundObject

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery_事件学习相关的知识,希望对你有一定的参考价值。

一、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_事件学习的主要内容,如果未能解决你的问题,请参考以下文章

jQuery_事件_图片跟随

jQuery_事件学习

jquery_事件

web前端开发JQuery常用实例代码片段(50个)

使用 JQuery ajax 在 DOM 操作后附加事件

笔记之_Java整理jquery