二、jQuery 与元素尺寸

1、内容

// 1、原生js
console.log(getComputedStyle(box).width)
console.log(getComputedStyle(box).height)

// 2、jQuery方式
console.log($('#box').width())
console.log($('#box').height())

2、内容 + padding

// 1、原生js
console.log(getComputedStyle(box).width)
console.log(getComputedStyle(box).height)

// 2、jQuery方式
console.log($('#box').innerWidth())
console.log($('#box').innerHeight())

三、jQuery 与元素位置

1、内容 + padding + border

// 1、原生js
console.log(box.offsetWidth)
console.log(box.offsetHeight)

// 2、jQuery方式
console.log($('#box').outerWidth())
console.log($('#box').outerHeight())

• 拓展：内容 + padding + border + margin

console.log($('#box').outerWidth(true))
console.log($('#box').outerHeight(true))

2、偏移量

// 1、原生js
console.log(box.offsetLeft)
console.log(box.offsetTop)

// 2、jQuery方式
// 获取一个对象{left: 20, top: 20}

// ① offset()
console.log($('#box').offset()) // 距离文档流的左上角距离
$('#box').offset({
  left: 100,
  top: 100
})

// ② position()
console.log($('#box').position()) // 距离定义元素的左上角距离

三、jQuery 拓展

  除了前面的 jQuery 知识点，大家还可以去学习了解一下 jQuery 的 ajax、jQuery 插件、jQuery 扩展机制、swiper、Bootstrap 等相关知识点。