jQuery事件

zhangyang0 2011-10-05

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.下拉列表应用

    功能: 

    - 多个列表框的联动效果

-获取下拉框的选择项$(“#selectoption:selected”).text()/val()

-为select元素添加option项

9.列表应用

功能:

-鼠标滑动效果的菜单导航条

-浮动提示框功能

-浮动提示框带箭头

-弹出菜单,鼠标离开不消失处理

10.选项卡应用

功能:

-单击某个选项卡,其下方区域显示对应的内容,其它内容隐藏

-选项卡的背景色与内容的背景色浑然一体

-siblings()的用法

11.提示框效果

功能:

-弹出框有title关闭,确定和取消按钮

-弹出框总是居中显示,页面大小发生变化时也居中

-弹出框时,背景遮挡效果

相关推荐

Web全栈笔记 / 0评论 2020-06-15