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

肖言是御用女主

于 2022-01-03 13:54:41 发布

阅读量474

点赞数

分类专栏： # 前端之JQuery # 前端之JavaScript 前端文章标签：前端 jquery 前端框架

本文链接：https://blog.csdn.net/qq_44735180/article/details/122286680

版权

本文介绍了Jquery在前端开发中的基本应用，包括获取元素尺寸（width()、height()等）、偏移量（offset()、position()）、事件绑定（on()、one()、hover()）以及事件解绑和触发（off()、trigger()）。通过实例解析了这些方法的使用，帮助开发者理解并掌握Jquery的核心操作。

摘要由CSDN通过智能技术生成

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

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

jquery获取元素尺寸
jquery获取元素的偏移量
jquery事件绑定
jquery事件的解绑和触发
总结

1.jquery获取元素尺寸

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

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

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'