jquery对象模型

来源：互联网发布：防网络诈骗编辑：程序博客网时间：2024/06/06 04:48

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.father{
margin-left: 200px;
margin-top: 100px;
position: relative;
width: 400px;
height: 400px;
background-color: yellow;
}
.son{
width: 100px;
height: 100px;
position: absolute;
left: 50px;
top: 100px;
background-color: gray;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<script src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
//CSS() 设置或者获取css样式
$('div').css({'color':'red'});
//获取样式
var myColor= $('div').css('color');
console.log(myColor);
//宽高 width height
console.log($('div').width());
console.log($('div').height());
//获取距离文档边缘的偏移量 offset()
var left=$('div').offset().left;
console.log(left);
var Top=$('div').offset().top;
console.log(Top);
//*距离相对定位父级的偏移量 position(); 距离父元素边缘的距离前提是子元素相对于父元素定位;
var leftNum= $('.son').position().left;
console.log(leftNum);
//返回最近的定位的祖先元素
var myElement=$('.son').offsetParent();
console.log(myElement);
</script>

</html>

阅读全文

0 0