Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >第77天:jQuery事件绑定触发

第77天:jQuery事件绑定触发

作者头像
半指温柔乐
发布于 2018-09-11 03:45:09
发布于 2018-09-11 03:45:09
1.4K0
举报
文章被收录于专栏:前端知识分享前端知识分享

一、元素操作

1、 高度和宽度

$(“div”).height(); // 高度

$(“div”).width(); // 宽度

.height()方法和.css(“height”)的区别:

返回值不同,.height()方法返回的是 数字类型(20),.css(“height”)返回的是字符串类型(20px),因此.height()方法常用在参与数学计算的时候

2、坐标值

$(“div”).offset(); // 获取或设置坐标值 设置值后变成相对定位

$(“div”).position(); // 获取坐标值 子绝父相 只能读取不能设置

3、滚动条(滚动事件)

$(“div”).scrollTop(); // 相对于滚动条顶部的偏移

$(“div”).scrolllLeft(); // 相对于滚动条左部的偏移

案例:两次跟随的广告

案例:防腾讯固定导航栏

二、jQuery事件

1、绑定

click/mouseenter/blur/keyup

// 绑定事件

bind:$node.bind(“click”,function(){});

// 触发一次

one : $node.one(“click”,function(){});

delegate : $node.delegate(“p”,”click”,function(){});

on: $node.on(“click”,”p”,function(){});

2、 解绑

unbindundelegate

off

3、触发

click : $(“div”).click();

trigger:触发事件,并且触发浏览器默认行为

triggerHandler:不触发浏览器默认行为

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-11-07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
[jQuery学习系列四 ]4-Jquery学习四-事件操作
前言: 今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席 云集 听道 推酷 青年中国说 SELF格致论道 参考:http://www.365mini.com/page/tag/jquery-event-methods 1,ready ready()函数用于在当前文档结构载入完毕后立即执行指定的函数。 该函数的作用相当于window.onload事件。 2,blind bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数。 举例:
一枝花算不算浪漫
2018/05/18
4.6K0
JQuery第三节
区别:html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。
用户3461357
2019/08/02
8210
jQuery基础--事件处理
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
eadela
2019/09/29
2.5K0
从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件
如果我们在设置为原来宽高2倍的时候,就要先把获取的宽高转换成数字类型,再乘以2,这样操作比较麻烦,有没有简单的方法呢?
Daotin
2018/08/31
6210
前端基础-jQuery事件机制
第8章 jQuery事件机制 JavaScript中已经学习过了事件,jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件的处理能力。 8.1 jQuery事件发展历程(了解) 简单事件绑定–bind事件绑定–delegate事件绑定–on事件绑定(推荐) 简单事件注册 click(handler) 单击事件 mouseenter(handler) 鼠标进入事件 mouseleave(handler) 鼠标离开
cwl_java
2020/03/26
7000
Web前端JQuery入门实战案例
快速的,轻量级的,功能丰富的 js 库。动画(animation),ajax,DOM,更简单,容易使用的api。
达达前端
2019/07/03
4K0
jquery事件绑定
.bind()   为一个元素绑定一个元素处理程序。   .bind(eventType[,eventData],handler(eventObject))     eventType       一个包含一个或多个DOM事件类型的字符串,或自定义事件的名称。     eventData       一个对象,它包含的数据键值对映射将被传递给事件处理程序。     handler(eventObject)       每当事件
用户1197315
2018/01/19
3.7K0
JavaWeb(八)JQuery
jQuery 市场用得比较多两个框架: jQuery 比较适合做一些互联网 的应用(12306.com,蘑菇街,美丽说,聚美) extjs 比较适合做后台管理系统(电商(订单管理),银行,电信) 核心: 主要功能:javascript开发人员查找元素、操作DOM、处理事件、执行动画和开发Ajax的操作。优势:(宗旨:write less ,do more 写更少的代码,做更多的事情) 1:轻量级 (js 库非常小) 2:强大的选择器(获取页面上面的dom 元素 document.getElementByI
二十三年蝉
2018/02/28
1.8K0
jquery第一次课的案例教程
js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。 (animate.js、common.js)
张哥编程
2024/12/19
1540
jQuery学习笔记
jQuery函数位于一个document ready函数中,我们需要在js中加载该函数文档
Mirror王宇阳
2020/11/13
7.6K0
jQuery学习笔记
JQuery绑定事件与移除事件、动画
绑定事件:bind()、on()、live()、delegate()、keyup(); 触发事件:trigger(‘keyup’)、keyup(); 解绑事件:unbind()、off()、die()、undelegate(); 符合事件:hover() 、toggle(); 事件绑定:bind();
White feathe
2021/12/08
2.8K0
JQuery绑定事件与移除事件、动画
jquery 事件绑定及取消 bind live delegate on one区别 (超详细且通俗易懂)
$(selector).bind(event,data,function,map)
坚毅的小解同志的前端社区
2022/11/28
2.4K0
02-老马jQuery教程-jQuery事件处理
1. 绑简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。 jQuery简单绑定事件的方式,可以让我绑定多个事件处理程序跟D
老马
2018/01/05
2.8K0
jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件
之前学的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,所有这类事件都是属于快捷处理。翻开源码其实可以看到,所有的快捷事件在底层的处理都是通过一个”on”方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法 基本用法:.on( events ,[ selector ] ,[ data ] ) 最常见的给元素绑定一个点击事件,对比一下快捷方式与on方式的不同
Yiiven
2022/12/15
4.2K0
jQuery 重点解析 write less,but do more
向页面添加 jQuery 库 <head> <script type="text/javascript" src="jquery.js"></script> </head> jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element
小白哥哥
2022/05/11
1.4K0
jQuery基础
使用jQuery时, $ 是访问jQuery的标志,但是如果有其他方法与jQuery中的 $冲突时,可以释放$的使用权 ,还可以自定义一个符号来代替 $使用。
不愿意做鱼的小鲸鱼
2022/08/24
1.8K0
jQuery基础
jquery 使用方法
jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。
PM吃瓜
2019/08/12
1.7K0
JQuery的属性操作及事件
①data():在元素本身是看不到设置的属性(不会更改DOM结构),但是该属性是存在的,且可以获取输出
申小兮
2023/04/18
1.7K0
JQuery的属性操作及事件
jQuery 事件
什么是事件 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 常见 DOM 事件: 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypr
静默虚空
2018/01/05
3K0
jQuery 事件注册与事件处理
因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on(),重点讲解如下:
星辰_大海
2020/10/09
1.7K0
jQuery 事件注册与事件处理
相关推荐
[jQuery学习系列四 ]4-Jquery学习四-事件操作
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档