jQuery().on方法的使用详解

从厦门回来之后,两周没写博客了,主要是没时间,先放一张在厦门的靓照



本文 原文链接 ,希望能帮到这些前端小白。用法:此方法可以在匹配元素上绑定一个或者多个事件处理函数。 使用off()方法可以删除on()方法绑定的事件。


语法结构一

1
$(selector).on(events,[selector],[data],fn)
  • events:一个或多个用空格分隔的事件类型和可选的命名空间。
  • selector:可选。一个选择器字符串,用以过滤选定的元素,该选择器的子元素将调用处理程序。
  • data:可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。
  • fn:该事件被触发时执行的函数。 false值也可以做一个函数的简写,返回false。

实例一

利用 data 参数为绑定的事件处理函数传递数据

12345678910111213141516171819
$(document).ready((){   var newtext="这是新文本"   $("div").on("click",{"mytext":newtext},function(e){ 大专栏  jQuery().on方法的使用详解ass="line">    $(this).text(e.data.mytext);   }) }) ``` 

通过通过选择器字符串来过滤匹配元素的子元素中哪些可以响应绑定的事件。下面的代码中,类名为children的元素和它的子元素可以调用绑定的事件

``` bash$(document).ready((){   var newtext="这是新文本"   $(".parent").on("click",".children",{"mytext":newtext},function(e){     $(this).text(e.data.mytext);   }) })

语法结构二

1
$(selector).on(object,[selector],[data])
  • object:一个用字符串表示的,一个或多个空格分隔的事件类型和可选的命名空间,值表示事件绑定的处理函数
    其他两个参数与之前的结构一样

实例一

123456
$(document).ready((){   var newtext="这是新文本"   $("div").on({click:function(e){     $(this).text(e.data.mytext);   }},{"mytext":newtext}) })

以上代码中,事件类型和事件处理函数以对象的形式绑定的。

原文地址:https://www.cnblogs.com/wangziqiang123/p/11712146.html

时间: 2024-11-09 00:37:18

jQuery().on方法的使用详解的相关文章

jquery源码解析:jQuery扩展方法extend的详解

jQuery中要扩展方法或者属性都是通过extend方法实现的.所谓的jQuery插件也是通过extend方法实现的. jQuery.extend扩展的是工具方法,也就是静态方法.jQuery.fn.extend扩展的是实例方法. 当只传入一个对象的时候,里面的方法和属性是扩展到this上的.比如: $.extend( { aaa:function(){}, bbb:function(){} } ) ,这里的this是$,所以用这种形式$.aaa()调用. $.fn.extend( { aaa:

jquery源码解析:jQuery原型方法init的详解

先来了解几个jQuery方法: <li></li> <li></li> <li></li> $("li") -> this -> jQuery对象 ->    { 0 : "li", 1 : "li", 2 : "li", length : 3 } $("<li>aaa")  的效果跟   $("

Jquery AJAX方法的使用详解

<head> <title>JqueryAJAX</title> <script src="jquery-1.7.2.min.js"></script></head><body> <div style="text-align:center"> <h1 style="color:red">千万别忘了引用Jquery!!!</h1>

jQuery Mobile的默认配置项详解,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

学习jQuery Mobile也有一段时间了,越来越上手了,也越来越喜欢他了.我根本就没有理由拒绝他的好.这里我有分享一下我对它的配置项的使用说明一下. 看代码解释: $(document).live("pageinit",function(event){ $.mobile.loadingMessage = "正在加载数据,请稍候......"; $.mobile.pageLoadErrorMessage="很抱歉,系统好像再打小瞌睡......"

jQuery Validate插件 reomte用法详解

在用户注册时经常要通过ajax请求判断用户账号是否已注册,最方便的方法便是用jQuery Validate插件 reomte方法 Jquery Validate插件, 调用远程方法验证参数, remote的用法: 在validate的方法上加入remote:"校验方法",例如:remote: "/test/checkAccount.jsp", 这时传进checkAccount.jsp的参数就是account=$("#account").val()

Android编程之Fragment动画加载方法源码详解

上次谈到了Fragment动画加载的异常问题,今天再聊聊它的动画加载loadAnimation的实现源代码: Animation loadAnimation(Fragment fragment, int transit, boolean enter, int transitionStyle) { 接下来具体看一下里面的源码部分,我将一部分一部分的讲解,首先是: Animation animObj = fragment.onCreateAnimation(transit, enter, fragm

jquery.dataTables插件使用例子详解

DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jquery.dataTables插件</title>     <link rel

jQuery版推箱子游戏详解和源码

前言 偶然间看到很多用js写游戏的感觉很炫酷的样子,所以就想试试,就看了一些资料和某前端站点的视屏.于是乎就自己动手实践了一下,上推箱子截图 感觉很丑陋,但是功能是实现了.再说貌似大多都是这样的吧,这一关其实还是有点难度的,我做完之后想检测一下下一关正确么,居然还玩了以后才通关. 如果你看到这张图让你想起了你童年的回忆,说明你老了,这里可以试玩一下(很遗憾没有链接地址,最后又源码可以下载). css布局 主要考虑的是地图是怎么动态生成的,地图中有灰色的,还有墙,箱子,蓝色,红色背景,人物.先看c

DELL EqualLogic PS6100存储数据恢复方法和结构详解

DELL EqualLogic PS6100采用虚拟ISCSI SAN阵列,为远程或分支办公室.部门和中小企业存储部署带来企业级功能.智能化.自动化和可靠性,支持VMware.Solaris.Linux.Mac.HPux.AIX,支持所有带有业界标准iscsi initiator的操作系统,同时提供全套企业级数据保护和管理功能.可靠的性能.可扩展性和容错功能,是中型企业级存储的起点产品. DELL EqualLogic PS6100详解: 上层应用基础配置: 可以通过连接串口先对存储进行初始化.