jquery动画与事件案例

代码都已经测试通过，直接打开注释即可看见效果！

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//鼠标单击事件/*$("#div1").click(function(){alert('a');});*///鼠标移动上的事件/*$("#div1").mousemove(function(){$(this).css("background","yellow");});*///鼠标离开事件/*$("#div1").mouseout(function(){$(this).css("background","green");});*///鼠标指针进入时/*$("#div1").mouseenter(function(){$(this).css("background","pink");});*///鼠标指针离开时/*$("#div1").mouseleave(function(){$(this).css("background","red");});*///用户按下键盘的时间/*$("[name='pass']").keydown(function(){alert("按下了键");});*///用户释放键盘的时间/*$("[name='pass']").keyup(function(){alert("释放了键");});*///当键盘或按钮被按下时/*$("[name='pass']").keypress(function(){alert("按下了键");});*///获得焦点/*$("[name='pass']").focus(function(){alert("聚焦");});*///失去焦点/*$("[name='pass']").blur(function(){alert("失去焦点");});*///绑定单个事件/*$("#div2").bind("click",function(){alert('单击完了');})*///绑定多个事件/*$("#div2").bind({mouseover:function(){$(this).css("background","red");},mouseout:function(){$(this).css("background","yellow");}});*///移除绑定的事件/*$("#div2").unbind("mouseover");*///toggle()方法，相当于模拟鼠标多次单击事件/*$("p").toggle(function(){$(this).css("background","red")},function(){$(this).css("background","orange")},function(){$(this).css("background","yellow")},function(){$(this).css("background","green")},function(){$(this).css("background","cyan")},function(){$(this).css("background","blue")},function(){$(this).css("background","people")});*///动画，jquery显示和隐藏/*$("p").hide();$("#div2").click(function(){$("p").show("300");});*///隐藏/*$("#div2").click(function(){$("p").hide("300");});*///改变元素的透明度(淡入和淡出)//淡入/*$("p").hide();$("#div2").click(function(){$("p").fadeIn("slow");})*///淡出/*$("#div2").click(function(){$("#div1").fadeOut("slow");})*///改变元素的高度/*$("#div2").click(function(){$("#div1").slideUp("slow");})*//*$("#div1").hide("3000");$("#div2").click(function(){$("#div1").slideDown("slow");})*/})</script><style type="text/css">#div1{width: 200px;height: 150px;background: pink;border-radius: 5px;line-height: 50px;text-align: center;cursor: pointer;}#div2{width: 200px;height: 150px;background: blueviolet;border-radius: 5px;line-height: 50px;text-align: center;cursor: pointer;}</style></head><body><div id="div1">按钮1<p style="background: brown;">p1</p></div><div id="div2">按钮2</div>密码<input type="password" name="pass" /></body>
</html>

jquery动画与事件案例相关推荐

JQuery 动画和事件
今天是JQuery的第四节课啦,今天主要讲JQuery的动画和事件,大家有不懂的在下方评论或者私信,也希望和小编一样在长沙的家人们,做好防疫措施,出门带好口罩,能不出门尽量不出门,不给国家添麻烦. ...
jQuery动画与事件概念以及语法
一.鼠标单击事件: 语法:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").click(fu ...
四、jQuery 中的事件和动画(嘎嘎详细)
文章目录前言一.事件 1.1 加载 DOM 1.1.1 执行时机 1.1.2 多次使用 1.1.3 简写方式 1.2 事件绑定 1.2.1简单使用 1.2.2 简写绑定事件 1.3 合成事件 1. ...
jquery中的事件和动画
目录一.jquery中的事件 1.加载DOM 2.事件绑定 3.合成事件 4.事件冒泡 5.事件对象的属性 6.移除事件二.jquery中的动画 1.隐藏和显示 2.滑动效果 3.淡入淡出效果三 ...
【jQuery笔记Part2】01-jQuery显示隐藏切换动画侧边广告案例
jQuery动画 jQuery动画动画分类 HTML DOM position 属性显示 show(毫秒, 完成回调函数) 隐藏 hide(毫秒, 完成回调函数) 切换 toggle(毫秒, 完成 ...
jQuery动画事件
在学习 jQuery中,jQuery动画也会经常用到的,需要的可以作参考(仅供参考). 1.show()与hide().toggle()方法 show()方法是显示隐藏的匹配元素,而hide()方法是 ...
jQuery 动画事件
目录动画代码演示效果图代码演示效果图事件代码演练动画 jQuery动画:基本包含了一个动画的显示滑动出入效果等三种效果显示动画 1.显示动画 show() 2.隐藏动画 hi ...
1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画...
这周的学习让我初步了解到JQuery作为js库的封装的伟大性.Write less Do more 才是我们真正应该做到的! 1.jQuery基础语法 · 链式编程 $("#div1&quo ...
JavaWeb开发前端语言：jQuery（二）属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...

jquery动画与事件案例

jquery动画与事件案例相关推荐

最新文章

热门文章