【jquery事件】

鼠标事件

on

on 方法通常有三个参数 
给未来元素添加事件的时候 事件类型，未来元素，绑定的事件
正常的绑定，两个参数，第一个是事件类型，第二个是绑定的事件方法 */

<p>on点击事件</p>
 <form action="./index.html">
        <input type="text" name="" id="">
        <input type="submit" value="提交">
    </form>

 //单击段落时会显示该段落文本
    $('p').on('click', function () {
        alert($(this).text());
    })
    
 //将数据传递给事件处理程序，该事件处理程序在此按名称指定  
    function myHander(event) {
        // console.log(event);
        alert(event.data.foo);
    }
    $('p').on("click", {foo: "bar"},myHander);

 // 取消表单提交操作，并通过false防止事件冒泡
    $('form').on('submit',false);

 // 取消默认操作 会阻止表单提交
    $('form').on('submit',function(event){
        event.preventDefault();
    });
    
// 停止冒泡事件，而不会阻止表单提交
    $('form').on('submit',function(event){
        event.stopPropagation();
    });

off

从所有段落中删除所有事件处理程序

<p>我是 p 标签</p>
<script>
    $(function () {
        //添加点击事件
        $("p").on("click",function (){
            alert("点击事件 1");
        });
        $("p").on("click",function (){
            alert("点击事件 2");
        });

        //移除全部事件
        $("p").off();
    });
</script>

one

当所有段落被第一次点击的时候，显示所有其文本

<p>我是 p 标签</p>
<script>
    $(function () {
        $("p").one("click",function () {
            alert($(this).text());
        });
    });
</script>

blur

<input type="text" value="=文本框失去焦点">
<script>
    $(function () {
        //input失去焦点
        $("input").blur(function () {
            alert($(this).val());
        });
    })
</script>

change

<input type="text" value="change事件">
<input type="text" value="改变change事件">
<script>
    $(function () {
        //给所有的文本框增加输入验证
        $("input[type='text']").change(function () {
            console.log($(this).val());
        });
    })
</script>

click

<p>我是 p 标签</p>
<script>
    $(function () {
        //触发页面内所有段落的点击事件
        $("p").click(function () {
            alert($(this).html());
        });
    })
</script>

dblclick

<p>我是 p 标签</p>
<script>
    $(function () {
        //触发页面内所有段落的双击事件
        $("p").dblclick(function () {
            alert($(this).html());
        });
    })
</script>

mouseover

	<style>
        div{width: 200px;height: 200px;background-color: blueviolet;}
    </style>
    <div>
        <p style="width: 80px;height: 80px;background-color: burlywood;"></p>
    </div>

 /* 鼠标指针移过时 */
 /* 进入div触发，不出去不触发 */
 $('div').mouseover(function(){
   console.log('mouseover鼠标指针移过时');
 })
 /* 鼠标指针移出时 */
 $('div').mouseout(function(){
   console.log('mouseout鼠标指针移出时');
 })

mouseout

/* 鼠标指针进入时 */
$('div').mouseenter(function(){
    console.log('mouseenter鼠标指针进入时');
 })
  /* 鼠标指针离开时 */
  $('div').mouseleave(function(){
     console.log('mouseleave鼠标指针离开时');
 })

区别:
mouseover 进入子元素的时候也触发
mouseenter 进入子元素的时候不触发
mouseout 进入子元素的时候也触发
mouseleave 进入子元素的时候不触发

hover

hover是由mouseenter和mouseleave组成的

   /* hover是由mouseenter和mouseleave组成的  */
       $('div').hover(function(){
           console.log('鼠标进去了')
       },function(){
           console.log('鼠标出来了')
       })

keydown

键盘按下

<input type="text" name="" id="">

$('input').keydown(function(){
    console.log('键盘按下');
})

keyup

按下键盘松开

 $('input').keyup(function(){
   console.log('释放键盘');
})

keypress

keypress代表键盘敲击过程中产生的事件

$('input').keypress(function () {
    console.log('键盘连续敲打');
 })

判断键盘keyCode

$(document).keyup(function(e){
    //e代表事件源对象
    console.log(e);
    //获取回车的keyCode值是13
    if(e.keyCode==13){
       alert('提交成功');
     }
   })

键盘按下事件向后台传输数据时只发送一次请求
防抖

 /* 实现输入整个语句结束的时候，再打印向后台发送请求 */
        let timer;
        $('input').keyup(function () {
            /* 思路：每次抬起时先清除之前的定时器 */
            clearTimeout(timer)
            /* 没敲击一个字母都会执行下面的话 */
            /* 下面的定时器会产生一个唯一的id */
            /* 每次都会根据唯一的id 把之前的定时器清空 */
            /* 所以就会以最后一次的抬起获取的val值为准 */
            timer = setTimeout(function () {
                console.log('把'+$('input').val()+'发送给后台')
            }, 800)
        })

resize

 let c=['pink','skyblue','red'];
$(window).resize(function(){
  //随机数包含两个数的值 Math.random() * (max - min +1) + min
  let i=Math.floor(Math.random()*(3-1+1)*1); 
  $('h2').css('background',c[i]);
})	

fadeIn

改变元素透明度 淡入

  $("button").eq(1).click(function(){
      /* fast normal slow  */
       $('div').fadeIn(200)
  })

fadeOut

改变元素透明度 淡出

  $(function(){
        $("button").eq(1).click(function(){
            // 淡出
            $("div").fadeOut(1000);
        })
    })

fadeToggle

淡入淡出切换

  $(function(){
        $("button").eq(2).click(function(){
            // 淡入淡出切换
            $("div").fadeToggle(1000);
        })
    })

fadeTo

修改透明度

$(function(){
        $("button").eq(3).click(function(){
            // 修改透明度  透明度和速度必写
            $("div").fadeTo(1000,0.5);
        })
    })

slideDown

slideUp

可以使元素逐步延伸显示
则使元素逐步缩短直至隐藏

 <div></div>
 <button class="a">动起来</button>

	 $('.a').click(function () {
            slideDown()
        })
        function slideDown() {
            /* fast normal slow  */
            $('div').slideDown('slow',slideUp)
        }
        function slideUp() {
            $('div').slideUp('slow', slideDown)
        }

slideToggle

切换延伸显示隐藏
$("div").slideToggle('slow');

自定义动画animate

 $(selector). animate({params},speed,callback)

案例：点击按钮使div盒子移动

<style>
        div {
            width: 60px;
            height: 100px;
            border: 1px solid red;
            position: absolute;
            left:0;
            top:0;
        }
        button{
            position: absolute;
            left:0;
            top:100px;
        }
</style>
 <div>1111111</div>
 <button>123</button>

 		let params1 = {
            left:'200px',
            top:'300px'
        }
        let params2 = {
            left:'400px',
            top:'50px'
        }
        let params3 = {
            left:'600px',
            top:'300px'
        }
        function ani() {
            $('div').animate(params1, 'slow', function () {
                // $('div').css("background", "red")
                $('div').animate(params2,'slow',function(){
                    $('div').animate(params3,'slow')
                })
            })
        }
        $('button').click(function () {
            ani();
        })