1. CSS style manipulation
- addClass() add style
- removeClass() remove style
- toggleClass() delete it if it has it, add a style if it doesn't. which is,Reverse election
- offset() Get and set the coordinates of the element. Get the coordinates of the upper left corner : top and left attributes.
<!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>
Page display effect:
Function realization:
<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>