jQuery-事件委托案例练习

最新推荐文章于 2022-11-20 23:42:24 发布

柒青衿

最新推荐文章于 2022-11-20 23:42:24 发布

阅读量672

点赞数

分类专栏： jQuery JavaScript 文章标签： jQuery 事件委托

本文链接：https://blog.csdn.net/qiqingjin/article/details/50483858

版权

JavaScript 同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

jQuery

8 篇文章 1 订阅

订阅专栏

这是一个按钮控制文字大小的案例，使用了事件委托机制。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery Button and Animate</title>
	<script language="javascript" type="text/javascript" src="jquery-2.1.4.js"></script>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.maindiv{
			font-family: "Microsoft YaHei", "微软雅黑";
			width:600px;
			margin:0 auto;
			color: #313128;
			/*color:red;*/
			background-color: #E6E6E6;
			padding:30px;

		}
		a{
			text-decoration:none;
		}
		p{
			font-size: 14px;
			line-height: 25px;
			/*color:red;*/
		}
		.contrldiv{
			background-color: #F1F1F1;
			position: absolute;
			right:0;
			width:290px;
			height:50px;
			/*display: none;*/
		}
		.contrldiv input{
			margin-left:11px;
			margin-top:7px;
		}
		.blue{
			margin-left: 10px;
			color: #d9eef7;
			border: solid 1px #63AEFF;
			background: #0095cd;
			width:80px;
			height:30px;
			background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
			background: -moz-linear-gradient(top, #00adee, #0078a5);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
		}
		.blue:hover {
			background: #007ead;
			background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
			background: -moz-linear-gradient(top, #0095cc, #00678e);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
		}
		.blue:active {
			color: #80bed6;
			background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
			background: -moz-linear-gradient(top, #0078a5, #00adee);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
		} 

		
	</style>
</head>
<body>

	<div class="contrldiv" id="contrldiv">
		<input type="button" class="blue" value="bigger" id="big">
		<input type="button" class="blue" value="smaller" id="sml">
		<input type="button" class="blue" value="normal" id="nml">
	</div>
	<div class="maindiv" id="maindiv">
		<h1>United Foundation to Advance the Open Web by Serving Developers</h1>
		<p>The jQuery Foundation and Dojo Foundation today announce plans to combine forces to form the largest, most diverse and most comprehensive Foundation committed to building the Open Web by serving developers, their projects and their communities.</p><a href="#">read more</a>
		<p>“This merger elevates Web accessibility, openness and developer education, and will advance the Open Web and improve the developer experience significantly,” said Kris Borchers, jQuery Foundation Executive Director. “Every Open Source project needs community, governance and technical resources to succeed. By joining forces, we make growing community easier, we streamline and simplify processes and we offer unrivaled resources to projects and developers alike.”</p>
		<p>“The Dojo Foundation project leads and I are all very excited to be joining up with the jQuery Foundation,” said the Dojo Foundation President Dylan Schiemann, who will join the jQuery Foundation board with the merger. “We share a common mission, purpose and approach, and our combined ability to serve the needs of the JavaScript development community is going to take the Open Web to new heights.”</p>
	</div>
	<!-- control font style -->
	<script>
		$(
			function(){

				var paraobjs=$('.maindiv p');
				var defaultsize=paraobjs.css('fontSize');

				$('div.maindiv p').eq(1).css({display:'none',position:'relative'}).next().css({display:'none',position:'relative'});
				
				$('.contrldiv').on('click',function(event){
					var targetobj=event.target;
					if(targetobj!=this){
						var newsize=parseFloat(paraobjs.css('fontSize'));
						if(targetobj.id=='sml'){
							newsize=newsize*0.8;
						}else if(targetobj.id=='big'){
							newsize=newsize*1.2;
						}else if(targetobj.id=='nml'){
							newsize=parseFloat(defaultsize);
						}
						paraobjs.css('fontSize', newsize +'px');
						// window.alert(newsize);
					}else{
						$(this).css('display','none');
					}
					event.stopPropagation();
				});
				$('.contrldiv').hover(function(){
					$(this).css('backgroundColor','#D8E6F2');
				},function(){
					$(this).css('backgroundColor','#F1F1F1');
				});
				$('body').click(function(){
					$('.contrldiv').css('display','block');
				});

				$('.maindiv a').click(function(event){
					if($(event.target).text()=='read more'){
						event.preventDefault();
						$('div.maindiv p').eq(1).fadeTo('slow', 1, function() {
							$(event.target).animate({top:5},{duration:'slow',queue:true});
						}).next().fadeTo('slow', 1, function() {
							$(event.target).animate({top:10},{duration:'slow',queue:true});
						});
						event.stopPropagation();
						$(event.target).hide();
						if($('.maindiv a').eq(1).text()=="read less"){
							$('.maindiv a').eq(1).fadeIn('slow');
							window.alert("a new link");
						}else{
							$('.maindiv').append("<br/><a href='#'>read less</a>");
						}

					}else{
						event.preventDefault();
						window.alert($('div.maindiv p').eq(1));
						$('div.maindiv p').eq(1).fadeTo('slow', 0) 
							.next().fadeTo('slow', 0);
						event.stopPropagation();
					}
					

				});



			});
	</script>
</body>
</html>

柒青衿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-事件委托案例练习

这是一个按钮控制文字大小的案例，使用了事件委托机制。 jQuery Button and Animate *{ margin:0; padding:0; } .maindiv{ font-family: "Microsoft YaHei", "微软雅黑"; width:600px; margin:0 auto; color: #
复制链接

扫一扫

专栏目录