jQuery当中的常见时事件

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

可以直接使用的常见事件

• 可以直接使用的事件就是可以不利用 on 来绑定，直接就可以使用的事件方法

• click

  // 直接给 div 绑定一个点击事件
  $('div').click(function () {
      console.log('我被点击了')
  })
  ​
  // 给 div 绑定一个点击事件并传递参数
  $('div').click({ name: 'Jack' }, function (e) {
      console.log(e.data)
  })
  

• dblclick

  // 直接给 div 绑定一个双击事件
  $('div').dblclick(function () {
      console.log('我被点击了')
  })
  ​
  // 给 div 绑定一个双击事件并传递参数
  $('div').dblclick({ name: 'Jack' }, function (e) {
      console.log(e.data)
  })
  

• scroll

  // 直接给 div 绑定一个滚动事件
  $('div').scroll(function () {
      console.log('我被点击了')
  })
  ​
  // 给 div 绑定一个滚动事件并传递参数
  $('div').scroll({ name: 'Jack' }, function (e) {
      console.log(e.data)
  })
  

• hover

  // 这个事件要包含两个事件处理函数
  // 一个是移入的时候，一个是移出的时候触发
  $('div').hover(function () {
      console.log('我会再移入的时候触发')
  }, function () {
      console.log('我会在移出的时候触发')
  })
  

动画

• show

  // 给 div 绑定一个显示的动画
  $('div').show() // 如果元素本身是 display none 的状态可以显示出来
  ​
  // 给 div 绑定一个显示的动画
  // 接受三个参数
  // $('div').show('毫秒', '速度', '回调函数') 
  $('div').show(1000, 'linear', function () {
      console.log('我显示完毕')
  }) 
  

• hide

  // 给 div 绑定一个隐藏的动画
  $('div').hide() // 如果元素本身是 display block 的状态可以隐藏起来
  ​
  // 给 div 绑定一个显示的动画
  // 接受三个参数
  // $('div').show('毫秒', '速度', '回调函数') 
  $('div').hide(1000, 'linear', function () {
      console.log('我隐藏完毕')
  }) 
  

• toggle

  // 给 div 绑定一个切换的动画
  $('div').hide() // 元素本身是显示，那么就隐藏，本身是隐藏那么就显示
  ​
  // 给 div 绑定一个显示的动画
  // 接受三个参数
  // $('div').show('毫秒', '速度', '回调函数') 
  $('div').toggle(1000, 'linear', function () {
      console.log('动画执行完毕')
  }) 
  

• animate

  // 定义一个自定义动画
  $('.show').click(function () {
      $('div').animate({
          width: 500,
          height: 300
      }, 1000, 'linear', function () {
          console.log('动画运动完毕')
      })
  })
  

• stop

  // 立刻定制动画
  $('div').stop() // 就停止再当前状态
  

• finish

  // 立刻结束动画
  $('div').finish() // 停止在动画结束状态