jquery事件

鼠标事件
- on
- off
- one
- blur
- change
- click
- dblclick
- mouseover
- mouseout
- hover
- keydown
- keyup
- keypress
- resize
- fadeIn
- fadeOut
- fadeToggle
- fadeTo
- slideDown
- slideUp
- slideToggle
- 自定义动画animate

鼠标事件

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值是13if(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) + minlet 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();})

【jquery事件】相关推荐

第79天：jQuery事件总结（二）
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 一.合成事件 jQuery有两个合成事件--hove ...
49 jQuery事件
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.jQuery事件注册单个事件注册语法: element.事件(function() ...
JQuery事件绑定，bind与on区别
jquery事件绑定 bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元 ...
jQuery事件的链式写法
<head> <title>jQuery事件的链式写法</title> <script src="jquery-1.9.1.js&q ...
2017-6-3 jQuery 事件 DOM操作
1. jQuery 事件: ////hover:相当于相当于把mouseover()mouseout()合二为一//$("#div1").hover(function ()//{/ ...
jQuery事件之鼠标事件
jQuery事件之鼠标事件鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发. ...
jQuery 事件用法详解
目录简介实现原理事件操作绑定事件解除事件触发事件事件委托事件操作进阶阻止默认事件阻止事件传播阻止事件向后执行命名空间自定义事件事件队列 jquery中文文档简介 jque ...
jQuery 事件绑定方法（bind hover toggle live.... ）、删除事件方法（unbind, die）及事件对象
事件绑定方法: 1.<type>(function) $("button").click(function(){... }); 2.bind(map) $(" ...
JQuery-学习笔记06【高级——JQuery事件绑定和切换】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
什么是 jQuery 事件
jQuery事件是DOM事件的封装,同时支持自定义的扩展.在程序设计中,事件和代理有着相似的作用: 它们提供了一种机制,使得行为的实现方式和调用时机可以分离. 不谈jQuery,DOM本身就提供了一系 ...

【jquery事件】

jquery事件

鼠标事件

on

off

one

blur

change

click

dblclick

mouseover

mouseout

hover

keydown

keyup

keypress

resize

fadeIn

fadeOut

fadeToggle

fadeTo

slideDown

slideUp

slideToggle

自定义动画animate

【jquery事件】相关推荐

最新文章

热门文章