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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">

<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 src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<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="http://libs.baidu.com/jquery/2.0.0/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="http://libs.baidu.com/jquery/2.0.0/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});
		
		// 在行间显示100px
		// <div>
		//     <div style="position: relative; top: 100px; left: 100px;"></div>
		// </div>

	</script>

</body>
</html>


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

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

.position()

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

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

3). postiton()不能赋值

<!DOCTYPE html>
<html lang="zh-cn">
<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 lang="zh-cn">
<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 lang="zh-cn">
<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做一些页面滚动加载的时候，需要判断滚动条的距离

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

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

获取内容盒

.width()

.height()

获取内容盒 content

<!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>

获取填充盒

.innerWidth()

.innerHeight()


获取填充盒 content + padding

console.log( $('.demo').innerWidth() ); // 140

console.log( $('.demo').innerHeight() ); // 140

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

.outerWidth()

.outerHeight()

获取边框盒 content + padding + border

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() 补充

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()

.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


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

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

.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').index($(e.target)) 前面或的是span的集合，后面只显示span元素的索引

$('div').children().on('click',function(e){

    console.log($('div span').index($(e.target)));

});

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

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


Leave a comment 0 Comments.

Leave a Reply

换一张