jQuery-事件委托案例练习
这是一个按钮控制文字大小的案例，使用了事件委托机制。
<!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>