码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 【Jquery-06】jq获取元素的位置和jq的事件


    文章目录

      • jQuery位置操作
        • 1.获取宽高
        • 2位置
          • 1.offset
          • 2.position
          • 3.scrollTop()/scrollLeft()
      • jQuery的事件
        • 1事件委托
          • 1.单个事件的注册
          • 2.事件的处理绑定事件
        • 2事件解除
        • 3.自触发事件
        • 4.阻止事件行为

    jQuery位置操作

    1.获取宽高

    语法用法
    width()/height()只算匹配元素的高/宽
    innerWidth()/innerHeight()元素的高宽+padding
    outerWidth()/outerHeight()元素的高宽+padding+border
    outerWifth(true)/outerHeight(true)元素高宽+padding+border+margin

    2位置

    1.offset

    offset相对于可视区域的位置,与父级无关

    有两个属性left/top,offset().top用于获取距离可视区域顶部的位置,offset().left用于获取距离可视区域左侧的位置

    可以设置偏移位置

    2.position

    position()方法用于返回被选元素相对于带有定位父级偏移坐标,如果父级没有定位则相对于html

    有两个属性,left、top。position().top用于获取距离定位父级顶部的距离,position().left用于获取距离父级左侧的距离

    3.scrollTop()/scrollLeft()

    scrollTop()方法设置或返回元素卷曲度(被卷去的上部的距离)

    括号里面可以只写数字,代表卷曲转到数字的位置

    jQuery的事件

    1事件委托

    1.单个事件的注册

    element.事件(function (){})

    2.事件的处理绑定事件

    element.on(events,[selector],fn)
    第一个参数:事件名,可以同时添加多个事件,用空格分开

    第二个参数:选择本身的后代来绑定触发事件,委托谁来执行

    第三个参数:当事件被触发时,要传递(event)的数据

    第四个参数:执行函数,绑定多个事件

    优势:

    可以给动态生成的元素绑定事件

    可以绑定多个事件,多个处理程序

    可以事件委派操作,事件委派的定义就是把原来加给子元素身上的事件绑定在父元素身上

    2事件解除

    off方法可以移出通过on()方法添加事件处理程序
    
    $("p").off() // 解绑p元素所有事件处理程序
    
    $("p").off( "click")  // 解绑p元素上面的点击事件 
    
    $("ul").off("click", "li");   // 解绑事件委托
    one 只进行一次绑定事件
    
    $("p").one('click',function (){
    
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    3.自触发事件

    1.元素.事件()

    2.元素.trigger(‘事件’)

    3.元素.triggerHander(“事件”)

    第三种不会触发元素的默认行为

    4.阻止事件行为

    js中的内容:

    1.阻止默认行为:e.preventDefault()

    2.阻止冒泡:e.stopPropagation()

    jQuery的内容:
    return false

  • 相关阅读:
    ROM是什么? 刷ROM是什么意思?
    数据提取1
    STM32H743XX/STM32H563XX芯片烧录一次后,再次上电无法烧录
    【前端知识】Three 学习日志(八)—— 全屏渲染
    ES6 Iterator 和 for...of 循环
    React基础汇总
    最强Java面试八股文秋招offer召唤术
    【网络安全】网络安全的最后一道防线——“密码”
    TSINGSEE青犀AI智能分析网关V4工业园区/厂区/工厂智慧安监方案
    顺序表第一部分(介绍篇),三部曲后面分别是实现和介绍
  • 原文地址:https://blog.csdn.net/liqiannan8023/article/details/127792964
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号