jQuery实例方法 — 位置图形、遍历索引

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

offset()、position()
原生js的offset是距离最近的有定位的父级的距离，jq的offset就是距离文档的距离。
position是获取有定位的父级的距离

<style>
.wrapper{
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    left: 150px;
    top: 150px;
}
.demo{
    width: 50px;
    height: 50px;
    background-color: orange;
    position: absolute;
    left: 50px;
    top: 50px;
}
</style>

<div class="wrapper">
    <div class="demo"></div>
</div>

console.log($('.demo').offset());     // {top: 200, left: 200}
console.log($('.demo').position());   // {top: 50, left: 50}

scrollTop()、scrollLeft()
取值：$ (window).scrollTop()
传值：$ (window).scrollTop(100)

width()、innerWidth()、outerWidth、height()…

<style>
.demo{
    width: 100px;
    height: 100px;
    border: 2px solid black;
    padding: 20px;
    margin: 20px;
    background-color: orange;
}
</style>

<div class="demo"></div>

console.log($('.demo').css('width'));     // 100px
console.log($('.demo').css('padding'));   // 20px
// content
console.log($('.demo').width());          // 100
// content + padding
console.log($('.demo').innerWidth());     // 140
// content + padding + border
console.log($('.demo').outerWidth());     // 144
// content + padding + border + margin
console.log($('.demo').outerWidth(true)); // 184

遍历索引相关方法：

each()

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

// 给每个li添加文本与class名
// 传统做法
$('li').text(function (index, elem) {
    return index;
}).addClass(function (index, elem) {
    return 'demo' + index;
});
// each做法
$('li').each(function (index, elem) {
    $(elem)
        .text(index)
            .addClass('demo' + index);
});

children()
获取所有的子元素的jq对象
index()
获取索引

<ul>
    <li class="demo">1</li>
    <li>2</li>
    <li class="demo">3</li>
    <li>4</li>
    <li class="demo">5</li>
</ul>

$('ul').children().on('click', function (e) {
	// 按照顺序点击5个li所对应的值
    console.log($(e.target).index());              // 0 1 2 3 4
    console.log($('ul .demo').index($(e.target))); // 0 -1 1 -1 2
});

来源：https://blog.csdn.net/weixin_43873449/article/details/94781676

标签

padding

position

log

jquery