学习使用jQuery中的on() 方法

小咪咪 2022-09-05 12:56 154阅读 0赞

### 学习使用jQuery中的on方法 ###

*   *  向 p元素添加 click 事件处理程序
     *  定义和用法

## 向 p元素添加 click 事件处理程序 ##

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <script> $(document).ready(function(){ $(".input-btn").on("click",function(){ var url = $(this).attr('data-url'); alert("奇葩天地网："+url); }); }); </script>
    </head>
    <body>
    <p class="input-btn" data-url="www.qipa250.com">我是奇葩天地网。</p>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70]

## 定义和用法 ##

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off() 方法。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70]: /images/20220829/ad0c81cbdac1445da2bf6d46c79615f4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关学习使用jQuery中的hover方法

学习使用jQuery中的hover方法定义和用法语法实例定义和用法 hover() 方法规定当鼠标指针悬停在被选元

Love The Way You Lie/ 2022年09月10日 10:22/ 0 赞/ 161 阅读

相关学习使用jQuery中的on() 方法

学习使用jQuery中的on方法向 p元素添加 click 事件处理程序定义和用法向 p元素添加 click 事件处理程序

小咪咪/ 2022年09月05日 12:56/ 0 赞/ 155 阅读

相关 jquery on()方法及其参数使用

1.定义 on() 方法在被选元素及子元素上添加一个或多个事件处理程序。 2.语法 $( selector).on( event,childSelect

柔光的暖阳◎/ 2022年08月19日 11:25/ 0 赞/ 183 阅读

相关 jquery one方法实现

jquery中有一个方法：one，用途是事件绑定只执行一次就自动解除绑定。源码看了很久头晕，决定自己搞一个。研究了很久，用原生的模拟了一次。我用的名字是once。

太过爱你忘了你带给我的痛/ 2022年08月18日 12:04/ 0 赞/ 147 阅读

相关 jquery on方法详解

[http://www.365mini.com/page/jquery-on.htm][http_www.365mini.com_page_jquery-on.htm] [

墨蓝/ 2022年07月28日 05:10/ 0 赞/ 171 阅读

相关 jquery中attr()方法的使用

jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。

墨蓝/ 2022年06月15日 06:22/ 0 赞/ 199 阅读

相关 jQuery中 (function($){…})(jQuery)方法使用

刚刚学习jQuery看到这个方法有点蒙圈，代表什么意思呢？我们从JavaScript中匿名函数说起： JavaScript中匿名函数的声明与调用 function(ar

「爱情、让人受尽委屈。」/ 2022年06月11日 06:44/ 0 赞/ 173 阅读

相关 jQuery中的on方法详细介绍

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。如需移除事件处理程序，请使用 off() 方法。如需添加只运行一次的事件然后移除，请使用 one(

忘是亡心i/ 2022年05月22日 07:58/ 0 赞/ 209 阅读

相关 JQuery中的prop()方法的使用

在之前的 JQuery 版本中，都是使用 attr() 来访问对象的属性，比如取一个图片的 alt 属性，就可以这样做 $("\img").attr("alt")；但是在某些时

ゝ一世哀愁。/ 2021年07月24日 13:31/ 0 赞/ 439 阅读

相关 jQuery on() 方法

实例向 `<p>` 元素添加 `click` 事件处理程序： $(document).ready(function(){ $("p").on("

我会带着你远行/ 2021年06月26日 16:06/ 0 赞/ 405 阅读