读<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>


分享给朋友:
您可能感兴趣的文章:
随机阅读: