脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery事件绑定

jquery事件绑定方法介绍

 更新时间：2022年05月04日 11:37:47   作者：.NET开发菜鸟  
这篇文章介绍了jquery事件绑定的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

一、bind()

bing()用来绑定事件，例如：

二、unbind()

unbind()用来解除事件的绑定。例如：

三、on()

on()方法用来绑定事件，例如：

四、off()

off()方法用来解除事件的绑定，例如：

注意：

建议用on()方法绑定事件，效率更高。

五、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件绑定</title>
      <!--引入jQuery-->
      <script src="../jquery-3.3.1.js"></script>
      <!--javascript-->
      <script>
         $(function(){
               // 正常情况下的鼠标移入背景色变为灰色，移出时变为白色
               // 鼠标移入
              /*  $("#menu li").mouseover(function(){
                   $(this).css("background-color","gray");
               });
               // 鼠标移出
               $("#menu li").mouseout(function(){
                   $(this).css("background-color","white");
               }); */

               //bind()绑定事件
               $("#menu li").bind("mouseover",function(){
                   $(this).css("background-color","gray");
               });
               $("#menu li").bind("mouseout",function(){
                   $(this).css("background-color","white");
               });

               // bind()绑定多个事件
             /*   $("#menu li").bind("click mouseover",function(){
                   $(this).css("background-color","gray");
               }); */

               // bind()绑定多个事件
            /*    $("#menu li").bind({
                   click:function(){$(this).css("background-color","#ccc");},
                   mouseover:function(){$(this).css("background-color","yellow");}
               }); */

               // 解除绑定事件
               //$("#menu li").unbind(); // 解除所有的事件
               //$("#menu li").unbind("click");// 只解除click事件，保留鼠标移入事件

               // on()绑定事件
               // 处理添加背景色效果
               $("#menu").on("mouseover","li",{},function(){
                   $(this).css("background-color","#ccc");
               });
               $("#menu").on("mouseout","li",{},function(){
                   $(this).css("background-color","yellow");
               });

               // off()解除绑定
               $("#menu").off("mouseout","li"); // 只移除moustout事件
         });
      </script>
</head>
<body>
    <input type="button" value="添加" />
    <ul id="menu">
        <li>HTML</li>
        <li>XHTML</li>
        <li>CSS</li>
    </ul>
</body>
</html>

到此这篇关于jquery事件绑定的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • jquery+ajax实现跨域请求的方法

    jquery+ajax实现跨域请求的方法

    这篇文章主要介绍了jquery+ajax实现跨域请求的方法,详细介绍了前台及后台的处理方法,是非常实用的技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery学习笔记 操作jQuery对象 CSS处理

    jQuery学习笔记 操作jQuery对象 CSS处理

    在对class属性的操作中，实际上已经改变元素样式了，但这些都是根据已设定的CSS规则间接生效的。因此我们有必要使用更为直接的方式来改变原先设定好了的CSS规则
    2012-09-09
  • JQuery中如何传递参数如click(),change()等具体实现

    JQuery中如何传递参数如click(),change()等具体实现

    有个需求让两个select中option相互转换,这个作业就是给几个按钮添加click()事件接下来为大家介绍下如何在click(),change()传递参数
    2013-04-04
  • jQuery+css实现的切换图片功能代码

    jQuery+css实现的切换图片功能代码

    这篇文章主要介绍了jQuery+css实现的切换图片功能代码,涉及jQuery响应鼠标事件动态变换页面元素样式的相关技巧,需要的朋友可以参考下
    2016-01-01
  • JQuery中Bind()事件用法分析

    JQuery中Bind()事件用法分析

    这篇文章主要介绍了JQuery中Bind()事件用法,实例分析了Bind()事件的功能、特点与绑定事件时的使用技巧,需要的朋友可以参考下
    2015-05-05
  • jQuery学习笔记之回调函数

    jQuery学习笔记之回调函数

    回调函数就是一个通过函数指针调用的函数.这篇文章主要介绍了jQuery学习笔记之回调函数的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-08-08
  • jquery对象和javascript对象即DOM对象相互转换

    jquery对象和javascript对象即DOM对象相互转换

    对于已经是一个 DOM 对象，只需要用 $() 把DOM对象包装起来，就可以获得一个 jQuery 对象了，使用[index]和.get(index)可以转为DOM对象
    2014-08-08
  • Jquery $when done then的用法详解

    Jquery $when done then的用法详解

    这篇文章主要介绍了Jquery $when done then的用法详解的相关资料,本文还通过一个例子给大家介绍jquery when then(done) 用法，需要的朋友可以参考下
    2016-05-05
  • jQuery on()方法示例及jquery on()方法的优点

    jQuery on()方法示例及jquery on()方法的优点

    使用jquery on()方法绑定事件是官方推荐的一种方法，接下来跟着小编来学习jquery on()方法，小伙伴快来一起学习吧
    2015-08-08
  • jQuery控制元素隐藏和显示

    jQuery控制元素隐藏和显示

    本篇文章主要介绍了jQuery控制元素隐藏和显示的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论