李南江Jquery笔记02--事件绑定，事件冒泡和默认行为，trigger事件触发，自定义事件，命名空间，委托，hover，siblings，展开收起，定制动画，淡入淡出，链式调用，停止延时，打开禁用

心湖中的石子

于 2021-02-27 00:26:32 发布

阅读量277

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/weixin_43745804/article/details/114108729

版权

Jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、两种事件绑定方式

1、eventName（fn）//代码提示，效率高，部分事件jquery没有实现，
2、on（eventName，fn）//没有提示，效率低，所有js事件都可以添加
推荐使用第一种，以上两种方法注册多个事件时不会覆盖

<body>
<div>
</div>
<button>获取</button>
<button>设置</button>
<script>
$(function(){
  //第一种方法
  $('button').eq(0).click(function () {
    console.log('use first method to bind event')
  })
  $('button').eq(0).click(function () {
    console.log('use first method to bind event again')
  })
  $('button').eq(0).mouseleave(function () {
    console.log('use first method to bind mouseleave')
  })

  //第一种方法
  $('button').eq(1).on('click',function(){
    console.log('use the seconde method to bind event')
  })
})
</script>
</body>

2、事件的移除

off（）：移除事件
可以：
不传参：清除元素上的所有事件
传1个参：清除指定类别事件
传2个参：清除指定类别事件上的指定回调函数

<body>
<div>
</div>
<button>获取</button>
<button>设置</button>
<script>
$(function(){
  function fn1(){
    console.log('use first method to bind event')
  }
  function fn2(){
    console.log('use second method to bind event')
  }
  function fn3(){
    console.log('mouse is out')
  }
  $('button').eq(0).click(fn1)
  $('button').eq(0).click(fn2)
  $('button').eq(0).mouseleave(fn3)
  //不传参，清除所有事件
  //$('button').eq(0).off()
  //传1个参(事件类型)，清除指定类别的事件
  //$('button').eq(0).off('click')
  //传2个参(1、事件类型2、具体回调函数)，清除指定类别的事件的指定回调函数
  $('button').eq(0).off('click',fn2)

})
</script>
</body>

3、事件冒泡和默认行为

1、通过return false阻止事件冒泡
2、也可以通过event.stopPropagation来组织事件冒泡
3、通过return false阻止事件默认行为
2、也可以通过event.preventDefault来组织事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.js"></script>
  <style type="text/css">
    *{margin:0; padding: 0}
    .father{width: 200px; height: 200px; background-color: green;
      position: relative; border:50px solid gray;}
    .son{ width: 100px; height: 100px; background-color: blue; position:absolute;left: 50px;top: 50px}
  </style>
</head>
<body>
<div>
</div>
<div class="father">
  <div class="son">

  </div>
</div>
<a href="http://www.sina.com.cn">i am sina</a>
<form method="get" action="http://www.baidu.com">
  <input type="text"/>
  <input type="submit" value="tijiao"/>
</form>


<script>
$(function(){
  $('.son').click(function(event){
    console.log('i am  son')
    //通过return false阻止事件冒泡
    //return false;
    //也可以通过event.stopPropagation来阻止事件冒泡
    event.stopPropagation()
  })
  $('.father').click(function(){
    console.log('i am  father')
  })

  $('a').eq(0).click(function(){
    console.log('i am a link')
    //return false阻止默认行为
    //return false
    //也可以通过event.preventDefault来阻止事件默认行为
    event.preventDefault()
  })
  $('input').eq(1).click(function(){
    console.log('i am sumit some message')
    //return false阻止默认行为
    //return false
    //也可以通过event.preventDefault来阻止事件默认行为
    event.preventDefault()
  })

})
</script>
</body>
</html>

4、trigger，triggerHandler事件自动触发

trigger会触发事件冒泡
triggerHandler不会触发事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.js"></script>
  <style type="text/css">
    *{margin:0; padding: 0}
    .father{width: 200px; height: 200px; background-color: green;
      position: relative; border:50px solid gray;}
    .son{ width: 100px; height: 100px; background-color: blue; position:absolute;left: 50px;top: 50px}
  </style>
</head>
<body>
<div>
</div>
<div class="father">
  <div class="son">

  </div>
</div>
<a href="http://www.sina.com.cn">i am sina</a>
<form method="get" action="http://www.baidu.com">
  <input type="text"/>
  <input type="submit" value="tijiao"/>
</form>


<script>
$(function(){
  $('.father').click(function(){
    console.log('i am  father')
  })
  //自动触发click事件，不阻止事件冒泡
  //$('.father').trigger('click')
  //自动触发click事件，会阻止事件冒泡
  $('.father').triggerHandler('click')

  $('input[type="submit"]').click(function(){
    console.log('submit to action page')
    return false
  })
  //自动触发默认行为，
  //$('input[type="submit"]').triggerHandler('click')

  //利用triggerHandler触发默认事件，不会触发默认行为，
  $('input[type="submit"]').triggerHandler('click')

})
</script>
</body>
</html>

5、自定义事件

1、自定义事件只能通过on方式，不能通过event方式来实现
2、需要通过trigger来自动触发

<script>
$(function(){
  //先通过on设置自定义事件名称及回调函数
  $('.father').on('myclick',function() {
    console.log('i am customer event')
  })
  //时间通过trigger来触发
  $('.father').trigger('myclick')

})
</script>

6、事件命名空间

1、命名空间用来区别不同开发者添加的事件
2、要向使用命名空间必须使用on方式绑定事件
3、通过点句法来绑定命名空间 click.zhagnsan
4、要通过trigger或triggerHandler来触发

PS：
- 利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发，而父元素没有命名空间的事件不会被触发
- 利用trigger触发子元素不带命名空间的时间，那么子元素所有相同类型的事件和父元素所有相同类型的时间都会被触发

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.js"></script>
  <style type="text/css">
    *{margin:0; padding: 0}
    .father{width: 200px; height: 200px; background-color: green;
      position: relative; border:50px solid gray;}
    .son{ width: 100px; height: 100px; background-color: blue; position:absolute;left: 50px;top: 50px}
  </style>
</head>
<body>
<div>
</div>
<div class="father">
  <div class="son">

  </div>
</div>

<script>
$(function(){
  //先通过on设置自定义事件名称及回调函数
  $('.father').on('click.zhangsan',function() {
    console.log('zhangsan code the event')
  })
  $('.father').on('click.lisi',function() {
    console.log('lisi code the event')
  })
  //时间通过trigger来触发
  $('.father').trigger('click.lisi')

})
</script>
</body>
</html>

7、delegate事件委托

1、请别人帮忙做事情，然后将做完的结果反馈给我们
2、由被委托人使用delegate要使用三个参数，第一个参数是委托人，第二个参数是委托的事件，第三个参数是回调函数
3、被委托人通常是委托人的父一级元素

常有的委托的情境是：需要执行事件时，执行事件的主体还没有被new出来，因此只有找其父级元素，通过父级元素（被委托人）来实现事件，再将事件传导到new出来的这个委托人

委托的底层原理离不开事件冒泡，执行完被委托人，再去找委托人执行（此时委托人已经new出来了）

<body>
<div >
  <ul>
    <li>i am first li</li>
    <li>i am seconde li</li>
    <li>i am third li</li>

  </ul>
  <button>add</button>
</div>

<script>
$(function(){
  //点击按钮增加一个li
  $('button').eq(0).click(function () {
    $('ul').append('<li>i am new li</li>')
  })
  //点击任何一个li,在，jquery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jquery会遍历所有找到的元素，给所有找到的元素添加事件
  /*
  $('ul>li').click(function(){
    console.log($(this).html())
  })

   */
  //新增的li无法响应事件，因此要委托给ul来进行响应事件
  $('ul').delegate('li','click',function () {
    console.log($(this).html())
  })

})
</script>
</body>

8、hover移入移除事件

1、mouseover和mouseout事件下，子元素的移入移出也会触发父元素的移入移出
2、mouseenter，mouseleave不存在上述问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.js"></script>
  <style type="text/css">
    *{margin:0; padding: 0}
    .father{width: 200px; height: 200px; background-color: green;
      position: relative; border:50px solid gray;}
    .son{ width: 100px; height: 100px; background-color: blue; position:absolute;left: 50px;top: 50px}
  </style>
</head>
<body>
<div>
</div>
<div >
  <div class="father">
    <div class="son">

    </div>
  </div>
</div>

<script>
$(function(){
  /*
  //子元素的移入移出也会触发父元素的移入移出
  $('.father').mouseoutleave(function(){
    console.log('father is moveout')
  })

  $('.father').mouseover(function(){
    console.log('father is moveover')
  })


  $('.father').mouseleave(function () {
    console.log('father is moveout')
  })

  $('.father').mouseenter(function () {
    console.log('father is enter')
  })
 */
  //hover同时监听移入和移出，第一个回调监听移入，第二个回调监听移出
  $('.father').hover(function () {
    console.log('father is move in')
  },function () {
    console.log('father is move out')

  })
})
</script>
</body>
</html>

9、电影排行榜案例

找出指定元素在选择集合中的索引号

<script>
$(function(){
  let index =$('.father').index()
  $('div').eq(index).addClass('myclass')
})
</script>

10、siblings选中同级别元素

siblings指同级别的元素，但不包含自己（除自己以外同级别的元素）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.js"></script>
  <style type="text/css">
    *{margin:0; padding: 0}
    .father{width: 200px; height: 200px; background-color: green;
      position: relative; border:50px solid gray;}
    .son{ width: 100px; height: 100px; background-color: blue; position:absolute;left: 50px;top: 50px}
    .current{color: red}
    .greenfont{ color: green}_
  </style>
</head>
<body>
<div>
</div>
<div >
 <ul>
   <li class="current">xxxx</li>
   <li >xxxx</li>
   <li >xxxx</li>
   <li >xxxx</li>
   <li >xxxx</li>
 </ul>
</div>

<script>
$(function(){
  $('.current').siblings().addClass('greenfont')
})
</script>
</body>
</html>

11、显示、隐藏动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.js"></script>
  <style type="text/css">
    *{margin:0; padding: 0}
    .father{width: 200px; height: 200px; background-color: green;
      position: relative; border:50px solid gray;}
    .son{ width: 100px; height: 100px; background-color: blue; position:absolute;left: 50px;top: 50px}
    .mydiv{
      width: 100px; height: 100px; background-color: red;display: none;
    }
    .show{display:block}

  </style>
</head>
<body>
<div class="mydiv">test</div>
<div >
 <button>显示</button>
 <button>隐藏</button>
 <button>切换</button>
</div>

<script>
$(function(){
  $('button').eq(0).click(function(){
    $('.mydiv').show(1000)//动画时长
  })
  $('button').eq(1).click(function(){
    $('.mydiv').hide(500,function(){//动画执行完毕后回调
      console.log('animation had gone')
    })
  })
  $('button').eq(2).click(function(){
    $('.mydiv').toggle(500,function  () {
      console.log('切换完毕')
    })
  })
})
</script>
</body>

12、scroll对联广告

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.js"></script>
  <style type="text/css">
    *{margin:0; padding: 0}
    img{ width: 100px; height: 300px;  top: 200px;}
    .left{float: left; position: fixed; left: 0}
    .right{float:right ;position: fixed; right: 0}
  </style>
</head>
<body>
<img src="images/gril04.jpg" class="left"/>
<img src="images/gril04.jpg" class="right"/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<script>
$(function(){
  $(window).scroll(function(){//监听window对象（网页）的滚动
    //获取网页滚动偏移位
    let offset=$('html,body').scrollTop()//浏览器兼容写法
//判断网页是否滚动到合适位置
    if(offset>330){
      $('img').show(500)

    }else {
      $('img').hide(500)

    }

  })
})
</script>
</body>
</html>

13、slidedown，slideUp展开和收起动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.js"></script>
  <style type="text/css">
    *{margin:0; padding: 0}
    .test{width: 100px; height: 200px; background-color: red; display: none}
  </style>
</head>
<body>
<button>展开</button><button>收起</button><button>切换</button>
<div class="test">test</div>
<script>
$(function(){
  $('button').eq(0).click(function(){
    $('div').slideDown(500,function () {
      console.log('finished expand')
    })
  })
  $('button').eq(1).click(function(){
    $('div').slideUp(500,function () {
      console.log('finished up')
    })
  })
})
</script>
</body>
</html>

14、折叠菜单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.js"></script>
  <style type="text/css">
    *{margin:0; padding: 0}
    .nav{width: 300px; height: 200px;}
    .nav>li{border: 1px solid gray; line-height: 35px; text-indent: 2em;}
    .nav>li:last-child{border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
    .nav>li:first-child{border-top-left-radius: 5px;border-top-right-radius: 5px;}
    .sub{ background-color: green; display: none}
  </style>
</head>
<body>
<ul class="nav">
  <li>一级菜单
    <ul class="sub">
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
  <li>一级菜单
    <ul class="sub">
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
  <li>一级菜单
    <ul class="sub">
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
</ul>
<script>
$(function(){
  $('.nav>li').click(function(){
    //找到一级菜单中叫做sub的儿子
    $(this).children('.sub').slideDown(500)
    //拿到所有非当前二级菜单
    $(this).siblings().children('.sub').slideUp(500)

  })
  
})
</script>
</body>
</html>

15、停止当前动画-下拉菜单

每次动画前执行下stop（）方法停止播放动画

$('div').stop()//停止当前动画

16、淡入、淡出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.js"></script>
  <style type="text/css">
    *{margin:0; padding: 0}
    div{ width: 200px; height: 200px; background-color: red; display: none}
  </style>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>淡入到</button>
<button>切换</button>
<div>test</div>

<script>
$(function(){
  $('button').eq(0).click(function(){
    $('div').fadeIn(500,function () {
      console.log('already fadein')
    })
  })
  $('button').eq(1).click(function(){
    $('div').fadeOut(500,function () {
      console.log('already fadeout')
    })
  })
  $('button').eq(2).click(function(){
    $('div').fadeTo(500,0.5,function () {
      console.log('already fadeout')
    })
  })
  $('button').eq(3).click(function(){
    $('div').toggle(500,function () {
      console.log('already troggle')
    })
  })

})
</script>
</body>
</html>

17、动画的链式调用

$('.ad').slideDown(500).fadeIn(500).fadeOut(500);

18、自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.js"></script>
  <style type="text/css">
    *{margin:0; padding: 0}
    div{ width: 200px; height: 200px; background-color: red; }
    .two{background-color: green; }
  </style>
</head>
<body>
<button>操作属性</button>
<button>累加属性</button>
<button>关键字</button>
<div class="one">one</div>
<div class="two">two</div>
<script>
$(function(){
  $('button').eq(0).click(function(){
    //这个背景色的变化体现不出来，但是宽度可以'linear'是缓动
    $('.one').animate({ backgroundColor: '#223838',width:500},500,'linear',function(){
      console.log('自定义动画完成')
    })//animate中对象设置的属性就会自带动画
  })
  $('button').eq(1).click(function(){
    $('.one').animate({width:'+=100'},500,function(){
      console.log('自定义动画完成')
    })//animate中对象设置的属性就会自带动画
  })
  $('button').eq(2).click(function(){
    //toggle有则不执行，没有则执行
    $('.one').animate({width:'toggle'},500,,function(){
      console.log('自定义动画完成')
    })//animate中对象设置的属性就会自带动画
  })


})
</script>
</body>
</html>

19、动画的stop和delay

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.js"></script>
  <style type="text/css">
    *{margin:0; padding: 0}
    div{ width: 200px; height: 200px; background-color: red; }
    .two{background-color: green; }
  </style>
</head>
<body>
<button>开始动画</button>
<button>结束动画</button>
<div class="one">one</div>
<div class="two">two</div>
<script>
$(function(){
  $('button').eq(0).click(function(){
    //延迟1秒再链式执行下一个自定义动画
    $('.one').animate({width:500},500).delay(3000).animate({height:500},500)
  })
  $('button').eq(1).click(function(){
    //立即停止当前动画
    //$('.one').stop();
    //立即停止当前和后续的
    $('.one').stop(true,false);
    //stop的两个参数是一个true和false的两两组合
  })

})
</script>
</body>
</html>

20、打开或禁用全局动画

jqury.fx.off：打开或禁用动画

jqury.fx.off=true

interva是用来设置动画帧数

jquery.fx.interva=100

21、图标显示

<script>
$(function(){
  $('li').each(function (index,element) {
    //1、生成新的图片位置
    let $url='url(\"images/bg.png\") no-repeat 0'+(index *-24)+"px";
    //2、设置新图片的位置
    $(this).children('span').css('bacground','$url')
  })

})
</script>

22、无限循环滚动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.js"></script>
  <style type="text/css">
    *{margin:0; padding: 0}
    ul{list-style: none;}
    div{ width: 304px; height: 102px; border:1px solid red; position: absolute;
      top: 50px; left: 200px; overflow: hidden;}
    ul{ width: 912px; height: 102px;background-color: black}
    ul>li{ float: left;}
    img{width: 150px; height: 100px; display: inline-block;border:1px solid gray}
  </style>
</head>
<body>
<div>
  <ul>
    <li><img src="images/gril03.jpg"/> </li>
    <li><img src="images/gril04.jpg"/> </li>
    <li><img src="images/gril05.jpg"/> </li>
    <li><img src="images/gril06.jpg"/> </li>
    <li><img src="images/gril03.jpg"/> </li>
    <li><img src="images/gril04.jpg"/> </li>
  </ul>
</div>
<script>
$(function(){
  //0、定义一个变量保存偏离位
  let offset=0;
  //1、让图片滚动起来
  let timer;
  function autoPlay(){
    timer=setInterval(function(){
      offset+=-10;
      if (offset<=-608){
        offset=0;
      }
      $('ul').css('margin-left',offset)
    },60)
  }
  autoPlay();
  //2、监听ul的移入和移除
  $('li').hover(function(){
    clearInterval(timer)
    //给非当前li添加一个黑色蒙版
    $(this).siblings().fadeTo(100,0.3)
    //除去当前选中的模板
    $(this).fadeTo(100,1)
  },function(){
    autoPlay();
    //取出所有的蒙版
    $('li').fadeTo(100,1)
  })
})
</script>
</body>
</html>