<!DOCTYPE html>
<html lang="en" class="loading">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {
            //绑定click事件
            $("#panel h5.head").bind("click", function () {
                //获取#panel h5.head元素的紧跟着的同辈元素div
                var $text = $(this).next("div.content")
                if ($text.is(":visible")) {
                    //如果内容是显示的就隐藏
                    $text.hide();
                } else {
                    //反之就显示
                    $text.css("color", "#f0f");
                    $text.show();

                }
            });

            $("a").click(function (event) {
                event.type();//返回事件类型：click
                return false;//阻止链接跳转。
            })

            //删除事件
            $("#delAll").click(function () {
                $("#btn").unbind("click");//提供了参数click,删除click事件;若没有提供参数则删除所有的click事件
            })
        });

        //若在绑定时将该处理函数作为传递的参数，则可以只删除该特定的事件，即使同名也可操作：
        /* $(function () {
         $('#btn').bind("click", myFn1 = function () {
         $('#test').append("<p>我的绑定函数1</p>")
         }).bind("click", myFn2 = function () {
         $('#test').append("<p>我的绑定函数2</p>")
         }).bind("click", myFn3 = function () {
         $('#test').append("<p>我的绑定函数3</p>")
         }).bind("click", myFn4 = function () {
         $('#test').append("<p>我的绑定函数4</p>")
         });

         $('#delOne').click(function () {
         $('#btn').unbind("click", myFn2);//只删除第2个click特定函数
         });
         })
         */
        /* 当单击“删除第二个事件”按钮后，再次单击“点击我”按钮，会将原来的四个绑定函数如数复制一次显示出来。
         另外，对于只需要触发一次，随后就要立即解除绑定
         的情况，jQuery提供了一种简写方法一一one()方法.One()
         方法可以为元素绑定处理函数.当处理函数触发一次后，
         立即被删除。即在每个对象上，事件处理函数只会被执行
         一次。也就是不管点击按钮多少次，被绑定的函数都不会被复制多份*/

        $(function () {
            $("#btn").one("click", myFn1 = function () {
                $("#test").append("<p>我的绑定函数1</p>")
            }).one("click", myFn2 = function () {
                $("#test").append("<p>我的绑定函数2</p>")
            }).one("click", myFn3 = function () {
                $("#test").append("<p>我的绑定函数3</p>")
            }).one("click", myFn4 = function () {
                $("#test").append("<p>我的绑定函数4</p>")
            });

//一次性绑定多个事件，说的少做得多
$("p").bind("mouseover mouseout",function(){
    $(this).toggleClass("over");
});
        })

    </script>
</head>
<body>
<div id="panel">
    <h5 class="head">标题文字</h5>
    <div class="content" style="width: 100px; height: 80px;">
        曾多次麻烦方面来看某方面必控股非人防门必发帖人v缝纫机哦他们发客人反馈哦诶看
    </div>
</div>

<button id="btn">单击我</button>
<div id="test"></div>

<button id="delOne">点击我删除一个特定函数</button>

<p>绑定多个事件，以切换类样式为例</p>
</body>
</html>

jQuery绑定或删除绑定事件的更多相关文章

  1. jQuery动态添加删除与添加表行代码

    具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...

  2. jquery移除、绑定、触发元素事件使用示例详解

    这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...

  3. jQuery如何给body绑定事件？

    jQuery如何给body绑定事件? 代码如下: $(document).bind("resize", function () { alert("php-note.com ...

  4. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

  5. jquery一次绑定多个元素事件

    jquery一次绑定多个元素事件 $(".peoplenum,input[name$='otherAmount'],#aa,#bb").bind("change" ...

  6. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  7. 使用jquery移除前面通过onclick绑定的元素的事件，然后重新绑定别的函数来执行onclick事件。

    http://caibaojian.com/css3/experience/bugs.htm 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件. ...

  8. Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的: 实践一下Knockout提供的CSS绑定功能和JQuery的blur失去焦点事件, 这次不使用Knockout的afterkeydown事件了． 步骤: 先在htm中添加.error的css样 ...

  9. jquery单选框radio绑定click事件实现和是否选中的方法

    使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...

随机推荐

  1. Thymeleaf在前台下拉列表获取后台传的值

    Thymeleaf在前台下拉列表获取后台传的值 后台添加代码: /** * 新增机构 */ @GetMapping("/add") public String add(ModelM ...

  2. qt5.6.2简单操作mysql数据库

    1.新建个项目后,需要在.pro工程文件在中添加QT += sql,否则编译会出错: 2.如果出现数据库驱动未加载,则需要把mysql下的libmysql.dll拷贝到D:\Qt5.6.2\5.6\m ...

  3. 论文笔记系列-Multi-Fidelity Automatic Hyper-Parameter Tuning via Transfer Series Expansion

    论文: Multi-Fidelity Automatic Hyper-Parameter Tuning via Transfer Series Expansion 我们都知道实现AutoML的基本思路 ...

  4. 【运维】Dell R710如何做Raid0与Raid5

    [写在前面]         这次是在戴尔服务器R710上面尝试的做Raid0和Raid5,亲测成功.         因为创建Raid0与Raid5的方式是一样的,所以就以创建Raid5为例. 1, ...

  5. CVE-2019-0797漏洞：Windows操作系统中的新零日在攻击中被利用

    https://securelist.com/cve-2019-0797-zero-day-vulnerability/89885/ 前言 在2019年2月,卡巴实验室的自动漏洞防护(AEP)系统检测 ...

  6. （转载）ECCV 2018：IBN-Net：打开域适应的新方式

    (本文转自极视角) 本文由香港中文大学发表于ECCV2018,论文探索了IN和BN的优劣,据此提出的IBN-Net在语义分割的域适应任务上取得了十分显著的性能提升. 论文地址:https://arxi ...

  7. (转)如何用TensorLayer做目标检测的数据增强

    数据增强在机器学习中的作用不言而喻.和图片分类的数据增强不同,训练目标检测模型的数据增强在对图像做处理时,还需要对图片中每个目标的坐标做相应的处理.此外,位移.裁剪等操作还有可能使得一些目标在处理后只 ...

  8. Focal Loss

    为了有效地同时解决样本类别不均衡和苦难样本的问题,何凯明和RGB以二分类交叉熵为例提出了一种新的Loss----Focal loss 原始的二分类交叉熵形式如下: Focal Loss形式如下: 上式 ...

  9. Perf -- Linux下的系统性能调优工具，第 1 部分【转】

    转自:https://www.ibm.com/developerworks/cn/linux/l-cn-perf1/ Perf 简介 Perf 是用来进行软件性能分析的工具. 通过它,应用程序可以利用 ...

  10. python3+selenium入门06-浏览器操作

    WebDriver主要提供元素操作的方法,但也提供了一些关于浏览器操作的方法,比如设置浏览器大小,浏览器前进,后退,刷新等 设置浏览器大小 有时候需要设置浏览器大小,比如访问收集网页,设置浏览器大小跟 ...