jQuery事件与动画

jQuery中的事件与动画1.  基础事件： window事件，鼠标事件，键盘事件，表单事件2.  语法：事件名="函数名()";或者：DOM 对象名.事件名=函数；3. jQuery中典型的事件方法：事件                  jQuery中的对应方法                 说明单击事件                      click()             单击鼠标时发生，fn表示绑定的函数按下键盘触发事件               keydown()            按下键盘时发生，fn表示绑定的函数失去焦点事件                  blur()              失去焦点时发生，fn表示绑定的函数4.  window事件：当用户执行某些会影响浏览器的操作时，而触发的事件鼠标事件：当用户在文档上移动或单击鼠标时而产生的事件常用鼠标事件的方法click()：     触发或将函数绑定到指定元素的click事件           单击鼠标时发生mouseover()：     触发或将函数绑定到指定元素的mouseover事件    鼠标指针移过时mouseout():    触发或将函数绑定到指定元素的mouseout事件     鼠标指针移出时5. 键盘事件：当键盘聚焦到Web浏览器时，用户每次按下或者释放键盘上的按键时都会产生事件。键盘事件：keydown():    触发或将函数绑定到指定元素的keydown事件    按下按键时发生 keyup():    触发或将函数绑定到指定元素keyup事件     释放按键时发生keypress():     触发或将函数绑定到指定元素keypress事件     产生可打印的字符时6. 表单事件：所有事件类型中最稳定，且支持最稳定的事件之一。常用表单事件方法:focus():    触发或将函数绑定到指定元素focus事件     获得焦点时发生blur():     触发或将函数绑定到指定元素blur事件     失去焦点时发生7. 示例：<!DOCTYPE html>
<html><head><title>01.html</title><script src="js/jQuery1.11.1.js"></script><script type="text/javascript">/*  $(function(){$("input").keydown(function(){$("div").append("keydown");});});  *///获取d对象的ASCII编码/* $(function(){$("input").keyup(function(event){var result=event.keyCode;$("div").append(result);});});  *///给文本框添加样式/*  $(function(){$("input").focus(function(){$(this).addClass("border-color",'pink');});});  */</script></head><body>请输入内容:<input type="text"><div></div></body>
</html>8.  绑定事件与移除事件：1》绑定事件:  语法：  bind（type，[data]，fn）bind（）方法有3个参数，其中参数data不是必须的，bind()方法的参数说明type():   事件类型     主要包括blur，focus，click，mouseover等基础事件，此外，还可以是自定义事件[data]:   可选参数     作为event.data属性值传递给事件对象的额外数据对象，该参数不是必须的fn：    处理函数         用来绑定的处理函数9. 1）绑定单个事件示例：<!DOCTYPE html>
<html><head><title>示例4</title><script src="js/jQuery1.11.1.js"></script><script type="text/javascript"> $(document).ready(function(){$("input[name=event_1]").blid("click",function(){$("p").css('background-color','pink'); });});</script></head><body><h1>你是否对生活已经充满了绝望</h1><h2>别担心，生活也对你充满了绝望</h2><p>如果上帝没有帮助你，是因为他相信你可以</p><h2>如果生活欺骗了你</h2><p>别担心，他明天还会继续欺骗你</p><h2>哪有那么多想帮助你的人</h2><ul><li>他们只是想看你怎么出丑</li></ul> <input name="event_1" type="button" value="不忘初心，方得始终"/></body>
</html>10  同事绑定多个事件：<!DOCTYPE html>
<html><head><title>two.html</title><script src="js/jQuery1.11.1.js"></script><script type="text/javascript">/*  $(function(){//复合事件$("li").hover(function(){$(this).css("background","pink");},function(){$(this).removeClass("hover");}); *///一次绑定多个事件/* $(function(){$("li").bind({mouseover:function(){$(this).css("background","pink");},mouseout:function(){$(this).css("background","");}});//移除$("li").unbind("mouseover mouseout");});*//* $("ul li").bind("click",function(){$(this).css("background","pink");}); });*//* $(function(){$("li").bind("mouseover",function(){$(this).css("background","red");}).bind("mouseout",function(){$(this).css("background","");});//移除所有事件$("li").unbind("mouseout mouseover");}); *//*  $(function(){$("li").on("mouseover",function(){$(this).css("background","red");}).on("mouseout",function(){$(this).css("background","");});//移除所有事件$("li").off("mouseout mouseover");}); */</script></head><body><ul><li>生我何用？不能欢笑</li><li>灭我何用？不减狂骄 </li></ul></body>
</html>11 移除事件： 语法： unbind([type],[fn])unbind()方法的参数说明[type]:   事件类型      主要包括blur，focus，click，mouseover等基础事件，此外，还可以是自定义事件[fn]:     处理函数      用来解除绑定的处理函数12. 复合事件：1》hover（）方法：  用于模拟鼠标指针悬停事件语法：hover(enter，leave);2》 toggle()方法：  用于模拟鼠标连续click事件，语法：toggle(fn1，fn2，...fnN);12. 控制元素显示与隐藏：1. 控制元素显示：语法：$(selector).show([speed],[callback]);speed：可选，规定元素从隐藏到完全的可见的速度，默认0callback： 可选，show函数执行完之后，要执行的函数2. 控制元素隐藏:语法：$(selector).hide([speed],[callback]);参数设置方式与show（）方法相同3. 切换元素可见状态使用toggle方法13 改变元素透明度：1. 控制元素淡入：语法： $(selector).fadeIn([speed],[callback]);speed：可选，规定元素从隐藏到完全的可见的速度，默认0callback： 可选，fadeIn函数执行完之后，要执行的函数2.  控制元素淡出：语法： $(selector).fadeOut([speed],[callback]);14 改变元素高度：slideUp()  元素从上向下延伸,slideDown()   相反

jQuery事件与动画相关推荐

锋利的JQuery —— 事件和动画
大图猛戳本文转自博客园xingoo的博客,原文链接:锋利的JQuery -- 事件和动画,如需转载请自行联系原博主.
2021/10/31 前端开发之JavaScript+jQuery入门第十二章jQuery事件与动画
目录 1.jQuery中的事件 1.1 事件的组成 1.2 基础事件 2.载入事件 3.鼠标事件 4.键盘事件 5.浏览器事件 6.表单事件 7.绑定事件 8.移除事件 9.复合事件 10.控制元素显 ...
5.jquery事件与动画
一.事件(重要) 1.jquery绑定事件 jQuery对象.bind("事件名",可选参数,事件处理函数) 注意: 1.第二个参数为可选参数,作为event.data属性值传递给 ...
轻松学习jQuery事件和动画
✅作者简介:热爱国学的Java后端开发者,修心和技术同步精进.
JQuery中的事件以及动画
嘿嘿,今天学习了JQuery的事件以及动画,感觉即将学习完JQuery,在回忆起上周学习的JavaScript,感觉好多刚刚学习的知识点都记得模糊啦,这个是很让失望的,这里只说明了一点,课是听过啦, ...
jQuery基础：下（事件及动画效果）
//.click()绑定单击事件,回调函数中的参数是当前的jQuery事件$('.i1').click(function(e) {alert('w shi ni baba!');console.log ...
jquery中的事件和动画
目录一.jquery中的事件 1.加载DOM 2.事件绑定 3.合成事件 4.事件冒泡 5.事件对象的属性 6.移除事件二.jquery中的动画 1.隐藏和显示 2.滑动效果 3.淡入淡出效果三 ...
jQuery 选择器、DOM操作、事件、动画
$(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对 ...
java day45【JQuery 高级：动画，遍历，事件绑定，案例，插件】
第一章 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数: 1. speed:动画的速 ...

jQuery事件与动画

jQuery事件与动画相关推荐

最新文章

热门文章