1. CSS样式操作
- addClass() 添加样式
- removeClass() 删除样式
- toggleClass() 有就删除,没有就添加样式。 即,反选
- offset() 获取和设置元素的坐标。 获取左上角的坐标:top、left两个属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-02-01</title>
<style type="text/css">
div{
width:100px;
height:260px;
}
div.whiteborder{
border: 2px white solid;
}
div.redDiv{
background-color: red;
}
div.blueBorder{
border: 5px blue solid;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
1. addClass() - 向被选元素添加一个或多个类
2. removeClass() - 从被选元素删除一个或多个类
3. toggleClass() - 对被选元素进行添加/删除类的切换操作
4. offset() - 返回第一个匹配元素相对于文档的位置。
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<div>我是测试区,测试样式</div>
</td>
<td>
<div>
<input type="button" value="addClass()" id="btn1"/>
<input type="button" value="removeClass()" id="btn2"/>
<input type="button" value="toggleClass()" id="btn3"/>
<input type="button" value="offset()" id="btn4"/>
</div>
</td>
</tr>
</table>
</body>
</html>
页面显示效果:
功能实现:
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
var $div= $("div:first"); //找到待操作的div元素
//1. addClass() - 向被选元素添加一个或多个类
//给按钮1绑定单击事件
$("#btn1").click(function () {
$div.addClass("redDiv blueBorder");
});
//2. removeClass() - 从被选元素删除一个或多个类
//给按钮2绑定单击事件
$("#btn2").click(function () {
$div.removeClass("blueBorder"); //删除选中的css样式
$div.removeClass(); //默认,全删
});
//3. toggleClass() - 对被选元素进行添加/删除类的切换操作
$('#btn3').click(function(){
$div.toggleClass('redDiv'); //已存在就删除;不存在就添加
});
//4. offset() - 返回第一个匹配元素相对于文档的位置。
$('#btn4').click(function() {
var pos = $div.offset();
alert(pos.top); alert(pos.left);
输出原有的位置信息,设置新的位置
$div.offset({
top:200,
left:500
});
});
});
</script>