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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 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+oracle 分页类
2006/10/09 PHP
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
php单一接口的实现方法
2015/06/20 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
如何卸载python插件
2020/07/08 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
美国智能家居专家:tink
2019/06/04 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
PHP如何自定义函数
2016/09/16 面试题
EJB的角色和三个对象
2015/12/31 面试题
预防艾滋病宣传活动总结
2015/05/09 职场文书
单位接收证明格式
2015/06/18 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL