码农知识堂 - 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

  • 相关阅读:
    网络安全的红利还能吃几年?
    字符函数和字符串函数详解
    C++项目实战——基于多设计模式下的同步&异步日志系统-⑧-日志落地类设计
    C编译环境和预处理(非常详细,建议收藏)
    NRF52840 SOC 在空气净化市场应用的发展趋势
    Windows右键菜单美化(适用版本:Win7-Win11) 奇怪的美化教程 #1
    PyTorch-12 GAN、WGAN
    在 React 中创建带有突出显示的目录
    HTTP协议
    Java注解
  • 原文地址:https://blog.csdn.net/liqiannan8023/article/details/127792964
  • 最新文章
  • 沪漂五周年了:我越来越迷茫了
    Agentic Skill Routing 实战:别再把所有 Skill 塞进 AI Agent 上下文
    MySQL-Seconds_behind_master的精度误差
    [MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间
    AI的至暗历史:从万众期待到被政府撤资,AI的两次死亡徘徊
    Agent OS :五种驯服不确定性的范式
    PortSwigger SQL注入LAB11
    数据库即时编译JIT
    [Begin]AI Learn Data Day 0
    深度学习进阶(二十七)现代 LLM 的核心架构设计其二:SwiGLU
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
小工具 小游戏
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

京公网安备 11010502049817号