jQuery中delegate()方法用法实例


Posted in Javascript onJanuary 19, 2015

本文实例讲述了jQuery中delegate()方法用法。分享给大家供大家参考。具体分析如下:

此方法为匹配元素的子元素添加一个或多个事件,并规定当这些事件发生时运行的函数。

语法结构:

$(selector).delegate(childofselector,type,data,function)

参数列表:

参数 描述
childofselector 定义要附加事件处理程序的一个或多个子元素。
type 可选。定义附加到元素的一个或多个事件类型。由空格分隔多个事件值。
data 定义传递到事件处理函数的额外数据。
function 定义当事件发生时运行的函数。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" /> 

<title>三水点靠木</title> 

<style type="text/css"> 

li{ 

  list-style-type:none; 

  width:150px; 

  height:150px; 

  border:1px solid green; 

} 

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("div").delegate("button","click",function(){ 

    $("li").slideToggle(); 

  }) 

}) 

</script> 

</head> 

<body> 

<div> 

  <ul> 

    <li>三水点靠木欢迎您</li> 

  </ul> 

  <button>点击查看效果</button> 

</div> 

</body> 

</html>

以上代码可以div的子元素button元素注册click事件处理函数,当点击按钮的时候能够实现隐藏和显示的切换。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
js比较日期大小的方法
May 12 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
node+express制作爬虫教程
Nov 11 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
jQuery中die()方法用法实例
Jan 19 #Javascript
jQuery中live()方法用法实例
Jan 19 #Javascript
jQuery中unbind()方法用法实例
Jan 19 #Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 #Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 #Javascript
jQuery中trigger()方法用法实例
Jan 19 #Javascript
jQuery的one()方法用法实例
Jan 19 #Javascript
You might like
PHP学习之正则表达式
2011/04/17 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
Javascript开发包大全整理
2006/12/22 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
跟老齐学Python之网站的结构
2014/10/24 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
Python实现FM算法解析
2019/06/18 Python
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
即兴演讲稿
2014/01/04 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
初一语文教学反思
2016/03/03 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python