jquery事件和动画

最新推荐文章于 2021-06-09 16:22:09 发布

倩倩之

最新推荐文章于 2021-06-09 16:22:09 发布

阅读量468

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_36074113/article/details/70809043

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一：事件

1.基础事件：

01.window事件

ready（）：要在DOM就绪时执行的函数

在DOM加载完成时运行的代码，可以这样写：

$(document).ready(function(){
  // 在这里写你的代码...
});

使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。

jQuery 代码:

jQuery(function($) {
  // 你可以在这里继续使用$作为别名...
});

02.鼠标事件

click（）：触发页面内所有段落的点击事件

mouseover():mouseover事件会在鼠标移入对象时触发

mouseout()：mouseout事件在鼠标从元素上离开后会触发

mousemove(): 事件通过鼠标在元素上移动来触发。事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标

mouseup():事件会在鼠标点击对象释放时

mousedown():事件在鼠标在元素上点击后会触发

03. 键盘事件

keyup():事件会在按键释放时触发。

keydown():事件会在键盘按下时触发。

keypress():事件会在键盘按过程中时触发。

04.表单事件

blur():事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

focus():当页面加载后将 id 为 'login' 的元素设置焦点:

$(document).ready(function(){
  $("#login").focus();
});

focusin():当一个元素，或者其内部任何一个元素获得焦点的时候会触发这个事件。这跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

获得焦点后会触发动画:

HTML 代码:

<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>

jQuery 代码

$("p").focusin(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

foucusout():当一个元素，或者其内部任何一个元素失去焦点的时候会触发这个事件。这跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

$("p").focusout(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

2.绑定事件与移除事件

01.绑定事件：

.bind() 方法是用于往文档上附加行为的主要方式。所有JavaScript事件对象，比如focus, mouseover, 和 resize，都是可以作为type参数传递进来的。

当一个事件传到一个元素上，所有绑定在上面的针对哪个事件的处理函数都会触发。如果注册了多个事件处理函数，总是按照绑定的顺序依次触发。当所有绑定的事件处理函数执行完毕后，事件继续沿着普通的事件冒泡途径上浮。

.bind()最基本的用法是：

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

这个代码能使ID为foo的元素响应click事件。当用户点击元素内部之后，就会弹出一个警告框。

多个事件

依次可以绑定多个事件类型，每个事件类型用空格分隔：

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

这个代码让一个<div id="foo">元素（初始情况下class没有设置成entered），当鼠标移进去的时候，在class中加上entered，而当鼠标移出这个div的时候，则去除这个class值。

在jQuery 1.4中，我们也可以通过传入一个映射对来一次绑定多个事件处理函数：

$('#foo').bind({
  click: function() {
    // do something on click
  },
  mouseenter: function() {
    // do something on mouseenter
  }
});

live（):这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

<body>
  <div class="clickme">Click here</div>
</body>

可以给这个元素绑定一个简单的click事件：

$('.clickme').bind('click', function() {
  alert("Bound handler called.");
});

当点击了元素，就会弹出一个警告框。然后，想象一下这之后有另一个元素添加进来了。

$('body').append('<div class="clickme">Another target</div>');

尽管这个新的元素也能够匹配选择器 ".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。

.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的：

$('.clickme').live('click', function() {
  alert("Live handler called."); 
});

然后再添加一个新元素：

$('body').append('<div class="clickme">Another target</div>');

然后再点击新增的元素，他依然能够触发事件处理函数

02.移除事件：

unbind():将绑定的事件移除

移除所有事件：unbind（）；
移除单个事件：unbind("事件名称");

移除多个事件：unbind("事件名称事件名称"); 中间空号相隔

die():jQuery 1.3新增。此方法与live正好完全相反。

如果不带参数，则所有绑定的live事件都会被移除。

你可以解除用live注册的自定义事件。

如果提供了type参数，那么会移除对应的live事件。

如果也指定了第二个参数function,则只移出指定的事件处理函数。

参数

type (可选)String

要解除绑定的live事件

fn (可选)Function

要解除绑定的特定处理函数

示例

描述:

给按钮解除click事件

jQuery 代码:

function aClick() {
      $("div").show().fadeOut("slow");
  }
  $("#unbind").click(function () {
      $("#theone").die("click", aClick)
  });

二：动画

1.控制元素显示和隐藏

show():显示隐藏的匹配元素。

这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

显示所有段落 HTML 代码:

<p style="display: none">Hello</p>

jQuery 代码:

$("p").show()

show(speed, [callback])

以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅。

参数

speedString,Number

三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

callback (可选)Function

在动画完成时执行的函数，每个元素执行一次。

用缓慢的动画将隐藏的段落显示出来，历时600毫秒。

HTML 代码:

<p style="display: none">Hello</p>

jQuery 代码:

$("p").show("slow");

hide():隐藏所有段落

参数

speedString,Number

三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

callback (可选)Function

在动画完成时执行的函数，每个元素执行一次。

用600毫秒的时间将段落缓慢的隐藏

jQuery 代码:

$("p").hide("slow");

用200毫秒将段落迅速隐藏，之后弹出一个对话框。

jQuery 代码:

$("p").hide("fast",function(){
   alert("Animation Done.");
 });

2.切换元素可见状态

toggle():切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

3.改变元素透明度

fadeIn():通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeOut():通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

4.改变元素高度

slideDown(speed, [callback]):通过高度变化（向下增大）来动态地显示所有匹配的元素

slideUp(speed, [callback]):通过高度变化（向上减小）来动态地隐藏所有匹配的元素

5.自定义动画

animate（）：

参数

paramsOptions

一组包含作为动画属性和终值的样式属性和及其值的集合

duration (可选)String,Number

三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing (可选)String

要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

callback (可选)Function

在动画完成时执行的函数

点击按钮后div元素的几个不同属性一同变化

HTML 代码:

<button id="go"> Run</button>
<div id="block">Hello!</div>

jQuery 代码:


// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

// 在一个动画中同时应用三种动画

$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 )，
animate({queue：false，duration：1500);
});

三：上级题

01.左导航特效

<!DOCTYPE html>
<html>
<head>
<title>左导航特效</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
	font-size: 12px;
}

#nav .navsBox {
	width: 160px;
}

#nav .navsBox .firstNav {
	height: 45px;
	line-height: 45px;
	background-color: #EBEBEB;
	border-left: 10px solid #FE705C;
	padding-left: 20px;
	width: 130px;
	font-weight: bold;
	cursor: pointer;
}

#nav .navsBox ul {
	display: none;
	list-style: none;
}

#nav .navsBox ul li {
	display: block;
	height: 45px;
	line-height: 45px;
	padding-left: 70px;
	width: 90px;
	background-color: #F2F2F2;
	background-position: 33px 7px;
	background-repeat: no-repeat;
}

#nav .navsBox ul li.jedh {
	background-image: url("images/huan.gif");
}

#nav .navsBox ul li.jlbbyk {
	background-image: url("images/you.gif");
}

#nav .navsBox ul li.jwljb {
	background-image: url("images/gouwu.gif");
}

#nav .navsBox ul li.mrljb {
	background-image: url("images/meiri.gif");
}

#nav .navsBox ul li.vipjtj {
	background-image: url("images/zhe.gif");
}

#nav .navsBox ul li.onbg {
	background-color: #F9DBD1;
}

#nav .navsBox ul li a {
	color: #000;
	text-decoration: none;
}
</style>
<script type="text/javascript" src="./js/jquery-1.11.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".firstNav").click(function() {
			var $list = $("#nav .navsBox ul");
			if ($list.css("display") == "block")
				$list.css("display", "none");
			else
				$list.css("display", "block");
		});
		$(".navsBox ul li").mouseover(function() {
			$(this).addClass("onbg");
		}), mouseout(function() {
			$(this).removeClass("onbg");
		});

	});
</script>


</head>

<body>
	<div id="nav">
		<div class="navsBox">
			<div class="firstNav">购物特权</div>
			<ul>
				<li class="jedh"><a href="#">全额兑换</a>
				</li>
				<li class="jlbbyk"><a href="#">俱乐部包邮卡</a>
				</li>
				<li class="jwljb"><a href="#">购物领金币</a>
				</li>
				<li class="mrljb"><a href="#">每日领金币</a>
				</li>
				<li class="vipjtj"><a href="#">VIP阶梯价</a>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>

02.登录框特效

<script type="text/javascript">	
	$(document).ready(function(){
	$("input").focus(function(){
	$(this).css("border","1px solid blue");
	}).blur(function(){
	$(this).css("border","");
	});
	});
</script>

03.网站主导航

<!DOCTYPE html>
<html>
<head>
<title>网站主导航</title>
<script type="text/javascript" src="./js/jquery-1.11.1.js"></script>
<style type="text/css">
#menu {
	list-style: none;
	height: 40px;
	line-height: 40px;
	color: #fff;
	font-weight: bold;
	font-size: 12px;
}

#menu li a {
	color: #fff;
	text-decoration: none;
}

#menu li {
	display: block;
	float: left;
	padding: 0px 20px;
	background-color: #2BA6A7;
}

#menu li.on {
	background-color: #147B81;
}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		$("ul li").bind({
			mouseover : function() {
				$(".on").css("background", "#2BA6A7");
				$(this).css("background", "#147B81");
			},
			mouseout : function() {
				$(this).css("background", "#2BA6A7");
			}
		});
	});
</script>
</head>
<body>
	<ul id="menu">
		<li class="on"><a href="#">首页</a></li>
		<li><a href="#">身边团购</a></li>
		<li><a href="#">美食</a></li>
		<li><a href="#">电影</a></li>
		<li><a href="#">KTV</a></li>
		<li><a href="#">酒店</a></li>
		<li><a href="#">购物</a></li>
	</ul>
</body>
</html>

04.FAQ列表

<!DOCTYPE html>
<html>
<head>
<title>FAQ列表</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a,img {
	border: 0;
}

body {
	font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}

.one {
	width: 600px;
	margin: 0 auto;
}

.one .top {
	background-color: #fff;
	height: 33px;
	line-height: 33px;
	width: 700px;
	padding-left: 28px;
	color: #168750;
	font-weight: bold;
	margin-top: 10px;
}

.iocn {
	display: block;
	width: 14px;
	height: 14px;
	background-image: url(images/+.jpg);
	background-repeat: no-repeat;
	float: left;
	margin: 10px 0px 0px 3px;
	padding-right: 10px;
}

.one span.jian {
	background-image: url(images/-.jpg);
}

.one span.jia {
	background-image: url(images/+.jpg);
}

.one div.bgreen {
	background-image: url(images/bg.jpg);
}

div.content {
	display: none;
	padding: 5px;
	width: 716px;
	border: 1px solid #D9EFED;
}
</style>

<script type="text/javascript">
	$(document).ready(function() {
		$(".top").hover(function() {
			$(this).addClass("bgreen");
		}, function() {
			$(this).removeClass("bgreen");
		});

		$(".top").toggle(function() {		
			$(this).find(".iocn").removeClass("jia").addClass("jian");		
			$(this).siblings(".content").show("1");	
			
			/* $(this).removeClass("jia");
			$(this).addClass("jian").fadeIn(1500);	 */		
		}, 
		function() {
			/* $(this).parent().next().hide();
			$(this).removeClass("jian");
			$(this).addClass("jia").fadeIn("slow");	 */	
			$(this).find(".iocn").removeClass("jian").addClass("jia");		
			$(this).siblings(".content").hide("show");
				
		}); 

	});
</script>
</head>
<body>
	<div id="fq">
		<div class="one">
			<div class="top">
				<span class="iocn"></span>什么是人身保险？
			</div>
			<div class="content">
				<img src="images/gd.jpg" /><br />
				<p>人身保险是人的寿命和身体为......</p>
			</div>
		</div>

		<div class="one">
			<div class="top">
				<span class="iocn"></span>什么是保险合同？
			</div>
			<div class="content">
				<img src="images/gd.jpg" /><br />
				<p>保险合同是......</p>
			</div>
		</div>

		<div class="one">
			<div class="top">
				<span class="iocn"></span>什么是保险人？
			</div>
			<div class="content">
				<img src="images/gd.jpg" /><br />
				<p>保险人是......</p>
			</div>
		</div>

		<div class="one">
			<div class="top">
				<span class="iocn"></span>什么是投保人？
			</div>
			<div class="content">
				<img src="images/gd.jpg" /><br />
				<p>投保人是......</p>
			</div>
		</div>
	</div>

</body>
</html>

05：当当网我的订单页

<!DOCTYPE html>
<html>
<head>
<title>当当网我的订单页</title>
<script type="text/javascript" src="./js/jquery-1.11.1.js"></script>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
	font-size: 12px;
}

a {
	color: #999;
	text-decoration: none;
}

body {
	background: #fff url(images/bg1.jpg) no-repeat;
}

ul {
	list-style: none;
}

.pos {
	position: absolute;
}

#menu {
	left: 931px;
	top: 5px;
}

#menu li {
	display: block;
	height: 20px;
	line-height: 20px;
	background-color: #fff;
	padding: 4px;
}

#tabs {
	left: 222px;
	top: 237px
}

#tab-top {
	height: 30px;
	line-height: 30px;
	padding-left: 20px;
	border-bottom: 1px solid #15B69A;
}

#tab-top ul li {
	display: block;
	float: left;
	padding: 0px 15px;
	border: 1px solid #C6C5C5;
	border-bottom: 1px solid #15B69A;
	background-color: #F0F0F0;
	margin-right: 10px;
	margin-top: -1px;
	cursor: pointer;
}

#tab-top ul li.on {
	border: 1px solid #15B69A;
	border-top: 2px solid #15B69A;
	border-bottom: none;
	background-color: #F0FCF1;
}
</style>
<script type="text/javascript">
	$(function() {
		$("a").bind({
			mouseover : function() {
				$("#menu-ul").show();
			},
			mouseout : function() {
				$("#menu-ul").hide();
			}
		});
		$("#tab-top ul li").click(function() {
			$(".on").removeClass("on");
			$(this).fadeIn("slow").addClass("on");
			$("div .content").hide();
			$("div .content").eq($(this).index()).show();
		});
	});
</script>
</head>
<body>
	<!-- 下拉菜单 -->
	<div id="menu" class="pos">
		<a href="#">我的当当</a>
		<ul id="menu-ul" style="display:none;">
			<li><a href="#">我的订单</a></li>
			<li><a href="#">我的收藏</a></li>
			<li><a href="#">我的礼品卡</a></li>
			<li><a href="#">我的积分</a></li>
			<li><a href="#">我的余额</a></li>
		</ul>
	</div>

	<!-- tabs -->
	<div id="tabs" class="pos">
		<div id="tab-top">
			<ul>
				<li class="on">我的订单</li>
				<li>我的团购订单</li>
			</ul>
		</div>
		<div class="content">
			<img src="images/order.jpg" />
		</div>
		<div class="content" style="display:none;">
			<img src="images/tuan.jpg" />
		</div>
	</div>
</body>
</html>

倩倩之

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery事件和动画

一：事件1.基础事件： 01.window事件ready（）：要在DOM就绪时执行的函数在DOM加载完成时运行的代码，可以这样写：$(document).ready(function(){ // 在这里写你的代码...});使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。jQ
复制链接

扫一扫