样式class的操作及实例

css样式：

<textarea cols="50" rows="15" name="code" 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;} </textarea>

javascript代码：

<textarea cols="50" rows="15" name="code" class="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 &lt;= 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 &lt;= 0) { $(this).val("请输入搜索内容").addClass("grayfont"); } }); $("body *").click(function () {//聚焦所有控件的单击事件 $(this).addClass("yellowt").siblings().removeClass("yellowt"); }); }); </textarea>

网页代码：

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