jQuery 用法二_slideout事件-CSDN博客

本文链接：https://blog.csdn.net/qq_36545656/article/details/54023884

续上节

4、事件的焦点:: blur(挡元素失去焦点时触发)，通常blur事件被用在表格元素中；例如：input,但是在近来的浏览器中，已经将范围扩大到所有的元素类型中，网页中一个元素可以失去焦点通过键盘tab键，或者鼠标点击

<input id="target" type="text" value="Field 1">
<div id="other">
    Trigger the handler
</div>

$( "#target" ).blur(function() {
        alert( "Handler for .blur() called." );
    });
 $( "#other" ).click(function() {
        $( "#target" ).blur();
    });

5、浏览器事件：：resize scroll error
当窗口大小改变时触发;

$( window ).resize(function() {
        $( "#log" ).append( "<div>Handler for .resize() called.</div>" );
    });

当鼠标滚动时触发：

<div id="log">
    Trigger the handler
</div>
<div id="target" style="overflow: scroll; width: 200px; height: 100px;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur
    sint occaecat cupidatat non proident, sunt in culpa qui
    officia deserunt mollit anim id est laborum.
</div>


 $( "#target" ).scroll(function() {
        $( "#log" ).append( "<div>Handler for .scroll() called.</div>" );
    });

6、事件的冒泡::

<div>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
<style>
div{
  width:200px;
  height；200px;
background:green
}
</style>

$('body').bind('click',handle1);
    $('div').bind('click',handle2);
    function handle1(){
        console.log('body');
    }
    function handle2(){
        console.log('div');
    }

点击页面空白处，会发现只调用了handle1;点击div后，handle1和handle2同时被调用，即冒泡机制；
阻止冒泡：

function handle2(){
        console.log('div');
        event.stopPropagation();
    }

使用stopPropagation()来阻止向上冒泡；再次点击div时，发现body不再打印；

7、自定义事件::

clickbtn =$('#ClickMeBtn');
    clickbtn.click(function () {
        var e = jQuery.Event('MYEvent');
        clickbtn.trigger(e);
    });
    clickbtn.bind('MYEvent',function(event){
        console.log(event);
    })

四、jQuery效果（隐藏/显示、淡入/淡出、滑动、回调）

隐藏/显示::hide/show 、 toggle

淡入/淡出:: fadeIn/ fadeOut 、 fadeToggle
滑动：slideIn/slideOut 、 slideToggle
回调：

例子1：animate

<div id="clickme">
    Click here
</div>
<img id="book" src="../img/12.jpg" alt="" width="100" height="123"
     style="position: relative; left: 10px;">

$(document).ready(function(){
      $('#clickme').click(function(){
          $('#book').animate({
              opacity:0.25,
              left:'+=50',
              height:'toggle'
          },5000,function(){
              $('#clickme').text('动画完成')
          })
      })

  })

例子2：

<ul>
<li id="lili"></li>
</ul>

 $( "li" ).animate({
      opacity: .5,
      height: "50%"
  }, {
      step: function( now, fx ) {
          var data = fx.elem.id + " " + fx.prop + ": " + now;
          $( "body" ).append( "<div>" + data + "</div>" );
      }
  });

easing:

 $( "#clickme" ).click(function() {
          $( "#book" ).animate({
              width: [ "toggle", "swing" ],
              height: [ "toggle", "swing" ],
              opacity: "toggle"
          }, 5000, "linear", function() {
              $( this ).after( "<div>Animation complete.</div>" );
          });
      });

淡入：

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeIn demo</title>
  <style>
  span {
    color: red;
    cursor: pointer;
  }
  div {
    margin: 3px;
    width: 80px;
    display: none;
    height: 80px;
    float: left;
  }
  #one {
    background: #f00;
  }
  #two {
    background: #0f0;
  }
  #three {
    background: #00f;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
 
<script>
$( document.body ).click(function() {
  $( "div:hidden:first" ).fadeIn( "slow" );
});
</script>
 
</body>
</html>

滑动：

  $( "#clickme" ).click(function() {
          $( "#book" ).slideToggle( "slow", function() {
              // Animation complete.
          });
      });

slideDown slideUp 和slideToggle 用法一样。