【前端之Jquery获取元素尺寸、获取元素的偏移量、事件绑定、事件的解绑和触发的基本语法知识】

前端之Jquery获取元素尺寸、获取元素的偏移量、事件绑定、事件的解绑和触发的基本语法知识

我们常见的Web前端三巨头：HTML、CSS、JS（JavaScript）。
具体请移到【我的专栏】当中的前端——>前端之HTML+CSS；
而在这里我将图文并茂的介绍JS在Vscode中相关功能的运用，希望能够对你们有些帮助。

1. jquery获取元素尺寸
2. jquery获取元素的偏移量
3. jquery事件绑定
4. jquery事件的解绑和触发
5. 总结

1.jquery获取元素尺寸

width() 和 height()、innerWidth() 和 innerHeight()、outerWidth() 和 outerHeight()
获取元素尺寸
注意:

1. 不管该元素是否隐藏, 都能获取到该元素的值
2. 不管盒子模型是什么状态, 拿到的尺寸区域不变

div {
   
      width: 300px;
      height: 300px;
      padding: 20px;
      border: 20px solid skyblue;
      margin: 20px;
      background-color: pink;
      background-clip: content-box;
      /* display: none; */
      /* visibility: hidden; */
      box-sizing: border-box;
    }
    // 1. width() 和 height()
    // 获取到的就是元素内容区域的尺寸
    console.log($('div').width())
    console.log($('div').height())
    console.log('------------------')
// 2. innerWidth() 和 innerHeight()
// 获取到的就是元素内容+padding区域的尺寸
    console.log($('div').innerWidth())
    console.log($('div').innerHeight())
    console.log('------------------')
// 3. outerWidth() 和 outerHeight()
// 获取到的就是元素内容+padding+border区域的尺寸
    console.log($('div').