读<jquery 权威指南>[2]-事件

1. 事件冒泡

阻止事件冒泡的两种方式：

event.stopPropagation();
return false ;

2. 绑定事件——bind(type,[data],function)

type为一个或多个事件类型的字符串，data是作为event.data属性值传递给事件对象的额外对象。

一个元素绑定多个事件，可用空格隔开。

$("#btn").bind( "click mouseover", function () { ...);

通过映射方式为同一元素绑定多个事件。

       $(function () {

            $( ".txt").bind({

            "focus": function () {

                    $( "#divTip").html("请输入" ).show();

                },

            "blur":function () {

                    $( "#divTip")

                        .show()

                        .html( "合法");

                }

            });

        });

第二个参数data的使用。

    var info = { name: 'Cathy', date: '2014-1-24' };

    $(function () {

        $("#test").bind("click", info, function (event) {

            $("#divTip").show().html(event.data.name + "," + event.data.date);

        });

    });

3.事件切换

hover:鼠标悬停与鼠标移除事件切换。

    $(function () {

        $(".clsTitle").hover(

        function () {

            $(".clsContent").show();

        },

        function () {

            $(".clsContent").hide();

        });

    });

toggle:依次顺序调用N个函数，最后一个调用完成后再从第一个轮流执行。

    $(function () {

        $("#divTest").toggle(

            function () {

                alert(1);

            },

            function () {

                alert(2);

            },

            function () {

                alert(3);

            }

        );

    });

4.移除事件——unbind(type,func)

参数说明：type为要移除的事件类型，func为要移除的事件处理函数。如果func为空，则移除元素所有的事件。

 function func() {

        $("#divTip").append("点击按钮2");

    }

    $(function () {

        $("#Button1").click(function () {

            $("#divTip").append("点击按钮1");

        });

        $("#Button2").click(func);

        $("#Button3").click(function () {

            $("input").unbind("click", func);

        });

    });

5.其他事件

one(type,[data],func)——为元素绑定只执行一次的事件。

trigger(type,[data])——在所选择的元素上触发指定类型的事件。

$(function () {

var i = 1;

function btn_Click() {

this.value = i++;

            }

            $( "input").one("click" , btn_Click);

            $( "input").bind("click" , btn_Click);

            $( "input").trigger("click" );

        })

6.实例应用

①选项卡效果

<body>

<ul id="menu">

<li class="tabFocus">家居 </li>

<li> 电器</li >

<li> 二手</li >

</ul>

<ul id="content">

<li class="conFocus">我是家居的内容 </li>

<li> 欢迎您来到电器城 </li>

<li> 二手市场，产品丰富多彩 </li>

</ul>

</body>

html Body

<script type="text/javascript">

        $( function () {

            $( "#menu li").each(function (index) {

                $( this).click(function () {

                    $( this).addClass("tabFocus" ).siblings().removeClass("tabFocus");

                    $( "#content li:eq(" + index + ")" ).show().siblings().hide();

                });

            });

        });

</script>

②屏幕中间弹窗遮罩

     <style type="text/css">

            body {

                font-size: 13px;

            }

            .divShow {

                line-height: 32px;

                height: 32px;

                background-color: #eee;

                width: 280px;

                padding-left: 10px;

            }

                .divShow span {

                    padding-left: 50px;

                }

            .dialog {

                width: 360px;

                border: solid 5px #666;

                position: absolute;

                display: none;

                z-index: 101;

            }

                .dialog .title {

                    background-color: #fbaf15;

                    padding: 10px;

                    color: #fff;

                    font-weight: bold;

                }

                    .dialog .title img {

                        float: right;

                    }

                .dialog .content {

                    background-color: #fff;

                    padding: 25px;

                    height: 60px;

                }

                    .dialog .content img {

                        float: left;

                    }

                    .dialog .content span {

                        float: left;

                        padding-top: 10px;

                        padding-left: 10px;

                    }

                .dialog .bottom {

                    text-align: right;

                    padding: 10px 10px 10px 0px;

                    background-color: #eee;

                }

            .mask {

                width: 100%;

                height: 100%;

                background-color: #000;

                position: absolute;

                top: 0px;

                left: 0px;

                filter: alpha(opacity=30);

                display: none;

                z-index: 100;

            }

            .btn {

                border: #666 1px solid;

                padding: 2px;

                width: 65px;

                filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);

            }

        </style>

        <div class="divShow">

            <input id="Checkbox1" type="checkbox" />

            <a href="#">这是一条可删除的记录</a>

            <span>

                <input id="Button1" type="button" value="删除" class="btn" />

            </span>

        </div>

        <div class="mask"></div>

        <div class="dialog">

            <div class="title">

                <img src="Images/close.gif" alt="点击可以关闭" />删除时提示

            </div>

            <div class="content">

                <img src="Images/delete.jpg" alt="" /><span>您真的要删除该条记录吗？</span>

            </div>

            <div class="bottom">

                <input id="Button2" type="button" value="确定" class="btn"/>&nbsp;&nbsp;

                <input id="Button3" type="button" value="取消" class="btn"/>

            </div>

        </div>

html

        <script type="text/javascript">

            $(function () {

                $("#Button1").click(function () { //注册删除按钮点击事件

                    $(".mask").show(); //显示背景色

                    showDialog(); //设置提示对话框的Top与Left

                    $(".dialog").show(); //显示提示对话框

                })

                /*

                *根据当前页面与滚动条位置，设置提示对话框的Top与Left

                */

                function showDialog() {

                    var objW = $(window); //当前窗口

                    var objC = $(".dialog"); //对话框

                    var brsW = objW.width();

                    var brsH = objW.height();

                    var sclL = objW.scrollLeft();

                    var sclT = objW.scrollTop();

                    var curW = objC.width();

                    var curH = objC.height();

                    //计算对话框居中时的左边距

                    var left = sclL + (brsW - curW) / 2;

                    //计算对话框居中时的上边距

                    var top = sclT + (brsH - curH) / 2;

                    //设置对话框在页面中的位置

                    objC.css({ "left": left, "top": top });

                }

                $(window).resize(function () {//页面窗口大小改变事件

                    if (!$(".dialog").is(":visible")) {

                        return;

                    }

                    showDialog(); //设置提示对话框的Top与Left

                });

                $(".title img").click(function () { //注册关闭图片点击事件

                    $(".dialog").hide();

                    $(".mask").hide();

                })

                $("#Button3").click(function () {//注册取消按钮点击事件

                    $(".dialog").hide();

                    $(".mask").hide();

                })

                $("#Button2").click(function () {//注册确定按钮点击事件

                    $(".dialog").hide();

                    $(".mask").hide();

                    if ($("input:checked").length != 0) {//如果选择了删除行

                        $(".divShow").remove(); //删除某行数据

                    }

                })

            })

        </script>

读<jquery 权威指南>[2]-事件的更多相关文章

读<jquery 权威指南>[1]-选择器及DOM操作
今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...
读<jquery 权威指南>[3]-动画
一. 显示与隐藏——hide(),show() 1. 方法: hide(speed,[callback]); show(speed,[callback]); 说明:这两个方法还可以实现带动画效果的显示 ...
读<jquery 权威指南>[4]-Ajax
一.获取异步数据 jQuery可以从服务器异步获得静态数据. ①load() $.load(url,data,callback) url要加载的页面地址, data发送到服务器的数据key/value ...
读<jQuery 权威指南>[6]--实用工具函数
官方地址:http://api.jquery.com/category/utilities/ 一.数组和对象操作 1. $.each——遍历 $.each(obj,function(param1,pa ...
读<jQuery 权威指南>[5]-插件
一.说明 jQuery插件官网:http://plugins.jquery.com/ 使用插件时引用顺序:插件引用要位于主jquery库之后. 二.插件应用实例演示插件jquery.validate ...
读<jquery 权威指南>[7]-性能优化与最佳实践
一.优化选择器执行速度 1. 优先使用ID选择器和标记选择器使用选择器时应该首选ID选择器($("#id")),其次是标记选择器($("div")),最后再选 ...
跟小静读《jQuery权威指南》——目录
前言 2014年开始了,年底给自己制订的学习计划,第一步先从学习<jQuery权威指南>开始. jQuery大家都很比较熟悉,但是我经常是边用的时候边对照着API,这次找本书通读一遍,记录 ...
《jQuery权威指南》学习笔记之第2章 jQuery选择器
2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制 1.代码更简单示例2-1 使用javascript实现隔行变色 < ...
[在读] javascript权威指南第六版
耽搁了有大半年没看,记得当时看到5分之2了吧.权威指南是不管读几遍都能觉得有新收获的书^^

随机推荐

使用maven来管理您的java项目
maven是一个项目管理工具,使用maven可以自动管理java项目的整个生命周期,包括编译.构建.测试.发布和报告等.在大型项目开发中,使用maven来管理是必不可少的. 一.安装maven 1.W ...
Count Primes ----质数判断
质数的判断埃拉托斯特尼筛法: 算法的过程如下图所示: 我们从2开始遍历到根号n,先找到第一个质数2,然后将其所有的倍数全部标记出来,然后到下一个质数3,标记其所有倍数,依次类推,直到根号n,此时数组 ...
jquery隐藏table表格的某一列
jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列
使用plsql执行计划进行sql调优(转载)
一段SQL代码写好以后,可以通过查看SQL的执行计划,初步预测该SQL在运行时的性能好坏,尤其是在发现某个SQL语句的效率较差时,我们可以通过查看执行计划,分析出该SQL代码的问题所在. 那么,作为开 ...
Azure web role, work role 以及其他role
Azure web role, work role 以及其他role 如果没有创建过web role 和work role的话可以参考如下文章来创建一下web role 和work role. htt ...
Asp.net MVC进入请求管道的过程
Asp.net MVC进入请求管道的过程 Asp.Net MVC 跟AspNet 入口解释 Asp.Net MVC请求处理过程 mvc 请求模型 mvc的原理 mvc模型 NewMVCPipleLin ...
SQL递归查询(with cte as)
with cte as ( select Id,Pid,DeptName,0 as lvl from Department where Id = 2 union all select d.Id,d.P ...
LeetCode----202. Happy Number(Java)
package isHappy202; /* * Write an algorithm to determine if a number is "happy". A happy n ...
Java虚拟机学习（1）：体系结构内存模型
一:Java技术体系模块图 Java技术体系模块图二:JVM内存区域模型 1.方法区也称"永久代" ."非堆", 它用于存储虚拟机加载的类信息.常量.静态 ...
基于ubuntu-2.6.35内核的SDIO-WiFi驱动移植
一.移植环境: 1.主机:Ubuntu 10.10发行版 2.目标机:FS_S5PC100平台 3.交叉编译工具:arm-cortex_a8-linux-gn ...