文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件

() 事件对象的使用 jQuery事件对象的作用 标准的”click”点击事件 $(elem).on("click",function(event){ event //事件对象 }) 在不同浏览器之间事件对象的获取...通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。...经常用于事件冒泡时处理事件委托 event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素 事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替 triggerHandler...如果它们不是由目标元素直接触发的，那么它就不会进行任何处理 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。

4.9K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    4-Jquery学习四-事件操作

    即使是执行live()函数之后新添加的元素，只要它匹配当前jQuery对象的选择器，绑定的事件处理函数仍然对其有效。 要删除通过live()绑定的事件，请使用die()函数。...jQuery 1.3 新增该函数，从jQuery 1.7开始被标记为已过时，在jQuery 1.9中被移除,请使用on()函数来替代。请使用on()函数来替代。 5，die 同上。...这里介绍的load()是一个事件函数，jQuery中还有一个同名的Ajax函数load()，用于通过Ajax加载html文档内容。...14，unload 同上，jQuery 1.0 新增该函数，但从1.8开始被标记为已过时。 15，resize resize()函数用于为每个匹配元素的resize事件绑定处理函数。...21，change change事件会在文本内容或选项被更改时触发。该事件仅适用于和以及。

    5.4K90

    【领会要领】web前端-轻量级框架应用（jQuery基础）

    jQuery框架，简介，优势，安装，语法，jQuery选择器，id选择器，类选择器，标记选择器，属性选择器，位置选择器，后代选择器，子代选择器，选择器对象，选择器对象遍历，页面初始化，jQuery的dom...jquery官方网址 http://jquery.com 首先进入download jquery下载页面，下载最新的jquery库文件，有两个版本：生产版，Production version，用于实际网站...注意：$(A).before(B)的操作，不是将B插入A前面，而是将A插入B前面 删除HTML元素 删除HTML元素一般使用jquery中的remove()和empty() remove()的作用就是从...change()当元素的值发生改变时，会发生change事件，focus()当元素获得焦点时，触发focus事件。blur()当元素失去焦点时触发。...窗口事件： scroll()当用户滚动指定的元素时，会触发scroll事件。scroll事件适用于所有可滚动的元素和window对象。

    3K20

    vue中输入框事件的使用——@input、@keyup.enter、@change、@blur「建议收藏」

    ="search" value="" /> 适用于实时查询，每输入一个字符都会触发该事件。...如图： 二、@keyup.enter 该事件与v-on:input事件的区别在于：input事件是实时监控的，每次输入都会调用，而@keyup.enter事件则是在pc上需要点击回车键触发，而在手机上则是需要点击输入键盘上的确定键才可触发...三、@change 该事件和enter事件相似，在手机上都是要经过触发虚拟键盘的搜索键才会触发事件。使用方式同input事件。...简单的解决办法： 对input的值进行监听（watch），把原本需要绑在input框的事件在监听变化时调用。...注：如果使用mintui中的mt-field标签时，对应的blur（失焦）事件要执行时，要用@blur.native.capture=””来代替@blur。

    18K31

    现代前端技术解析：现代前端交互框架

    高效实用jQuery： 尽可能使用id选择器进行DOM查询操作； 缓存一切需要复用的jQuery DOM对象，使用find()子查询； 不要滥用jQuery，尽可能使用原生代码代替； 尽可能使用jQuery...的静态方法； 使用事件代理，不要直接使用元素的事件绑定； 尽量使用新的jQuery版本； 尽可能使用链式写法来提高编程效率和代码运行效率 ?...Model：用于存放请求的数据结果和数据对象； View：用于页面DOM的更新与修改； Controller：用于根据前端路由条件（例如不同的HASH路由）来调用不同Model给View渲染不同数据内容...前端MNV*时代 使用JavaScript调用原生控件或事件绑定来生成应用程序的交互模式称为前端MNV*开发模式。...如果说Virtual DOM减少了DOM的交互次数，那么MNV*想要做的就是完全抛弃使用DOM。这种模式仅适用于移动端Hybrid应用，因为需要依赖原生应用控件的调用支持。

    1.2K31

    JQuery基础

    jQuery有两个版本： production version:用于生产、实际的网络，代码已被精简和压缩； development version：用于开发测试，可阅读源码。...）,keydown（键按下的过程）,keyup（键松开）,事件；ps:keypress不会触发所有的键（如alt,ctrl,esc,shift）,请使用keydown()方法检测 表单事件：submit...（提交表单时）,change（元素值（适用于表单字段）发生改变时）,focus（元素获得焦点）,blur（元素失去焦点）事件； 文档/窗口事件：load（元素已加载触发，在jQuery1.8中废除。...5.停止动画： stop()方法用于停止动画效果，适用于所有jQuery效果函数，包括滑动，淡入淡出，自定义动画。...noConflict() jQuery使用$作为jQuery的简写。

    6.8K51

    jq---方法总结

    什么是jQuery 在使用jQuery之前，我们必须先了解什么是jQuery，它能够干什么(不然我们为啥要用它)。 jQuery是一个非常流行的快速、小巧、功能强大的开源JavaScript库。...前者是jQuery库的源代码版本，它带有注释信息，建议你在开发环境中使用该文件，以便于调试或阅读源代码。...对象 // 你同样可以使用jQuery对象的方法对这些临时的DOM元素进行操作，或者将它们插入到文档的指定位置。...，第一次触发后就自动解除绑定 $dblclick() //双击事件 focus()、聚焦的时候事件 change()、输入域改变的时候 hover()、移入的时候 submit()(仅限于表单元素...click事件 $("selector").trigger("click"); // 触发所有匹配元素上的change事件 $("selector").trigger("change"); // 触发所有匹配元素上绑定在

    3.8K20

    jQuery

    鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter keyup focus...scroll mouseleave hover blur unload 获得内容 - text()、html() 以及 val() 三个用于 DOM 操作的 jQuery 方法： text() -...设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 attr() - 设置或返回属性值。...） outerHeight() - 高度（包括内边距和边框） 向上遍历 DOM 树 这些 jQuery 方法很有用，它们用于向上遍历 DOM 树： parent() - 返回被选元素的直接父元素。...树 children() - 所有直接子元素 find() - 被选元素的所有后代元素，div下所有span：$("div").find("span"); 在 DOM 树中水平遍历 有许多有用的方法让我们在

    5.3K10

    使用AmplifyJS和JQuery编写更好更优雅的javascript事件处理代码

    事件(或消息)是一种经常使用的软件设计模式。可以减少消息处理者和消息公布者的之间的耦合，比方J2EE里面的JMS规范。设计模式中的观察者模式(也叫公布/订阅模式)。...之前写的JQuery相关博客中。具体介绍了JQuery的事件处理机制和特性，具体可以參考这个文件夹下的文章。...JQuery事件处理事实上就是使用了公布/订阅模式，包含它提供的命名空间机制、自己定义事件都非常的棒，可是JQuery事件处理有一个缺陷：JQuery事件都是和DOM元素相关的，可是非常多时候我们并不须要...仅仅希望使用事件的公布/订阅这样的机制。 代码1：假设某个DOM元素不存在。那么不能依靠它使用事件的公布和订阅。...它刚好弥补了JQuery事件处理的不足。 以下附上AmplifyJS的源代码amplify.core.js。能够看到源代码非常的简短，也非常easy看懂。 /*!

    1.1K30

    04-老马jQuery教程-DOM节点操作及位置和大小

    语法结构： jQuery(html, [props]) 参数: html:用于动态创建DOM元素的HTML标记字符串，注意标签尽量闭合。...props:用于附加到新创建元素上的属性、事件和方法 返回值：返回新创建标签的jQuery包装对象 // jq的 appendTo，类似DOM的appendTo方法 $("Hello标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加。...参数: html， String类型，HTML标记代码字符串，用于动态生成元素并包裹目标元素 element， Element类型，用于包装目标元素的DOM元素。...参数 html， String类型，HTML标记代码字符串，用于动态生成元素并包装目标元素 element，Element类型，用于包装目标元素的DOM元素 fn，Function类型，生成包裹结构的一个函数

    7K00

    jQuery的使用

    供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。 怎么使用jquery Jquery它是一个库(框架)，要想使用它，必须先引入！ jquery-1.8.3.js：一般用于学习阶段。...jquery-1.8.3.min.js：用于项目使用阶段 Jquery的简单入门 所有的jquery代码写在页面加载函数 $(function(){ Jquery代码 }); ...2.技术分析 需要使用jquery的选择器(基本选择器、基本过滤选择器) 还需要使用jquery的CSS的方法(css(name,value)) 如果CSS样式已经由美工写好，此时可以使用jquery的...2.技术分析 需要使用jquery的选择器(id选择器、类选择器) 需要使用jquery的属性操作方法 prop() 3.步骤分析 第一步：引入jquery文件 第二步：书写页面加载函数 第三步：为上面的复选框绑定单击事件...追加内容 apend: A.append(B) 将B追加到A的内容的末尾处 appendTo: A.appendTo(B) 将A加到B内容的末尾处 3.步骤分析 第一步：确定事件(change

    9.6K31

    document.onreadystatechange_js转json格式

    但在 IE 中 onreadystatechange 事件是其私有实现的，用于数据加载的 IMG、SCRIPT 和 LINK 标记，常常被误用 onreadystatechange 事件而导致在非 IE...SCRIPT 标记可以触发 onreadystatechange 事件 readyState:loaded 动态创建的 SCRIPT 标记可以触发 onreadystatechange 事件...LINK 标记可以触发 onreadystatechange 事件 readyState:undefined 动态创建的 LINK 标记可以触发 onreadystatechange 事件...无内容输出 可见，此次测试中，除 IE 浏览器外，Opera 对于动态创建的 IMG、SCRIPT 和 LINK 标记也可以触发 onreadystatechange 事件，但他对不同元素加载过程中触发该事件的频率以及...如果使用 onreadystatechange 是为了处理脚本加载（回调）的问题，请参考 BX9013: 动态引入的外部 JS 文件在各浏览器中的加载顺序不一致 一文“解决方案”中的内容。

    3.8K10

    04-老马jQuery教程-DOM节点操作及位置和大小

    >动态spanspan>'; // 动态追加到body标签中 document.body.appendChild(domDiv); 1.2 jQuery动态创建标签的方式 jQuery的构造函数本身可以接收...语法结构： jQuery(html, [props]) 参数: html:用于动态创建DOM元素的HTML标记字符串，注意标签尽量闭合。...props:用于附加到新创建元素上的属性、事件和方法 返回值：返回新创建标签的jQuery包装对象 // jq的 appendTo，类似DOM的appendTo方法 $("Hello标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加。...参数: html， String类型，HTML标记代码字符串，用于动态生成元素并包裹目标元素 element， Element类型，用于包装目标元素的DOM元素。

    3K90

    jquery scroll 滚动加载列表 获取腾讯云图片像素信息

    jquery scroll 滚动加载列表 获取腾讯云图片像素信息 场景描述 问题处理 其他问题处理 场景描述 bootstarp列表加载图片时需要同时获取图片的像素（宽and高），对于腾讯云这类远程存储获取图片来说...，并且腾讯云获取图片像素信息的接口还有频限100的限制，这就更导致了通过后台获取图片像素方案的不适用，那么如果通过页面jquery获取图片像素的时候当图片量很大的时候也是会出现卡顿，加载慢的情况，这个时候就考虑的热区内图片展示像素...this.find("td:eq(1)"); var fileType = _this.find("td:eq(3)").text(); // 加载图片，并标记...增加start1()方法用于针对视图模式处理 var start1 = function() { var imgs = $('.trdata').not('.dataloaded'); // 选择出未加载的图片...'scroll',start); start1(); // 绑定 scroll 事件，用于监听元素是否进入可视区 $('#tableDiv').scroll(function (

    1.7K10

    【目标检测】开源 | 事件相机：使用卷积神经网络，利用现有的标记数据的实现从图像到事件的生成！

    然而，它们在计算机视觉问题上的应用——其中许多问题主要由深度学习解决方案主导——由于缺乏事件的标记训练数据而受到限制。...在这项工作中，我们提出一种方法，使用卷积神经网络，利用现有的标记数据的图像-事件对，实现从图像到事件的生成。我们在图像和事件对上训练这个网络，使用一个对抗性鉴别器损失和循环一致性损失。...循环一致性损失利用一对预先训练的自监督网络，这些网络利用事件进行光流估计和图像重建，并约束我们的网络生成事件，从而使这两个网络都能得到准确的输出。...经过全面的端到端训练，我们的网络从图像中学习事件生成模型，而不需要对场景中的运动进行精确建模，通过基于建模的方法表现出来，同时也隐式建模事件噪声。...声明：文章来自于网络，仅用于学习分享，版权归原作者所有，侵权请加上文微信联系删除。

    2.3K10

    页面性能优化的利器 — Timeline

    一般来说，我们会使用JavaScript来实现一些视觉变化的效果。比如用jQuery的animate函数做一个动画、对一个数据集进行排序、或者往页面里添加一些DOM元素等。...网页中的重绘过程是影响整体性能下降的关键点之一，因而网站开发者应该更多地去避免在站点中进行不必要以及不适时的重绘步骤，借助Inspector中的Timeline面板可以很好地剖析这一些存在的问题。...span.style.color = 'green'; // change CSSOM property } span')[0]; span.textContent = 'interactive'; // change DOM text content span.style.display...可以看到下图中上方的两个红色框位置，该区域是Timeline面板的整体预览区，分了三部分(FPS、CPU、NET)来展示，具体可查看Timeline使用详情。

    7.2K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券