html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="4.css" type="text/css" />
<script language="JavaScript" src="index.js" charset="UTF-8"></script>
<script language="JavaScript" src="jquery.js" charset="UTF-8"></script>
</head>
<body>
<div id="container">
<h2>Abraham Lincoln‘s Gettysburg Address</h2>
<div id="switcher">
<div class="label">Text Size</div>
<button id="switcher-default">Default</button>
<button id="switcher-large">Bigger</button>
<button id="switcher-small">Smaller</button>
</div>
<div class="speech">
<p>Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.</p>
<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting-place for those who here gave their lives that the nation might live. It is altogether fitting and proper that we should do this. But, in a larger sense, we cannot dedicate, we cannot consecrate, we cannot hallow, this ground.</p>
<a href="#" class="more">read more</a>
<p>The brave men, living and dead, who struggled here have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember, what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced.</p>
<p>It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom and that government of the people, by the people, for the people, shall not perish from the earth.</p>
</div>
</div>
</body>
</html>
css
html, body { margin: 0; padding: 0; }
body { font: 62.5% Verdana, Helvetica, Arial, sans-serif; color: #000; background: #fff; } #container { font-size: 1.2em; margin: 10px 2em; }
h1 { font-size: 2.5em; margin-bottom: 0; }
h2 { font-size: 1.3em; margin-bottom: .5em; } h3 { font-size: 1.1em; margin-bottom: 0; }
code { font-size: 1.2em; }
a { color: #06581f; }
/*************************************** Chapter Styles ************************************** */
#switcher { width: 300px; padding: .5em; border: 1px solid #777; } .label { width: 130px; margin: .5em 0; cursor: pointer; }
jq/js
$(document).ready(function(){ $(‘#switcher-large‘).click(function(){ alert(‘OK‘) }) });
//修改内联css:首先在单独样式表里面定义好样式，然后再通过jq来添加或者删除这些类 //jq提供了一个方法.css():获取匹配元素集合中的第一个元素的样式属性的计算值 或 设置每个匹
配元素的一个或多个CSS属性。 //.css()语法 //取得单个元素.css(objattribute) //取得多个.css([‘obj1‘,‘obj2‘])返回{‘obj1‘:‘obj1.1‘,‘obj2‘:‘obj2.2‘} //.css()可能接受2种参数，单个属性及其值.css(‘obj1‘,‘obj1.1‘) //.css()键值对.css({obj1:‘obj1.1‘,‘obj2‘:‘obj2.2‘}) //.css()方式与使用.addClass()方式一样不 //设置计算样式属性值 //div.speech可以获取当前字体大小，如下 //$(document).ready(function(){ // var $speech=$(‘div.speech‘); // $(‘#switcher-large‘).click(function(){ // var num=parseFloat($speech.css(‘fontSize‘))//获取小数部分信息 // num*=1.4; // $speech.css(‘fontSize‘,num+‘px‘); // }) //}); //注意：parseFloat()函数会在一个字符串中从左到右查找一个浮点（十进制）数 //对字体进行缩小方式是num/=1.4 $(document).ready(function(){ var $speech=$(‘div.speech‘); var num=parseFloat($speech.css(‘fontSize‘)); if(this.id==‘switcher-large‘){ num*=1.4; //这边的this引用的dom元素id属性，如果只需要测试属性值，this比创建jq对象更有效 }else if(this.id==‘switcher-small‘){ num/=1.4 } $speech.css(‘fontSize‘,num+‘px‘) });
$(document).ready(function(){ var $speech=$(‘div.speech‘); var num=parseFloat($speech.css(‘fontSize‘)); var defaultSize=$speech.css(‘fontSize‘); $(‘#switcher button‘).click(function(){ var num=parseFloat($speech.css(‘fontSize‘)) switch (this.id){ case ‘switcher-large‘: num*=1.4; break; case ‘switcher-small‘: num/=1.4; break; default : num=parseFloat(defaultSize); } $speech.css(‘fontSize‘,num+‘px‘) }); //这些继续使用this.id的值以改变字体大小，它即不是switcher-large也不是switcher-small,那
么就是默认初始字体大小
}); //带厂商前缀样式属性，使用以下css声明，如下 /* * -webkil-property-name:value * -moz-property-name:value * -ms-property-name:value * property-name:value*/ //如果上面的这些属性需要测试它们在dom是否存在，从propertName到webkitpropertyName再到
mspropertyName都检查，但在jq中 //.css(‘propertyName‘,‘value‘),jq就会依次检查所有前缀的(webkit,o,moz,ms)属性，然后使用第一
个找到那个属性
//隐藏和显示元素 //.hide()和.show()方法不带任何参数 //.hide()方法会将匹配元素集合的内联style属性的display:none //block通常是display的属性之一,inline或者inline-block, //display属性相关知识：https://developer.mozilla.org/en-US/docs/Web/CSS/display //或者https://developer.mozilla.org/samples/cssref/display.html //想隐藏或者显示元素，如下（例子）eq(1).show() $(document).ready(function(){ $(‘p‘).eq(1).hide(); $(‘a.move‘).click(function(e){ e.preventDefault();//避免链接被默认行为 $(‘p‘).eq(1).show(); $(this).hide(); alert(11) }) });
效果和时长
当在.show()或者.hide()中指定时间（或者更准确地说，一个速度）参数时，就会产生动画效果，即效果会在一个特定的时间段发生，如.hide(‘duration‘)方法，会同时减少元素高度，宽度和不透明度，直到这3个属性值都达到0，.show(‘duration‘)方法是从上往下增大元素从左到右增大元素的宽度，从0到1增加元素不透明度，直到内容完全可见
指定显示速度:slow和fast
.show(‘slow‘)会在600毫秒(.6秒),.show(‘falt‘)则是200毫秒(.2秒)，也可以自己输入需要的数值，如.show(850)，与字符串表示速度参数名称不同，数值不需要使用引号，如下代码
$(document).ready(function(){
$(‘p‘).eq(1).hide();
$(‘a.more‘).click(function(e){
e.preventDefault();
$(‘p‘).eq(1).show(‘slow‘);
$(this).hide()
})
});
淡入淡出:.fadeIn(‘slow‘)如果想在显示整个段落时，使用此方法
$(document).ready(function(){
$(‘p‘).eq(1).hide();
$(‘a.more‘).click(function(e){
e.preventDefault();
$(‘p‘).eq(1).fadeIn(‘slow‘);
$(this).hide()
})
});
.fadeOut()它可以逐渐减少不透明度
滑上和滑下
.slideDown(‘slow‘),
.slideUp()
这2个动画方法仅改变元素的高度$(document).ready(function(){ $(‘p‘).eq(1).hide(); $(‘a.more‘).click(function(e){ e.preventDefault(); $(‘p‘).eq(1).slideDown(‘slow‘), $(this).hide() })});切换可见性
$(document).ready(function(){
var $firstPara=$(‘p‘).eq(1);
$firstPara.hide();
$(‘a.more‘).click(function(e){
e.preventDefault();
if($firstPara.is(‘:hidden‘)){
$firstPara.fadeIn(‘slow‘);
$(this).text(‘read less‘);
}
else{
$firstPara.fadeOut(‘slow‘);
$(this).text(‘read more‘)
}})
});
//.toggle()方法也可以，另一个复合方法.slideToggle()该方法通过逐渐添加或者减少高度来显示或
者隐藏元素，如下
$(document).ready(function(){
var $firstPara=$(‘p‘).eq(1);
$firstPara.hide();
$(‘a.more‘).click(function(e){
e.preventDefault();
if($firstPara.is(‘:hidden‘)) {
$firstPara.slideToggle(‘slow‘);
var $link=$(this);
if($link.text()==‘read mode‘){
$link.text(‘read less‘)
}else{
$link.text(‘read more‘)
}
}
})
});
创建自定义动画
.animate()方法：用于创建控制更加精细的自定义动画,2种形式，如下:第1种接收以下4个参数.
<1>:一个包含样式属性及值的对象，与.css()方法类似
<2>:可选的时长参数可以是预置的字符串，也可以是毫秒数值
<3>:可选的缓动(easing)类型：（第11章学习）
<4>:可选的回调函数
例如
.animate({k1:v1,k2:v2},duration(持续)，easing,function(){
return ‘动画‘})
//第2种接受两个参数：一个是属性对象和一个选项对象
如下
.animate({properties},{options})
.animate({k:v1,k2:v2},{duration:v,easing:v,specialEasing:{
p1:easing1,p2:‘easing2‘},complete:function(){return},queue:true,step:callback});
手式创建效果
$(document).ready(function(){
var $firstPara=$(‘p‘).eq(1);
$firstPara.hide();
$(‘a.more‘).click(function(e){
e.preventDefault();
$firstPara.animate({height:‘toggle‘},‘slow‘);
var $link=$(this);
if($link.text()==‘read mode‘){
$link.text(‘read less‘)
}else{
$link.text(‘read more‘)
}
});
});
一次给多个属性添加动画效果
$(document).ready(function(){
var $firstPara=$(‘p‘).eq(1);
$firstPara.hide();
$(‘a.more‘).click(function(e){
e.preventDefault();
$firstPara.animate({
opacity:‘toggle‘,
height:‘toolg‘
},‘slow‘);
var $link=$(this);
if($link.text()==‘read mode‘){
$link.text(‘read less‘)
}else{
$link.text(‘read more‘)
}
});
});
//通过这样的方法，可以将css里面的属性换成.animate()来执行（复杂的动画效果也是可以的，如下
）
$(document).ready(function(){
var $speech=$(‘div.speech‘);
var num=parseFloat($speech.css(‘fontSize‘));
var defaultSize=$speech.css(‘fontSize‘);
$(‘#switcher button‘).click(function(){
var num=parseFloat($speech.css(‘fontSize‘));
switch (this.id){
case ‘switcher-large‘:
num*=1.4;
break;
case ‘switcher-small‘:
num/=1.4;
break;
default :
num=parseFloat(defaultSize);
}
$speech.animate({‘fontSize‘:num+‘px‘},‘slow‘)
});
});
jq中有outWidth()方法可以用于计算宽度，包括内边距及边框宽度，如下
//通过这样的方法，可以将css里面的属性换成.animate()来执行（复杂的动画效果也是可以的，如下
$(document).ready(function(){
$(‘div.lable‘).click(function(){
var paraWidget=$(‘div.speech p‘).outerWidth();
var $switcher=$(this).parent();
var switcherWidget=$switcher.outerWidth();
$switcher.animate({
boredeWidth:‘5px‘,left:paraWidget-switcherWidget,
height:‘+=20px‘
},‘slow‘)
})
});
//boredeWidth给它指定一个常用的值加个单位，和样式表中很类似left是用于计算数值的，它后面的
是可选的，如果不指定，就会默认以px作为单位
//+=操作符表示相对值
//通过css来定位，如下
$(document).ready(function(){
$(‘div.lable‘).click(function(){
var paraWidget=$(‘div.speech p‘).outerWidth();
var $switcher=$(this).parent();
var switcherWidget=$switcher.outerWidth();
$switcher.css({position:"relative‘"}).animate({
boredeWidth:‘5px‘,left:paraWidget-switcherWidget,
height:‘+=20px‘
},‘slow‘)
})
});