change(fn)
在每一个匹配元素的change事件中绑定一个处理函数。
change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>豪情</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><style>
p{line-height:23px;margin:0;padding:0;}
</style>
<script>
$(function(){
$('#fontsize').change(function(){
var size = $('#fontsize').val();
$('p').css('font-size', size);
});
$('#backgoundcolor').change(function(){
var bgc = $('#backgoundcolor').val();
$('p').css('background', bgc);
});
$('#fontcolor').change(function(){
var fontcolor = $('#fontcolor').val();
$('p').css('color', fontcolor);
});
});
</script></head>
<body>
<div>
<label for="fontsize">字体大小</label>
<select name="" id="fontsize">
<option value="12px">小号</option>
<option value="14px">较小</option>
<option value="16px" >中号</option>
<option value="18px">较大</option>
<option value="24px">大号</option>
</select>
<label for="backgoundcolor">背景颜色</label>
<select name="" id="backgoundcolor">
<option value="#F4FBFF">默认</option>
<option value="gray">淡灰</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="yellow">明黄</option>
</select>
<label for="fontcolor">字体颜色</label>
<select id="fontcolor">
<option value="#000">黑色</option>
<option value="#f00">红色</option>
<option value="#060">绿色</option>
<option value="#00f">蓝色</option>
<option value="#600">棕色</option>
</select>
<label>
</div>
<h4>春江花月夜</h4>
<p>春江潮水连海平,海上明月共潮生。滟滟随波千万里,何处春江无月明。</p>
<p>江流宛转绕芳甸,月照花林皆似霰。空里流霜不觉飞,汀上白沙看不见。</p>
<p>江天一色无纤尘,皎皎空中孤月轮。江畔何人初见月?江月何年初照人?</p>
<p>人生代代无穷已,江月年年只相似。不知江月待何人,但见长江送流水。</p>
<p>白云一片去悠悠,青枫浦上不胜愁。谁家今夜扁舟子?何处相思明月楼?</p>
<p>可怜楼上月徘徊,应照离人妆镜台。玉户帘中卷不去,捣衣砧上拂还来。</p>
<p>此时相望不相闻,愿逐月华流照君。鸿雁长飞光不度,鱼龙潜跃水成文。</p>
<p>昨夜闲潭梦落花,可怜春半不还家。江水流春去欲尽,江潭落月复西斜。</p>
<p>斜月沉沉藏海雾,碣石潇湘无限路。不知乘月几人归,落月摇情满江树。</p>
</body>
</html>
运行代码