jquery的样式操作Css Class(addClass,removeClass,toggleClass)

来源：互联网发布：php 面试编辑：程序博客网时间：2024/05/16 15:19

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>03_select</title><meta name="author" content="Administrator" /><style type="text/css">.addBg {background:#f00;color:#fff;}.bigger {font-size:20px;}</style><script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript">$(function() {//添加一个样式，removeClass是移除一个样式$("thead tr").addClass("addBg").addClass("bigger").removeClass("addBg");//判读是否存在某个样式alert($("thead tr").hasClass("bigger"));/* * 为tr添加了两个事件，鼠标移上去和鼠标移走事件，当移上去的时候，添加样式，移走的删除样式 * 为了相对简单实现第一次做某个操作，第二个事件作某个操作这样的功能，JQuery提供 * toggleClass()-->这个方法指的是判断是否有这个类，如果有就删除，如果没有就添加 *//*("tbody tr").mouseover(function(){$(this).addClass("addBg");}).mouseout(function(){$(this).removeClass("addBg");});*/$("tbody tr").mouseover(changeBg).mouseout(changeBg);});function changeBg() {$(this).toggleClass("addBg");}</script></head><body><table width="700" border="1" align="center" id="users"><thead><tr><td title="id">用户标识</td><td title="username">用户姓名</td><td title="age">用户年龄</td><td title="password">用户密码</td><td title="address">地址</td><td>操作</td></tr></thead><tbody><tr id="abc"><td>1</td><td>张三</td><td>23</td><td>abc123</td><td>昭通</td><td>添加  删除</td></tr><tr><td>2</td><td>李四</td><td>33</td><td>abc123</td><td>昭通</td><td>添加  删除</td></tr><tr><td>3</td><td>王五</td><td>13</td><td>abc123</td><td>昭通</td><td>添加  删除</td></tr><tr><td>4</td><td>赵六</td><td>45</td><td>abc123</td><td>卡努曼</td><td>添加  删除</td></tr><tr><td>5</td><td>朱琪</td><td>21</td><td>abc123</td><td>昭通</td><td>添加  删除</td></tr></tbody></table></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>03_select</title><meta name="author" content="Administrator" /><style type="text/css">.addBg {background:#f00;color:#fff;}.bigger {font-size:20px;}</style><script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript">$(function() {//JQuery通过css来指定样式，甚至完美支持opacity透明度$("#d1").css("height",90+"px").css("width",90+"px").css("background","#00f").css("color","#fff").css("opacity","0.6").height(100).width(100).click(function(){//JQuery提供了一些非常常用的方法来处理常用样式,width,height$(this).width($(this).width()+20).height($(this).height()+20);});});</script></head><body><div id="d1">点击一下</div></body></html>

0 0