本文来源:http://www.cnblogs.com/leejersey/p/3545372.html
jQuery on()方法是官方推荐的绑定事件的一个方法。
- $(selector).on(event,childSelector,data,function,map)
由此扩展开来的几个以前常见的方法有.
- bind()
- $("p").bind("click",function(){
- alert("The paragraph was clicked.");
- });
- $("p").on("click",function(){
- alert("The paragraph was clicked.");
- });
- delegate()
- $("#div1").on("click","p",function(){
- $(this).css("background-color","pink");
- });
- $("#div2").delegate("p","click",function(){
- $(this).css("background-color","pink");
- });
- live()
- $("#div1").on("click",function(){
- $(this).css("background-color","pink");
- });
- $("#div2").live("click",function(){
- $(this).css("background-color","pink");
- });
以上三种方法在jQuery1.8之后都不推荐使用,官方在1.9时已经取消使用live()方法了,所以建议都使用on()方法。
tip:如果你需要移除on()所绑定的方法,可以使用off()方法处理。
- $(document).ready(function(){
- $("p").on("click",function(){
- $(this).css("background-color","pink");
- });
- $("button").click(function(){
- $("p").off("click");
- });
- });
tip:如果你的事件只需要一次的操作,可以使用one()这个方法
- $(document).ready(function(){
- $("p").one("click",function(){
- $(this).animate({fontSize:"+=6px"});
- });
- });
trigger()绑定
- $(selector).trigger(event,eventObj,param1,param2,...)
- $(document).ready(function(){
- $("input").select(function(){
- $("input").after(" Text marked!");
- });
- $("button").click(function(){
- $("input").trigger("select");
- });
- });
多个事件绑定同一个函数
- $(document).ready(function(){
- $("p").on("mouseover mouseout",function(){
- $("p").toggleClass("intro");
- });
- });
多个事件绑定不同函数
- $(document).ready(function(){
- $("p").on({
- mouseover:function(){$("body").css("background-color","lightgray");},
- mouseout:function(){$("body").css("background-color","lightblue");},
- click:function(){$("body").css("background-color","yellow");}
- });
- });
绑定自定义事件
- $(document).ready(function(){
- $("p").on("myOwnEvent", function(event, showName){
- $(this).text(showName + "! What a beautiful name!").show();
- });
- $("button").click(function(){
- $("p").trigger("myOwnEvent",["Anja"]);
- });
- });
传递数据到函数
- function handlerName(event)
- {
- alert(event.data.msg);
- }
- $(document).ready(function(){
- $("p").on("click", {msg: "You just clicked me!"}, handlerName)
- });
适用于未创建的元素
- $(document).ready(function(){
- $("div").on("click","p",function(){
- $(this).slideToggle();
- });
- $("button").click(function(){
- $("<p>This is a new paragraph.</p>").insertAfter("button");
- });
- });
JQ绑定事件(1.9已经废除了live()等绑定事件方法,on()方法是官方推荐的绑定事件的一个方法)的更多相关文章
-
jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...
-
第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换
1.jQuery简介 为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的页面, 并且兼 ...
-
android data binding jetpack IV 绑定一个方法另一种写法和参数传递
android data binding jetpack VIII BindingConversion android data binding jetpack VII @BindingAdapter ...
-
android data binding jetpack III 绑定一个方法
第三篇 给view绑定一下方法响应. (补充:1.被绑定的方法必须是public的. 1.绑定方法可以用主语法.也可以用以下双冒号方式“::” android:onClick="@{pr ...
-
java:JQuery(声明,JQ和JS对象的区别,prop,attr,addClass,offset,trigger,dblclick和change事件,hide,show,toggle,slideUp,slideDown,slideToggle,三种选择器,标签的获取,三张图片的放大与缩小)
1.JQuery: jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计 的宗旨是“ ...
-
SQL Server 扩展事件(Extented Events)从入门到进阶(2)——在GUI中创建基础扩展事件
本文属于 SQL Server 扩展事件(Extented Events)从入门到进阶 系列 第一篇文章中提到了如何在Profiler中创建跟踪(trace),并以服务器端(server-side)跟 ...
-
Thread类的其他方法,同步锁,死锁与递归锁,信号量,事件,条件,定时器,队列,Python标准模块--concurrent.futures
参考博客: https://www.cnblogs.com/xiao987334176/p/9046028.html 线程简述 什么是线程?线程是cpu调度的最小单位进程是资源分配的最小单位 进程和线 ...
-
layer.open参数;layer.open关闭事件;layer.open关闭刷新;layer.open获取子页的值;layer.open调用子页面的方法
父页面 function layerOpen() { layer.open({ type: 2, shade: [0], title: "验收申请", area: ['1024px ...
-
python 全栈开发,Day42(Thread类的其他方法,同步锁,死锁与递归锁,信号量,事件,条件,定时器,队列,Python标准模块--concurrent.futures)
昨日内容回顾 线程什么是线程?线程是cpu调度的最小单位进程是资源分配的最小单位 进程和线程是什么关系? 线程是在进程中的 一个执行单位 多进程 本质上开启的这个进程里就有一个线程 多线程 单纯的在当 ...
随机推荐
-
JSON Web Token实际应用
一.JWT认证方式的实现方式 1.客户端不需要持有密钥,由服务端通过密钥生成Token. 2.客户端登录时通过账号和密码到服务端进行认证,认证通过后,服务端通过持有的密钥生成Token,Token中一 ...
-
vtk renderer / rendering 绘制
1.在绘制窗口中绘制出物体(静态的)vtkRenderWindow * w=vtkRenderWindow::New(); w->AddRenderer(r); for(int ...
-
JS识记
1.重新按照URL地址加载本页? window.location.reload(); 2.JS中实现命名空间一例? <script type="text/javascript" ...
-
Github学习之路-小试牛刀,练习Git 的基本操作
一.下子windows客户端. Git 客户端下载地址:http://msysgit.github.io/ 二.打开Git Bash 命令行操作界面. 安装完成后,在开始菜单里找到“Git”-> ...
-
android 滚动视图(ScrollView)
为了可以让内嵌布局管理器之中加入多个显示的组件,而且又保证程序不这么冗余,所以可以通过 Activity程序进行控制,向内嵌布局管理器中添加多个组件. ScrollView提供一个显示的容器,可以包含 ...
-
左右推拽显示对比图 - jQyery封装 - 附源文件
闲来无事,做了一个模块效果 左右拖拽显示对比图,是用jq封装的 利用鼠标距离左侧(0,0)坐标的横坐标位移来控制绝对定位的left值 再配合背景图fixed属性,来制作视觉差效果 代码如下 <! ...
-
製程能力介紹(SPC introduction) ─ Cpk之製程能力解釋
Cpk之製程能力解釋 Cpk就是綜合考慮精度與準度的製程能力指標. Cpk=(1-Ck)‧Cp 也就是在考慮Cp的同時,再考慮乘上一個(1-Ck)係數,去彌補Cp之不足,此係數最大時為1,也就是(Ck ...
-
Adobe Fireworks CS6 Mac破解版
Mac下一款快速建站的软件--Adobe Fireworks CS6,小子这里有时间就分享出来给更多需要的朋友. Adobe Fireworks CS6能让您在弹指间创作精美的网站和移动应用程序设计, ...
-
ubuntu16.04如何安装floodlight并且连接eclipse
按顺序走,亲测没出错.用的是Luna R版本的eclipse https://floodlight.atlassian.net/wiki/spaces/floodlightcontroller/pag ...
-
如何学习 JavaScript?
转自:https://www.zhihu.com/question/21064817 首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门. 谈不上经验,都是一些教训. 这个时候有人要 ...