<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <mce:script type="text/javascript" src="lib/jquery/jquery-1.3.2.js" mce_src="lib/jquery/jquery-1.3.2.js"></mce:script> <title>JQuery的应用第一章</title> <mce:style type="text/css"><!-- .button{ display:inline; width:200px; height:20px; } .show{ width:400px; background-color:red; } .normal{ font-size:12px; } .large{ font-size:20px; } --></mce:style><style type="text/css" mce_bogus="1"> .button{ display:inline; width:200px; height:20px; } .show{ width:400px; background-color:red; } .normal{ font-size:12px; } .large{ font-size:20px; } </style> <mce:script type="text/javascript"><!-- $('document').ready(function(){ $('#normal').click(function(){ $('#textshow').removeClass('large'); $('#textshow').addClass('normal'); }); $('#large').click(function(){ $('#textshow').removeClass('normal'); $('#textshow').addClass('large'); }) }) // --></mce:script> </head> <body> <span class="button" id="normal">[<a href="javascript:void(0)" mce_href="javascript:void(0)">小</a>]</span><span class="button" id="large">[<a href="javascript:void(0)" mce_href="javascript:void(0)">大</a>]</span> <div id="textshow" class="show"> 这是JQuery的应用,改变文字的大小,注意下,文字大小是否改变了.<br/> 这是很多小说网中实用的工具.应用JQuery的ready()函数绑定事件.<br/> $('#textshow')返回id为textshow的Dom实例.<br/> addClass()添加样式.removeClass()移出样式. </div> </body> </html>