Query on()方法

2024-08-30 09:38
文章标签 方法 query

本文主要是介绍Query on()方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

来源url:http://www.cnblogs.com/leejersey/p/3545372.html

jQuery on()方法是官方推荐的绑定事件的一个方法。

 
  1. $(selector).on(event,childSelector,data,function,map)

由此扩展开来的几个以前常见的方法有.

 
  1. bind()
  2.   $("p").bind("click",function(){
  3.     alert("The paragraph was clicked.");
  4.   });
  5.   $("p").on("click",function(){
  6.     alert("The paragraph was clicked.");
  7.   });
  8. delegate()
  9.   $("#div1").on("click","p",function(){
  10.     $(this).css("background-color","pink");
  11.   });
  12.   $("#div2").delegate("p","click",function(){
  13.     $(this).css("background-color","pink");
  14.   });
  15. live()
  16.   $("#div1").on("click",function(){
  17.     $(this).css("background-color","pink");
  18.   });
  19.   $("#div2").live("click",function(){
  20.     $(this).css("background-color","pink");
  21.   });

以上三种方法在jQuery1.8之后都不推荐使用,官方在1.9时已经取消使用live()方法了,所以建议都使用on()方法。

tip:如果你需要移除on()所绑定的方法,可以使用off()方法处理。

 
  1. $(document).ready(function(){
  2.   $("p").on("click",function(){
  3.     $(this).css("background-color","pink");
  4.   });
  5.   $("button").click(function(){
  6.     $("p").off("click");
  7.   });
  8. });

tip:如果你的事件只需要一次的操作,可以使用one()这个方法

 
  1. $(document).ready(function(){
  2.   $("p").one("click",function(){
  3.     $(this).animate({fontSize:"+=6px"});
  4.   });
  5. });

trigger()绑定

 
  1. $(selector).trigger(event,eventObj,param1,param2,...)
 
  1. $(document).ready(function(){
  2.   $("input").select(function(){
  3.     $("input").after(" Text marked!");
  4.   });
  5.   $("button").click(function(){
  6.     $("input").trigger("select");
  7.   });
  8. });

多个事件绑定同一个函数

 
  1. $(document).ready(function(){
  2. $("p").on("mouseover mouseout",function(){
  3. $("p").toggleClass("intro");
  4. });
  5. });

多个事件绑定不同函数

 
  1. $(document).ready(function(){
  2. $("p").on({
  3. mouseover:function(){$("body").css("background-color","lightgray");},
  4. mouseout:function(){$("body").css("background-color","lightblue");},
  5. click:function(){$("body").css("background-color","yellow");}
  6. });
  7. });

绑定自定义事件

 
  1. $(document).ready(function(){
  2. $("p").on("myOwnEvent", function(event, showName){
  3. $(this).text(showName + "! What a beautiful name!").show();
  4. });
  5. $("button").click(function(){
  6. $("p").trigger("myOwnEvent",["Anja"]);
  7. });
  8. });

传递数据到函数

 
  1. function handlerName(event)
  2. {
  3. alert(event.data.msg);
  4. }
  5. $(document).ready(function(){
  6. $("p").on("click", {msg: "You just clicked me!"}, handlerName)
  7. });

适用于未创建的元素

 
  1. $(document).ready(function(){
  2.   $("div").on("click","p",function(){
  3.     $(this).slideToggle();
  4.   });
  5.   $("button").click(function(){
  6.     $("<p>This is a new paragraph.</p>").insertAfter("button");
  7.   });
  8. });

这篇关于Query on()方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1120455

相关文章

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

mysql出现ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost‘ (10061)的解决方法

《mysql出现ERROR2003(HY000):Can‘tconnecttoMySQLserveron‘localhost‘(10061)的解决方法》本文主要介绍了mysql出现... 目录前言:第一步:第二步:第三步:总结:前言:当你想通过命令窗口想打开mysql时候发现提http://www.cpp

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T

MySQL INSERT语句实现当记录不存在时插入的几种方法

《MySQLINSERT语句实现当记录不存在时插入的几种方法》MySQL的INSERT语句是用于向数据库表中插入新记录的关键命令,下面:本文主要介绍MySQLINSERT语句实现当记录不存在时... 目录使用 INSERT IGNORE使用 ON DUPLICATE KEY UPDATE使用 REPLACE

CentOS 7部署主域名服务器 DNS的方法

《CentOS7部署主域名服务器DNS的方法》文章详细介绍了在CentOS7上部署主域名服务器DNS的步骤,包括安装BIND服务、配置DNS服务、添加域名区域、创建区域文件、配置反向解析、检查配置... 目录1. 安装 BIND 服务和工具2.  配置 BIND 服务3 . 添加你的域名区域配置4.创建区域

mss32.dll文件丢失怎么办? 电脑提示mss32.dll丢失的多种修复方法

《mss32.dll文件丢失怎么办?电脑提示mss32.dll丢失的多种修复方法》最近,很多电脑用户可能遇到了mss32.dll文件丢失的问题,导致一些应用程序无法正常启动,那么,如何修复这个问题呢... 在电脑常年累月的使用过程中,偶尔会遇到一些问题令人头疼。像是某个程序尝试运行时,系统突然弹出一个错误提

电脑提示找不到openal32.dll文件怎么办? openal32.dll丢失完美修复方法

《电脑提示找不到openal32.dll文件怎么办?openal32.dll丢失完美修复方法》openal32.dll是一种重要的系统文件,当它丢失时,会给我们的电脑带来很大的困扰,很多人都曾经遇到... 在使用电脑过程中,我们常常会遇到一些.dll文件丢失的问题,而openal32.dll的丢失是其中比较

python中字符串拼接的几种方法及优缺点对比详解

《python中字符串拼接的几种方法及优缺点对比详解》在Python中,字符串拼接是常见的操作,Python提供了多种方法来拼接字符串,每种方法有其优缺点和适用场景,以下是几种常见的字符串拼接方法,需... 目录1. 使用 + 运算符示例:优缺点:2. 使用&nbsjsp;join() 方法示例:优缺点:3

Mysql中深分页的五种常用方法整理

《Mysql中深分页的五种常用方法整理》在数据量非常大的情况下,深分页查询则变得很常见,这篇文章为大家整理了5个常用的方法,文中的示例代码讲解详细,大家可以根据自己的需求进行选择... 目录方案一:延迟关联 (Deferred Join)方案二:有序唯一键分页 (Cursor-based Paginatio