您的位置：首页 > Web前端 > JQuery

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

2015-03-04 14:58 771 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航