基本操作
- addClass() 添加样式
- removeClass() 删除样式
- toggleClas() 有就删除,没有就添加样式。
- offset() 获取和设置元素的坐标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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="../jQuery包/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $divEle = $('div:first');
$('#btn01').click(function(){
$divEle.addClass("redDiv blueBorder")
});
$('#btn02').click( function(){
$divEle.removeClass("redDiv blueBorder")
});
$('#btn03').click( function(){
$divEle.toggleClass("redDiv")
});
$('#btn04').click(function() {
var pos = $divEle.offset();
console.log(pos);
$divEle.offset({
top:100,
left:50
})
});
})
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<div class="border">
</div>
</td>
<td>
<div class="btn">
<input type="button" value="addClass()" id="btn01"/>
<input type="button" value="removeClass()" id="btn02"/>
<input type="button" value="toggleClass()" id="btn03"/>
<input type="button" value="offset()" id="btn04"/>
</div>
</td>
</tr>
</table>
</body>
</html>