`

jQuery事件

jquery冒泡现象jquery事件 
阅读更多

back>>

1. 事件机制
    事件中的冒泡现象：

<body> 
    <div> 
        <input id="btnShow" type="button" value="点击" class="btn" /> 
    </div> 
    <div class="clsShow"></div> 
</body>
 
<script type="text/javascript"> 
        $(function() { 
            var intI = 0; //记录执行次数 
            $("body,div,#btnShow").click(function(event) {//点击事件 
                intI++; //次数累加 
                $(".clsShow") 
                .show()//显示 
                .html("您好，欢迎来到jQuery世界!")//设置内容 
                .append("<div>执行次数 <b>" + intI + "</b> </div>"); //追加文本 
                //event.stopPropagation();//阻止冒泡过程 
//return false; 
            }) 
        }) 
</script>

 

    点击按钮时，会显示执行3次。虽然点击的是按钮，按钮外围的div和body元素也会被触发，整个事件波及的过程就像水泡一样向外冒，故称为冒泡过程。
    可通过event.stopPropagaton()或return false停止冒泡过程。

 

2. 页面载入事件
    ready()和onload的区别：
     ready()的几种写法：

$(document).ready(function(){….}) 
$(function(){….}) 
jQuery(document).ready(function(){….}) 
jQuery(function(){….})

 

3. 绑定事件
    bind(type,[data],fn)，type是事件类型，其值可为：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.
    data是作为event.data属性值传递给事件对象的额外数据对象，fn是事件处理函数。

$(function() { 
            $("#btnBind").bind("click mouseout", function() { 
                $(this).attr("disabled", "disabled"); //按钮不可用 
            }) 
})

 
    可以通过传入一个映射，对所选对象绑定多个事件处理函数：

$(".txt").bind({ focus: function() { 
            $("#divTip") 
            .show()//显示 
            .html("执行的是focus事件");//设置文本 
            }, 
            change: function() { 
            $("#divTip") 
            .show()//显示 
            .html("执行的是change事件");//设置文本 
            } 
})

      data参数的应用：

var message = "执行的是focus事件"; 
$(".txt").bind("focus", { msg: message }, function(event) { 
                $("#divTip") 
                .show()//显示 
            .html(event.data.msg); //设置文本 
            }); 
            message = "执行的是change事件"; 
            $('.txt').bind('change', { msg: message }, function(event) { 
                $("#divTip").show()//显示 
            .html(event.data.msg); //设置文本 
});

  
   4. 切换事件
    有两个方法用于事件切换：hover()和toggle()
    hover(over,out)方法可以使元素在鼠标悬停与鼠标移出的事件中进行切换
    $("a").hover(function(){},function(){})
    当鼠标移动到所选元素上面时，执行第一个函数，移出元素时，执行指定的第二个元素
    等价于mouserenter和mouseleave事件
    $("a").mouseenter(function(){})
    $("a").mouseleave(function(){})

    toggle()方法，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数轮番调用 

$(function() { 
            $("img").toggle(function() { 
                $("img").attr("src", "Images/img05.jpg"); 
                $("img").attr("title", this.src); 
            }, function() { 
                $("img").attr("src", "Images/img06.jpg"); 
                $("img").attr("title", this.src); 
            }, function() { 
                $("img").attr("src", "Images/img07.jpg"); 
                $("img").attr("title", this.src); 
            }) 
})

 

5. 移除事件
    unbind([type],[fn]) 如果该方法没有参数，则移除所有绑定的时间，如果带有参数type，则移除该参数所指定的事件类型，如果带有参数fn，则只移除绑定时指定的函数fn。

$(function() { 
            function oClick() { //自定义事件 
                $("#divTip").append("<div>按钮二的单击事件</div>"); 
            } 
            $("input:eq(0)").bind("click", function() { //绑定单击事件 
                $("#divTip").append("<div>按钮一的单击事件</div>"); 
            }); 
            $("input:eq(1)").bind("click", oClick); //绑定自定义事件 
            $("input:eq(2)").bind("click", function() { 
             $("input").unbind("click",oClick); //只移除绑定是指定函数oClick时间的元素 
            }); 
})

 
6. 其它事件
    one(type,[data],fn)方法是为所选的元素绑定一个仅触发一次的处理函数，首次触发有效，再次触发无效

 $(function() { 
            function btn_Click() { //自定义事件 
alert(this.value); 
                this.value = "010-12345678" 
            } 
            $("input").one("click", btn_Click); //绑定自定义事件 
})

  
    如果换成$("input").bind("click", btn_Click);每次点击都会有弹出框

    trigger(type,[data])方法，一般在DOM加载完毕后，自动执行一些人性化的操作，如：文本框处于焦点中

$(function() { 
            var oTxt = $("input"); //获取文本框 
            oTxt.trigger("focus/select"); //自动选中文本框 
            oTxt.bind("btn_Click", function() {//编写文本框自定义事件 
                var txt = $(this).val(); //获取自身内容 
                $("#divTip").html(txt); //显示在页面中 
            }) 
            oTxt.trigger("btn_Click"); //自动触发自定义事件 
})

  
    如果不希望trigger()事件自动执行，可使用triggerHandler()方法。
7. 表单应用
    功能：
    - 邮箱地址文本框
    - 邮箱地址文本框获取焦点、丢失焦点时样式的变换
    - 邮箱名格式的el表达式验证
8. 下拉列表应用
    功能： 

    - 多个列表框的联动效果
    - 获取下拉框的选择项$(“#select option:selected”).text()/val()
    - 为select元素添加option项
9. 列表应用
    功能：
    - 鼠标滑动效果的菜单导航条
    - 浮动提示框功能
    - 浮动提示框带箭头
    - 弹出菜单，鼠标离开不消失处理
10. 选项卡应用
    功能：
    - 单击某个选项卡，其下方区域显示对应的内容，其它内容隐藏
    - 选项卡的背景色与内容的背景色浑然一体
    - siblings()的用法
11. 提示框效果
    功能：
    - 弹出框有title 关闭，确定和取消按钮
    - 弹出框总是居中显示，页面大小发生变化时也居中
    - 弹出框时，背景遮挡效果

分享到：
| Jquery Dom操作
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery事件函数共4页.pdf.zip

    《jQuery事件函数共4页.pdf》是一份详细探讨jQuery事件处理的资料，它涵盖了JavaScript库jQuery中的关键事件处理概念和函数。jQuery简化了DOM（文档对象模型）事件处理，使得在网页交互中添加、移除和触发事件变得...

    jQuery事件及绑定.pptx

    jQuery事件基础 1、jQuery事件概述 jQuery对JavaScript操作DOM事件进行了封装，形成了更好的事件处理机制； 包括常用事件、事件绑定与解绑等。jQuery事件处理方法是jQuery的核心函数。 常用事件方法（教材P263表A-4...

    jQuery 事件

    jQuery 事件 jQuery 是为事件处理特别设计的。 什么是事件？ 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 实例： 在元素上移动鼠标。 选取单选按钮 点击元素 ...

    jQuery事件和动画.ppt

    jQuery事件和动画.，对刚学习的同学帮助很大

    JQuery事件Demo

    **jQuery事件Demo详解** 在Web开发中，JavaScript的事件处理是构建交互式用户界面的关键技术。jQuery库大大简化了这一过程，提供了丰富的API和方法来处理DOM（文档对象模型）中的事件。本篇文章将深入探讨jQuery...

    WEB开发 之 jQuery 事件.docx

    总的来说，jQuery事件处理是Web开发中增强用户体验的关键工具，通过合理利用这些功能，开发者可以创建出响应迅速、交互丰富的网站和应用程序。了解并熟练掌握jQuery的事件处理机制，对于提升Web开发效率和代码质量...

    jquery快速学三(事件与动画)

    通过以上对jQuery事件处理和动画效果的讲解，相信你已经对这两个主题有了全面的理解。结合实际的HTML文档，不断练习和探索，你将能熟练运用jQuery，提升网页交互体验。在实践中，不断学习，持续进步，是成为优秀的...

    triggerTracker, 用于跟踪jQuery事件的jQuery调试工具.zip

    triggerTracker, 用于跟踪jQuery事件的jQuery调试工具 triggerTrackerTriggerTracker是跟踪jQuery事件的工具。 它是一个单独的JavaScript文件，当加载时，它向与jQuery事件触发和事件处理程序相关的浏览器的控制台...

    jQuery学习5 jQuery事件模型

    jQuery事件模型是JavaScript库jQuery中的核心功能之一，它简化了事件处理程序的创建和管理，使得跨浏览器的事件处理变得更加简单。以下是对jQuery事件模型的详细说明： 1. **统一事件处理程序方法**：jQuery提供了...

    jQuery事件和动画.md

    jQuery事件和动画.md

    a1392558812#myShare#21.jquery事件处理1

    jquery事件处理。

    jquery-事件冒泡

    jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡...

    jquery事件与动画资料

    jquery事件与动画，初学者不明白怎么用看看pdf吧，这是老师发的

    理解jquery事件冒泡

    一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念，老手来说这当然是最基本的概念，但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡...

    第17周-第17章节-JQuery事件之组织事件的发生.avi

    第17周-第17章节-JQuery事件之组织事件的发生.avi

    jQuery事件对象的属性和方法详解

    jQuery事件对象的属性和方法，供大家参考，具体内容如下 事件对象的属于与方法有很多，但是我们经常用的只有那么几个，这里我主要说下作用与区别 event.type：获取事件的类型 触发元素的事件类型 $("a").click...

    jquery效果事件

    三、jQuery事件 1. 基本事件绑定：jQuery提供了`.on()`方法来绑定事件。例如，`$("#myButton").on("click", function() { ... })`表示当id为"myButton"的元素被点击时，执行匿名函数内的代码。 2. 鼠标事件：常见...

    自己收集的26个一些少见的jquery事件事例

    jquery事件种类繁多，有些事件的实用性在我们工作过程中都常用到，但实用性不强的，工作过程用不到的事件很多被遗忘，等真用时，有可能都不知道有这功能。我这里针对不常用的一些事件进行梳理整理一下，共26个。喜欢...

    可制作炫酷页面滚动效果的jQuery事件插件

    插件描述：该插件可制作炫酷页面滚动效果，包含有一组预置的jQuery事件，通过这些事件，可以在页面滚动时为指定元素制作相应的动画效果。 参考示例：http://www.jq22.com/jquery-info6220

Magicbox
Global site tag (gtag.js) - Google Analytics