jQuery 位置坐标图形大小相关方法
一、定位距离
.offset()
.position()
.offset()
1. 永远参照文档定位
2. 返回一个对象，里面有两个属性left、top，分别记录了获取dom对象 距离整个页面文档 的距离
3. 既可以取值又可以赋值，但是一般我们取值用的比较多
赋值的情况一般常用 .css() 方法比较宽泛点，就像动画用 .animate() 可以解决一切事情
wrapper 和 demo 两个元素都是绝对定位，获取的 left 是 wrapper 父元素 left:100 像素 + demo 元素left: 50 像素的 150
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>offset()</title>
<style>
.wrapper{
position:absolute; /* 绝对定位 */
width:300px;
height:300px;
background-color: cyan;
left:100px;
top:100px;
}
.wrapper .demo{
position:absolute; /* 绝对定位 */
width:50px;
height:50px;
background-color: brown;
left:50px;
top:50px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="demo"></div>
</div>
<script>
console.log($('.demo').offset()); // {top: 150, left: 150}
</script>
</body>
</html>原生 dom.offsetParent 获取的是相对有定位的父级，
留了一个作业返回距离文档的距离，要一层一层的循环往外算
如果不设置父级 wrapper 绝对定位，获取 demo 距离文档是 50 像素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>offset()</title>
<style>
.wrapper{
/* position:absolute; 不设置绝对定位 */
width:300px;
height:300px;
background-color: cyan;
left:100px;
top:100px;
}
.wrapper .demo{
position:absolute; /* 绝对定位 */
width:50px;
height:50px;
background-color: brown;
left:50px;
top:50px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="demo"></div>
</div>
<script>
console.log($('.demo').offset()); // {top: 50, left: 50}
</script>
</body>
</html>赋值传一个对象，用 css 方法也是一样的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>offset()赋值</title>
<style>
.wrapper{
/* position:absolute; 不设置绝对定位 */
width:300px;
height:300px;
background-color: cyan;
left:100px;
top:100px;
}
.wrapper .demo{
position:absolute; /* 绝对定位 */
width:50px;
height:50px;
background-color: brown;
left:50px;
top:50px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="demo"></div>
</div>
<script>
$('.demo').offset({left:100,top:100});
</script>
</body>
</html>在行间显示 100px
<div>
<div style="position: relative; top: 100px; left: 100px;"></div>
</div>
offset() 只考虑当前元素距离文档绝对的距离，不会考虑父级有没有定位，
即使父级有定位（包括父级的父级都有定位），它依然考虑的是距离文档的距离是多少，这是和原生 js 的一个区别。
.position()
1. 返回的有点像原生的 offsetLeft 和 offsetTop
2. 跟 css 定位规则查不多，相对有定位的父级
3. 它不能赋值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>position()</title>
<style>
.wrapper{
position:absolute; /* 绝对定位 */
width:300px;
height:300px;
background-color: cyan;
left:100px;
top:100px;
}
.wrapper .demo{
position:absolute; /* 绝对定位 */
width:50px;
height:50px;
background-color: brown;
left:50px;
top:50px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="demo"></div>
</div>
<script>
console.log($('.demo').position()); // {top: 50, left: 50}
</script>
</body>
</html>把父级定位属性取消，获取的是相对文档定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>position()</title>
<style>
.wrapper{
/* position:absolute; */
width:300px;
height:300px;
background-color: cyan;
left:100px;
top:100px;
}
.wrapper .demo{
position:absolute; /* 绝对定位 */
width:50px;
height:50px;
background-color: brown;
left:50px;
top:50px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="demo"></div>
</div>
<script>
console.log($('.demo').position()); // {top: 50, left: 50}
</script>
</body>
</html>二、滚动条距离
.scrollTop()
.scrollLeft()
获取页面的滚动距离，用 $() 把 window 包一下，然后通过 .scrollTop() 获取文档的滚动条距离
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>获取滚动距离</title>
<style>
body{
width: 3000px;
height:3000px;
}
</style>
</head>
<body>
<script>
window.onscroll = function(){
console.log($(window).scrollTop(), $(window).scrollLeft());
}
</script>
</body>
</html>赋值也是可以的，注意一点传数值不能是字符串
$(window).scrollTop(100); $(window).scrollLeft(200);
选中父级 div 元素，获取父级 div 元素滚动条的距离
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>元素滚动条距离</title>
<style>
.test{
width:200px;
height: 200px;
border: 3px solid #008;
overflow:auto; /* 父级设置overflow:auto */
}
.test p{
width:3000px;
height: 3000px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="test">
<p></p>
</div>
<script>
$('.test').eq(0).scroll(function(){
console.log(
$(this).scrollTop(),
$(this).scrollLeft()
);
});
</script>
</body>
</html>结合 ajax 做一些页面滚动加载的时候，需要判断滚动条的距离
三、获取盒模型不同区域的宽高
这些基本都是取值，没有赋值的功能，返回的是数值
获取内容盒 content
.width()
.height()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>获取盒模型</title>
<style>
.demo{
width:100px;
height:100px;
border:10px solid rgba(0, 0, 0, .3);
padding:20px;
margin:5px;
}
</style>
</head>
<body>
<div class="demo"></div>
<script>
// 通过css方法获取返回的是"字符串"
console.log($('.demo').css('width')); // 100px
console.log($('.demo').css('padding')); // 20px
// 获取内容盒 content
console.log( $('.demo').width() ); // 100
console.log( $('.demo').height() ); // 100
</script>
</body>
</html>获取填充盒 content + padding
.innerWidth()
.innerHeight()
console.log($('.demo').innerWidth()); // 140
console.log($('.demo').innerHeight()); // 140获取边框盒 content + padding + border，可以传参数 true
.outerWidth()
.outerHeight()
console.log( $('.demo').outerWidth()); // 160
console.log( $('.demo').outerHeight()); // 160传参数 true，获取 content + padding + border + margin
console.log($('.demo').outerWidth(true)); // 170
console.log($('.demo').outerHeight(true)); // 170四、遍历索引相关方法（以及补充）
.each()
已经知道 jQuery 核心的精髓，是使用方法的时候内部会内置一些循环，
比如在进行多次链式调用的时候，可能每个方法都有循环，
如果能把循环叠加到一起的话，能把代码的效率高一些
给每个 li 身上加类名，同时再 li 里面加一些文字
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$('li').text(function(index, ele){
return 'item-' + index; // 加文字
}).addClass(function(index, ele){
return 'demo' + index; // 加类名
});
</script>通过 text() 和 addClass() 方法确实达成了效果，但传递了两个回调函数循环了两次，
函数在执行的时候会创建了作用域，这是比较消耗算力的方式，可以用 .each() 方法，each 是每一个的意思
然后通过 .each()方式传一个函数，函数有两个参数，把前面选中的集合，拿到函数里执行，一次循环就可以了，执行效率提高了
$('li').each(function(index, ele){
$(ele)
.text('item-' + index)
.addClass('demo' + index);
});.children()
补充一个方法，该方法获取所有的子元素，包括 span 元素和 p 元素，用 .each() 方法做一个操作
<div>
<span></span>
<p></p>
<span></span>
<p></p>
<span></span>
<p></p>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$('div').children().each(function(index, ele){
if(ele.nodeName == 'SPAN'){ // 这里用到原生js上的属性nodeName
$(ele).text('span-' + index);
}else{
$(ele).text('p-' + index);
}
});
</script>.index()
获取一个标签在兄弟元素节点中索引的值
以前通过闭包的方式获取li对应的索引值，下面通过 jQuery 封装好的 index() 方法获取
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$('ul').on('click', 'li', function(e){
console.log($(e.target).index()); // 把e.target包装成jQuery对象，在使用index()方法
});
</script>index() 的参数
1. 可以传 jQuery 对象
2. 或原生的 element
传参数起到过滤筛选的作用
1. $('div span') 前面获取的是一堆 span
2. .index( $('div span').eq(1) ) 后面参数传的是具体第二个 span
<div>
<span>span</span>
<p>p</p>
<span>span</span>
<p>p</p>
<span>span</span>
<p>p</p>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
console.log($('div span').index( $('div span').eq(1) )); // 1
</script>$('div span') 前面或的是 span 的集合，
.index($(e.target)) 后面只显示 span 元素的索引
$('div').children().on('click',function(e){
console.log($('div span').index($(e.target)));
});点击 p 元素找不到返回 -1
写轮播图的时候，获取小圆点的时候很方便