JQuery的delegate事件参数说明[通俗易懂]

JQuery的delegate事件参数说明[通俗易懂]JQuery的delegate事件: delegate()方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。 使用delegate()方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。 $(selector).delegate(childSelector,event,dat


Jetbrains全系列IDE稳定放心使用

JQuery的delegate事件:

 

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

 

使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

 

$(selector
).delegate(childSelector
,event
,data
,function
)

 

注意了 :

 

delegate是用在父子元素之间的一个事件,意思就是说childselector一定要是selector的子元素。

 

如:

 

<html>
<head>
<script type=”text/javascript” src=”/jquery/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

  $(“div “).delegate(“p “,”click”,function(){

    $(this).slideToggle();
  });
  $(“button”).click(function(){

    $(“<p>这是一个新段落。</p>”).insertAfter(“button”);
  });
});
</script>
</head>
<body>
<div style=”background-color:yellow”>
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素,它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
 
<p><b>注释:</b>通过使用 delegate() 方法,而不是 live(),只有 div 元素中的 p 元素会受到影响。</p>
</body>
</html>

 

 

如果子元素不是标签元素而是类元素或者ID元素,怎么使用选择器选择呢?

 

<html>
<head>
<script type=”text/javascript” src=”/jquery/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

  $(“div”).delegate(“.jean”,”click”,function(){

    $(this).slideToggle();
  });
 
  $(“button”).click(function(){

    $(“<p>这是一个新段落。</p>”).insertAfter(“button”);
  });
});
</script>
</head>
<body>
<div style=”background-color:yellow”>
<p class=”jean”>这是一个段落。</p> 
<p >请点击任意一个 p 元素,它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
<p><b>注释:</b>通过使用 delegate() 方法,而不是 live(),只有 div 元素中的 p 元素会受到影响。</p>
</body>
</html>

 

childselector直接写成选择器的样子就好了,如上面:.jean 或者如果是ID的话就是 #jean,千万不要写成$(“.jean”)哦

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/179625.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • 视频目标检测识别

    视频目标检测识别之前文章目标检测API已经介绍过API的基本使用,这里就不赘述了,直接上本次内容的代码了,添加的内容并不多。将测试的test.mp4原文件放到models-master\research\object_detection路径下,并创建一个detect_video.py文件,代码内容如下:importosimportcv2importtimeimportargparseim…

    2022年6月11日
  • 详解Java异或运算符

    详解Java异或运算符文章原地址目录目录 性质 应用举例 其他用途示例 异或是一种基于二进制的位运算,用符号XOR或者^表示,其运算法则是对运算符两侧数的每一个二进制位同值则取0,异值则取1.简单理解就是不进位加法,如1+1=0,0+0=0,1+0=1.Forexample:3^5=6转成二进制后就是0011^0101二号位和三号位都是异值取1末尾两个1同值取零,…

    2022年9月27日
  • 求z=x-y的概率密度_X和Y独立同分布

    求z=x-y的概率密度_X和Y独立同分布Z=X+Y型概率密度的求解@(概率论)Z=g(X,Y)Z=g(X,Y)总结过一次,一般方法是可以由分布函数再求导得到概率密度,计算一定更要小心才能得到正确的解。FZ(z)=P(Z≤z)=P(g(X,Y)≤z)=∫∫g(x,y)≤zf(x,y)dxdyF_Z(z)=P(Z\leqz)=P(g(X,Y)\leqz)\\=\int\int_{g(x,y)\leqz}f(x,y)d

    2022年10月18日
  • 构建基于Javascript的移动web CMS——加入jQuery插件

    构建基于Javascript的移动web CMS——加入jQuery插件

    2022年2月1日
  • 因果图案例_生活中的因果例子

    因果图案例_生活中的因果例子案例:交通一卡通自动充值软件系统要求:系统只接收50或100元纸币,一次只能使用一张纸币,一次充值金额只能为50元或100元。 若输入50元纸币,并选择充值50元,完成充值后退卡,提示充值成功; 若输入50元纸币,并选择充值100元,提示输入金额不足,并退回50元; 若输入100元纸币,并选择充值50元,完成充值后退卡,提示充值成功,找零50元; 若输入100元纸币,并选择充值10…

    2022年8月14日
  • 关于爱未删减版高清_init not tainted

    关于爱未删减版高清_init not taintedhttp://blog.csdn.net/wangkaiblog/article/details/8741042http://blog.linux.org.tw/~jserv/archives/001954.html

    2022年8月11日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号