Go to comments

jQuery 位置坐标图形大小相关方法

一、定位距离

.offset()

.position()

.offset()

offset()永远参照文档定位

1). 返回一个对象，里面有两个属性left、top，

     分别记录了获取dom对象 距离整个页面文档 的距离

2). 既可以取值又可以赋值，但是一般我们取值用的比较多

     赋值的情况一般常用.css()方法比较宽泛点，就像动画用.animate()可以解决一切事情


wrapper和demo两个元素都是绝对定位，获取的left是wrapper父元素left:100像素 + demo元素left:50像素的150

view sourceprint?
01<!DOCTYPE html>
02<html lang="zh-cn">
03<head>
04<meta charset="UTF-8">
05 
06<title>offset()</title>
07<style>
08    .wrapper{
09        position:absolute; /* 绝对定位 */
10        width:300px;
11        height:300px;
12        background-color: cyan;
13        left:100px;
14        top:100px;
15    }
16 
17    .wrapper .demo{
18        position:absolute; /* 绝对定位 */
19        width:50px;
20        height:50px;
21        background-color: brown;
22        left:50px;
23        top:50px;
24    }
25</style>
26</head>
27<body>
28 
29    <div class="wrapper">
30        <div class="demo"></div>
31    </div>
32 
33    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
34    <script>
35 
36        console.log($('.demo').offset()); // {top: 150, left: 150}
37 
38    </script>
39 
40</body>
41</html>

原生dom.offsetParent获取的是相对有定位的父级，

留了一个作业返回距离文档的距离，要一层一层的循环往外算


如果不设置父级wrapper绝对定位，获取demo距离文档是50像素

view sourceprint?
01<!DOCTYPE html>
02<html>
03<head>
04<meta charset="UTF-8">
05<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
06<title>offset()</title>
07<style>
08    .wrapper{
09        /* position:absolute; 不设置绝对定位 */
10        width:300px;
11        height:300px;
12        background-color: cyan;
13        left:100px;
14        top:100px;
15    }
16    .wrapper .demo{
17        position:absolute; /* 绝对定位 */
18        width:50px;
19        height:50px;
20        background-color: brown;
21        left:50px;
22        top:50px;
23    }
24</style>
25</head>
26<body>
27 
28    <div class="wrapper">
29        <div class="demo"></div>
30    </div>
31 
32    <script>
33 
34        console.log($('.demo').offset()); // {top: 50, left: 50}
35 
36    </script>
37 
38</body>
39</html>


赋值传一个对象，用css方法也是一样的

view sourceprint?
01<!DOCTYPE html>
02<html>
03<head>
04<meta charset="UTF-8">
05<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
06<title>offset()赋值</title>
07<style>
08    .wrapper{
09        /* position:absolute; 不设置绝对定位 */
10        width:300px;
11        height:300px;
12        background-color: cyan;
13        left:100px;
14        top:100px;
15    }
16    .wrapper .demo{
17        position:absolute; /* 绝对定位 */
18        width:50px;
19        height:50px;
20        background-color: brown;
21        left:50px;
22        top:50px;
23    }
24</style>
25</head>
26<body>
27 
28    <div class="wrapper">
29        <div class="demo"></div>
30    </div>
31 
32    <script>
33 
34        $('.demo').offset({left:100,top:100});
35         
36        // 在行间显示100px
37        // <div>
38        //     <div style="position: relative; top: 100px; left: 100px;"></div>
39        // </div>
40 
41    </script>
42 
43</body>
44</html>


offset()只考虑当前元素距离文档绝对的距离，不会考虑父级有没有定位，

即使父级有定位（包括父级的父级都有定位），它依然考虑的是距离文档的距离是多少，这是和原生JS的一个区别。

.position()

1). position()返回的有点像原生的offsetLeft和offsetTop

2). position()跟css定位规则查不多，相对有定位的父级

3). postiton()不能赋值

view sourceprint?
01<!DOCTYPE html>
02<html lang="zh-cn">
03<head>
04<meta charset="UTF-8">
05<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
06<title>position()</title>
07<style>
08    .wrapper{
09        position:absolute; /* 绝对定位 */
10        width:300px;
11        height:300px;
12        background-color: cyan;
13        left:100px;
14        top:100px;
15    }
16    .wrapper .demo{
17        position:absolute; /* 绝对定位 */
18        width:50px;
19        height:50px;
20        background-color: brown;
21        left:50px;
22        top:50px;
23    }
24</style>
25</head>
26<body>
27 
28    <div class="wrapper">
29        <div class="demo"></div>
30    </div>
31 
32    <script>
33 
34        console.log($('.demo').position()); // {top: 50, left: 50}
35 
36    </script>
37 
38</body>
39</html>


把父级定位属性取消，获取的是相对文档定位

view sourceprint?
01<!DOCTYPE html>
02<html lang="zh-cn">
03<head>
04<meta charset="UTF-8">
05<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
06<title>position()</title>
07<style>
08    .wrapper{
09        /* position:absolute;  */
10        width:300px;
11        height:300px;
12        background-color: cyan;
13        left:100px;
14        top:100px;
15    }
16    .wrapper .demo{
17        position:absolute; /* 绝对定位 */
18        width:50px;
19        height:50px;
20        background-color: brown;
21        left:50px;
22        top:50px;
23    }
24</style>
25</head>
26<body>
27 
28    <div class="wrapper">
29        <div class="demo"></div>
30    </div>
31     
32    <script>
33     
34        console.log($('.demo').position()); // {top: 50, left: 50}
35     
36    </script>
37 
38</body>
39</html>

二、滚动条距离

.scrollTop()

.scrollLeft()


获取页面的滚动距离，用$()把window包一下，然后通过.scrollTop()获取文档的滚动条距离

view sourceprint?
01<!DOCTYPE html>
02<html lang="zh-cn">
03<head>
04<meta charset="UTF-8">
05<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
06<title>获取滚动距离</title>
07<style>
08    body{
09        width: 3000px;
10        height:3000px;
11    }
12</style>
13</head>
14<body>
15 
16    <script>
17     
18     
19        window.onscroll = function(){
20         
21            console.log($(window).scrollTop(), $(window).scrollLeft());
22         
23        }
24     
25    </script>
26 
27</body>
28</html>


赋值也是可以的，注意一点传数值不能是字符串

view sourceprint?
1$(window).scrollTop(100);
2 
3$(window).scrollLeft(200);


选中父级div元素，获取父级div元素滚动条的距离

view sourceprint?
01<!DOCTYPE html>
02<html>
03<head>
04<meta charset="UTF-8">
05<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
06<title>元素滚动条距离</title>
07<style>
08    .test{
09        width:200px;
10        height: 200px;
11        border: 3px solid #008;
12        overflow:auto; /* 父级设置overflow:auto */
13    }
14    .test p{
15        width:3000px;
16        height: 3000px;
17        background-color: aquamarine;
18    }
19</style>
20</head>
21<body>
22 
23    <div class="test">
24        <p></p>
25    </div>
26 
27    <script>
28     
29        $('.test').eq(0).scroll(function(){
30         
31            console.log(
32                $(this).scrollTop(), 
33                $(this).scrollLeft()
34            );
35     
36        });
37     
38    </script>
39 
40</body>
41</html>


结合ajax做一些页面滚动加载的时候，需要判断滚动条的距离

三、获取盒模型不同区域的宽高

这些基本都是取值，没有赋值的功能，返回的是数值

获取内容盒

.width()

.height()

获取内容盒 content

view sourceprint?
01<!DOCTYPE html>
02<html>
03<head>
04<meta charset="UTF-8">
05<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
06<title>获取盒模型不同区域宽高</title>
07<style>
08    .demo{
09        width:100px;
10        height:100px;
11        border:10px solid rgba(0, 0, 0, .3);
12        padding:20px;
13        margin:5px;
14    }
15</style>
16</head>
17<body>
18 
19    <div class="demo"></div>
20 
21    <script>
22     
23        // 通过css方法获取返回的是"字符串"
24        console.log($('.demo').css('width')); // 100px
25        console.log($('.demo').css('padding')); // 20px
26         
27         
28         
29        // 获取内容盒 content
30        console.log( $('.demo').width() ); // 100
31        console.log( $('.demo').height() ); // 100
32 
33 
34    </script>
35 
36</body>
37</html>

获取填充盒

.innerWidth()

.innerHeight()


获取填充盒 content + padding

view sourceprint?
1console.log( $('.demo').innerWidth() ); // 140
2 
3console.log( $('.demo').innerHeight() ); // 140

获取边框盒，可以传参数true

.outerWidth()

.outerHeight()

获取边框盒 content + padding + border

view sourceprint?
1console.log( $('.demo').outerWidth() ); // 160
2 
3console.log( $('.demo').outerHeight() ); // 160

传参数true，获取 content + padding + border + margin

view sourceprint?
1console.log($('.demo').outerWidth(true)); // 170
2 
3console.log($('.demo').outerHeight(true)); // 170

四、遍历索引相关方法（以及补充）

.each()

已经知道jQuery核心的精髓，是使用方法的时候内部会内置一些循环，

比如在进行多次链式调用的时候，可能每个方法都有循环，

如果能把循环叠加到一起的话，能把代码的效率高一些


给每个li身上加类名，同时再li里面加一些文字

view sourceprint?
01<ul>
02    <li></li>
03    <li></li>
04    <li></li>
05    <li></li>
06    <li></li>
07    <li></li>
08</ul>
09 
10<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
11<script>
12 
13    $('li').text(function(index, ele){
14 
15        return 'item-' + index; // 加文字
16 
17    }).addClass(function(index, ele){
18 
19        return 'demo' + index; // 加类名
20 
21    });
22 
23</script>

通过text()和addClass()方法确实达成了效果，但传递了两个回调函数循环了两次，

函数在执行的时候会创建了作用域，这是比较消耗算力的方式，可以用.each()方法，each是每一个的意思


然后通过.each()方式传一个函数，函数有两个参数，把前面选中的集合，拿到函数里执行，一次循环就可以了，执行效率提高了

view sourceprint?
1$('li').each(function(index, ele){
2 
3    $(ele)
4        .text('item-' + index)
5            .addClass('demo' + index);
6 
7});

.children() 补充

children()获取所有的子元素，包括span元和p元素，用each()方法做一个操作

view sourceprint?
01<div>
02    <span></span>
03    <p></p>
04    <span></span>
05    <p></p>
06    <span></span>
07    <p></p>
08</div>
09 
10<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
11<script>
12 
13    $('div').children().each(function(index, ele){
14 
15        if(ele.nodeName == 'SPAN'){ // 这里用到原生js上的nodeName属性
16 
17            $(ele).text('span-' + index);
18 
19        }else{
20 
21            $(ele).text('p-' + index);
22 
23        }
24    });
25 
26</script>

.index()

.index()获取一个标签在兄弟元素节点中索引的值。


以前通过闭包的方式获取li对应的索引值，下面通过jQuery封装好的index()方法获取

view sourceprint?
01<ul>
02    <li>a</li>
03    <li>b</li>
04    <li>c</li>
05    <li>d</li>
06    <li>e</li>
07</ul>
08 
09<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
10<script>
11 
12    $('ul').on('click', 'li', function(e){
13 
14        console.log($(e.target).index()); // 把e.target包装成jQuery对象，在使用index()方法
15 
16    });
17 
18</script>


index()的参数

1). 可以传jQuery对象

2). 或原生的element


传参数起到过滤筛选的作用

$('div span') 前面获取的是一堆span

.index( $('div span').eq(1) ) 后面参数传的是具体第二个span

view sourceprint?
01<div>
02    <span>span</span>
03    <p>p</p>
04    <span>span</span>
05    <p>p</p>
06    <span>span</span>
07    <p>p</p>
08</div>
09 
10<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
11<script>
12 
13    console.log($('div span').index( $('div span').eq(1) )); // 1
14 
15</script>


$('div span').index($(e.target)) 前面或的是span的集合，后面只显示span元素的索引

view sourceprint?
1$('div').children().on('click',function(e){
2 
3    console.log($('div span').index($(e.target)));
4 
5});

点击p元素找不到返回-1

写轮播图的时候，获取小圆点的时候很方便


Leave a comment 0 Comments.

Leave a Reply

换一张