样式class的操作及实例

css样式：

.bigfont{ font-size:30px;color:#f00;} .normal{ font-size:20px; color:#000;} .newstyle{ line-height:50px; font-style:italic;} .night{ background-color:#000;} .graybody{ filter:gray;} .yellowt{ background-color:#ff0;} .whitet{ background-color:#fff;} .redbg{ background-color:#f00;} .grayfont{ color:Gray;}

javascript代码：

$(function () { $("#getclass").click(function () {//替换成新样式 alert("当前应用的样式是：" + $("p").attr("class")); $("p").attr("class", "normal"); alert("尔后应用的样式是：" + $("p").attr("class")); }); $("#addclass").click(function () {//增加新样式 $("p").addClass("newstyle"); }); $("#removeclass").click(function () {//移除样式 $("p").removeClass("newstyle"); //$("p").removeClass("bigfont newstyle");删除多层样式 //$("p").removeClass();彻底删除此属性型方法 }); $("#hasclass").click(function () {//判断是否应用了bigfont样式 var isit = $("p").hasClass("bigfont");//返回true alert(isit); }); $("#daynight").click(function () {//背景的开关灯效果 if ($("#daynight").val() == "关灯") { $(document.body).toggleClass("night"); $("#daynight").val("开灯"); } else { $(document.body).toggleClass("night"); $("#daynight").val("关灯"); } }); $("#grayit").click(function () {//切换网页彩色和黑白 $(document.body).toggleClass("graybody"); }); $("#nets tr").click(function () {//点击的行背景变黄，其它的为白色背景 //$(this).attr("class", "yellowt").siblings().attr("class", "whitet"); $(this).addClass("yellowt").siblings().removeClass("yellowt"); }); $("#txts input[type=text]").blur(function () { //聚焦控件的高亮显示 if ($(this).val().length <= 0) { $(this).attr("class", "redbg"); } else { $(this).attr("class", "whitet"); } }); $("#search").val("请输入搜索内容").addClass("grayfont").focus(function () { //聚焦搜索框效果 if ($(this).val() == "请输入搜索内容") { $(this).val("").removeClass("grayfont"); } }).blur(function () { if ($(this).val().length <= 0) { $(this).val("请输入搜索内容").addClass("grayfont"); } }); $("body *").click(function () {//聚焦所有控件的单击事件 $(this).addClass("yellowt").siblings().removeClass("yellowt"); }); });

网页代码：

<p class="bigfont">鉴于惠普、戴尔、三星和东芝等PC厂商均推出了自己的平板产品，甚至连摩托罗拉和RIM也跃跃欲试，联想做出这样的决定似乎令人费解。目前，联想是惟一一家对平板电脑持谨慎态度的主要PC制造商。</p> <p><img src="images/1.jpg" /></p> <table id="nets"><tr><td>中国质量网</td><td>chinatt315.org.cn</td></tr><tr><td>新浪网</td><td>sina.com.cn</td></tr><tr><td>中国经济网</td><td>ce.cn</td></tr></table> <input type="button" value="获取样式并应用新样式" id="getclass" /> <input type="button" value="增加新样式" id="addclass" /> <input type="button" value="移除样式" id="removeclass" /> <input type="button" value="是否拥有bigfont样式" id="hasclass" /> <input type="button" value="关灯" id="daynight" /> <input type="button" value="网页变脸" id="grayit" /><br /> <div id="txts"><input type="text" /><input type="text" /><input type="text" /><input type="text" /><input type="text" /></div><br /> <input type="text" id="search" />