jQuery攻略之事件处理

（每一段jQuery对应一段html代码，以标记为准则,css为共用代码，每段代码需独立运行。html和css代码在文章尾部，如下例）


、

分别为按钮添加事件（c1）

$(document).ready(function () {
$('.bold').bind('click', function () {
alert("你点击了Bold按钮");
});

$('.italic').bind('click', function () {
alert("你点击了Italic按钮");
})
});

事件作用到两个按钮（c1）

$(document).ready(function () {
$('.button').bind('click', function () {
alert("你点击了" + $(this).text() + '按钮');
});
});

直接附加事件（c1）

$(document).ready(function () {
$('.button').click(function () {
alert("你点击了" + $(this).text() + '按钮');
});
});

利用事件对象的目标属性（c1）

$(document).ready(function () {
$('.button').click(function (event) {
var $target = $(event.target);
if ($target.is('.bold')) { alert("你点击的是Bold按钮") };
if ($target.is('.italic')) { alert("你点击的是Italic按钮") };
});
});

双击事件（c1）

$(document).ready(function () {
$('.button').dblclick(function (event) {
var $target = $(event.target);
if ($target.is('.bold')) { alert("你点击的是Bold按钮") };
if ($target.is('.italic')) { alert("你点击的是Italic按钮") };
});
});

自动触发事件（c1）trigger(eventType)

$(document).ready(function () {
$('.button').click(function (event) {
alert("自动点击了" + $(this).text() + '按钮');
});
$('.italic').trigger('click');
});

点击后禁用按钮（c1）unbind(eventType)

$(document).ready(function () {
$('.button').click(function (event) {
alert("你点击了" + $(this).text() + '按钮');
$('.button').unbind('click');
});
});

处理鼠标事件（c1）mousedown() mouseup() mouseover() mouseout()

$(document).ready(function () {
$('.button').mouseover(function (event) {
alert("鼠标经过了" + $(this).text() + '按钮');
});
});

按钮间的触发事件（c1）

$(document).ready(function () {
$('.bold').click(function () {
alert("触发的按钮是Bold,而不是Italic");
});
$('.italic').mouseover(function (event) {
$('.bold').click();
});
});

检测鼠标键位（左右键）(c1) event.button的属性 只针对鼠标事件

$(document).ready(function () {
$('.button').mousedown(function (event) {
if (event.button == 0) {
alert("你按下的是鼠标左键");
}
else {
alert("你按下的是鼠标右键");
}
});
});

检测鼠标点击屏幕的坐标（c2）event.screenX,event.screenY 事件属性

$(document).ready(function () {
$('img').mousedown(function (event) {
$('p').html("鼠标点击在图片上的横坐标是" +event.screenX + ",纵坐标是" + event.screenY);
});
});

动态突出显示文本（c3）css(property,value)

$(document).ready(function () {
$('.button').mouseover(function () {
$('p').css({
'color':'#FF0000',
'font-size':'24px'
});
});
});

图片的明亮与模糊变化，大小变化（c4）

$(document).ready(function () {
$('img').css('opacity', 0.4);

$('.button').bind('mouseover', function () {
$('img').css('opacity', 1.0);
});

$('.button').bind('mouseout', function () {
$('img').css('opacity', 0.4);
});

$('.button').bind('mousedown', function () {
$('img').css('width', function () { return $(this).width() - 100 });
$('img').css('height', function () { return $(this).height() - 80 });
});
});

获取和失去焦点（c5）focus(handle),blur(handle)

$(document).ready(function () {
$('.name').focus(function () {
$('p').text("请输入姓名！");
});

$('.name').blur(function () {
$('p').text("");
});
});

按钮上运用悬停效果，即通过变化css样式（c6）addClass(),removeClass()

$(document).ready(function () {
$('.button').hover(
function () {
$(this).addClass('hover');
},
function () {
$(this).removeClass('hover');
}
);
});

切换CSS样式（c7）切换 toggle(class),toggle(handle,handle)
方法一：toggleClass(class)

$(document).ready(function () {
$('.button').click(function () {
$(this).toggleClass('hover');
});
});

方法二：toggle(handle,handle)

$(document).ready(function () {
$('.button').toggle(
function () {
$(this).addClass('hover');
},
function () {
$(this).removeClass('hover');
}
);
});

创建基于图片的变换（c8）忽略超链接<a>的导航网址preventDefault()

$(document).ready(function () {
$('.roll').addClass('link');
$('.roll').hover(
function () {
$(this).addClass('hover-c8');
},
function () {
$(this).removeClass('hover-c8');
}
);

$('.roll').click(function (event) {
$(this).addClass('active');
event.preventDefault();
});
});

为响应事件而添加和删除文本（c9）remove()删除的内容包括html元素,即选择器的css类指向的内容

$(document).ready(function () {
$('.add-c9').click(function () {
$('.a').prepend('<p>aaaaa</p>');
});

$('.remove-c9').click(function () {
$('p').remove();
});
});

运用样式作为对事件的响应（c10）

$(document).ready(function () {
$('.button').hover(
function () {
$(this).addClass('hover');
},
function () {
$(this).removeClass('hover');
}
);

$('#boldbutton').click(function () {
$('#info').addClass('boldbutton');
$('#info').removeClass('italicbutton');
});

$('#italicbutton').click(function () {
$('#info').addClass('italicbutton');
$('#info').removeClass('boldbutton');
});
});

文字气泡（c11）

$(document).ready(function () {
$('.button').hover(
function () {
$(this).addClass('hover-c11');
$(this).css('border', '0px');
var $txt = $(this).text();
$(this).append('<span class="showtip">这是' + $txt + '菜单</span>');
//    $('<span class="showtip">这是' + $txt + '菜单</span>').appendTo($(this));
},
function () {
$(this).removeClass('hover-c11');
$(this).css('border', '2px solid');
$('.showtip').remove();
}
);
});

创建“返回顶部”连接（c12）insertAfter()

$(document).ready(function () {
$('<a href="#topofpage">返回顶部</a>').insertAfter('p');
$('<a id="topofpage" name="topofpage"></a>').prependTo('body');
});

动态显示与隐藏多文本（c13）
例子1 show(speed,callback),hide(speed,callback) speed包括slow,normal,fast

$(document).ready(function () {
$('span.readmore').text("更多...");
$('.message').hide();
$('span.readmore').click(function () {
$('.message').show('fast');
$(this).hide();
});
});

例子2 通过toggle(,)实现切换

$(document).ready(function () {
$('.message').hide();
$('.readmore').text("更多...");
$("span.readmore").toggle(
function () {
$('.message').show('slow');
$(this).text("隐藏...");
},
function () {
$('.message').hide('slow');
$(this).text("更多...");
}
);
});

例子3 fdaeIn(speed,callback),fadeOut(speed,callback) 通过透明度起作用

$(document).ready(function () {
$('.message').hide();
$('.readmore').text("更多...");
$("span.readmore").toggle(
function () {
$('.message').fadeIn('slow');
$(this).text("隐藏...");
},
function () {
$('.message').fadeOut('slow');
$(this).text("更多...");
}
);
});

动画效果切换显示文本（c14）

$(document).ready(function () {
$('.amuse').hide();
$('.sport').hide();
$('.polity').hide();

$('.amusebutton').mouseover(function () {
$('.amuse').show('slow');
});
$('.amusebutton').mouseout(function () {
$('.amuse').hide();
});

$('.sportbutton').mouseover(function () {
$('.sport').show('slow');
});
$('.sportbutton').mouseout(function () {
$('.sport').hide();
});

$('.politybutton').mouseover(function () {
$('.polity').show('slow');
});
$('.politybutton').mouseout(function () {
$('.polity').hide();
});
});

滑动效果替换文本（c15）slideUp(speed,callback),slideDown(speed,callback)

$(document).ready(function () {
$('p.message1').css({ 'border': '2px solid', 'text-align': 'center', 'font-weight': 'bold' }).hide();
$('p.message2').css({ 'backgroundColor': '#FF0000', 'color': '#FFF', 'text-align': 'center', 'font-weight': 'bold' }).click(function () {
$(this).slideUp('slow');
$('p.message1').slideDown('slow');
});
$('p.message1').click(function () {
$(this).slideUp('slow');
$('p.message2').slideDown('slow');
});
});

图片滚动（c16）animate(properties,speed,easing,callback) propertise指终值 easing指缓和，包含linear(线性),swing(摆动)
例子1：图片滚动后隐藏

$(document).ready(function () {
$('.image-c16').click(function () {
$('.image-c16').animate({ left: 600 }, 'slow')
$('.image-c16').slideUp('slow');
});
});

例子2：图片滚动并变大

$(document).ready(function () {
$('.image-c16').click(function (event) {
$('.image-c16').animate({ left:600, width: $(this).width() * 2, height: $(this).height() * 2 }, 'slow')
});
});

例子3：图片按原路径返回 fadeTo(speed,opacity,callback)调整选定元素的不透明度

$(document).ready(function () {
$('.image-c16').click(function (event) {
$('.image-c16').animate({ left: 600 }, 'slow', function () {
$('.image-c16').fadeTo('slow', 0);
$('.image-c16').fadeTo('slow', 1);
$('.image-c16').animate({ left: 0 }, 'slow');
});
});
});

确定键盘的键位（c17） keypress(handle),keydown(handle),keyup(handle)
例子1

$(document).ready(function () {
$('.infobox').keypress(function (event) {
$('p.keychar').text('按键的字符串格式是' + String.fromCharCode(event.keyCode));
$('p.keycode').text('按键的数字代码是' + event.keyCode);
});
});

例子2:按钮触发后，就手动触发键盘事件

$(document).ready(function () {
$('.button').text('单击后再输入').click(function () {
$('.infobox').keypress(function (event) {
$('p.keychar').text('按键的字符串格式是' + String.fromCharCode(event.keyCode));
$('p.keycode').text('按键的数字代码是' + event.keyCode);
});
});
});

防止事件冒泡（c18）
例子1：事件冒泡

$(document).ready(function () {
$('.div-c18').click(function () {
alert("你按下div事件");
});
$('.p-c18').click(function () {
alert("你按下p事件");
});
$('.span-c18').click(function () {
alert("你按下span事件");
});
});

例子2：防止事件冒泡,并控制事件发生在何处 event.target

$(document).ready(function () {
$('.div-c18').click(function (event) {
var $target = $(event.target);
if ($target.is('.div-c18')) {
alert("你按下div事件");
};
if ($target.is('.p-c18')) {
alert("你按下p事件");
};
if ($target.is('.span-c18')) {
alert("你按下span事件");
}
});
});

链接多个活动 逐个编写jQuery包装器的方法
例子1：克隆语句，并运用样式css于副本

$(document).ready(function () {
$('.div-c18').children().clone().prependTo('.div-c18').addClass('hover-c18');
});

例子2：克隆语句，并运用样式css于原本 end() 实现退回到上一个包装集作为返回值

$(document).ready(function () {
$('.div-c18').children().clone().prependTo('.div-c18').end().addClass('hover-c18');
});

html代码

<form id="form1" runat="server">
<div>
<%--c1 --%>
<span class="bold button">Bold</span>
<span class="italic button">Italic</span>

<%--c2--%>
<img src="Img/Img1.jpg" alt="图片"/>
<p></p>

<%--c3--%>
<span class="button">鼠标经过</span>
<p>动态突显文本</p>

<%--c4--%>
<span class="button">图片变化</span>
<img  src="Img/Img1.jpg" alt="图片"/>

<%--c5--%>
姓名：<input class="name" type="text"/>
<p></p>

<%--c6--%>
<span class="button">悬停效果</span>

<%--c7--%>
<span class="button">切换CSS</span>

<%--c8--%>
<a href="www.baidu.com"><span class="roll"></span></a>

<%--c9--%>
<span class="add-c9 button">事件添加文本</span>
<span class="remove-c9 button">事件删除文本</span>
<div class="a"></div>

<%--c10--%>
<span class="button" id="boldbutton">粗体</span>
<span class="button" id="italicbutton">斜体</span>
<div id="info">我是一只小鸟，想飞到远方</div>

<%--c11 --%>
<span class="bold button">Bold</span>
<span class="italic button">Italic</span>

<%--c12--%>
<h1>
<p>a<br />b<br />c<br />d<br />e<br />f<br />g<br />h<br />j<br />k<br />l<br />m<br />n<br />o<br />p<br />q<br />w<br />r<br />t<br /></p>
</h1>

<%--c13--%>
<div>动态显示与隐藏多文本</div>
<span class="readmore"></span>
<div class="message">
<p>a<br />b<br />c<br />d<br />e<br />f<br />g<br />h<br />j<br />k<br />l<br />m<br />n<br />o<br />p<br />q<br />w<br />r<br />t<br /></p>
</div>
<span class="readless"></span>

<%--c14--%>
<span class="button-c14 amusebutton">娱乐</span>
<span class="button-c14 sportbutton">体育</span>
<span class="button-c14 politybutton">政治</span>
<br /><br />
<p class="amuse">娱乐新闻栏目</p>
<p class="sport">体育新闻栏目</p>
<p class="polity">政治新闻栏目</p>

<%--c15--%>
<p class="message1">略读半卷书</p>
<p class="message2">坐井说天阔</p>

<%--c16--%>
<img src="Img/BALLOON.BMP" class="image-c16" alt=""/>

<%--c17--%>
<input type="text" class="infobox"/>
<span class="button"></span>
<p class="keychar"></p>
<p class="keycode"></p>

<%--c18--%>
<div class="div-c18">Div事件
<p class="p-c18">P事件<span class="span-c18">Span事件</span><br /></p>
</div>
</div>
</form>

css代码

body {
}

.p
{
color:Blue;
}

.highlight
{
font-size:large;
color:#FF0000;
}
#list
{
}
.allmem
{

}
.selectedmem
{
}
.sorted
{
}
/*a5*/
.firstp{}
.secondp{}

/*a6*/
.firstarr{}
.secondarr{}
.comarr{}

/*a7*/
.origarr{}
.arrstring{}
.partstring{}

/*a8*/
.listofstud{}

/*第3章*/
.bold{}
.italic{}
.button
{
width:100px;
float:left;
text-align:center;
margin:5px;
border:2px solid;
font-weight:bold;
}
.name{}
.hover{ cursor:crosshair; color:Blue; background-color:Yellow;}/*c6,c7*/

/*c8*/
.roll{}
.link{display:block; width:170px; height:150px; background-image:url(Img/Img1.jpg); background-repeat:no-repeat; background-position:left top;}
.hover-c8{ display:block; width:400px; height:350px; background:url(Img/Img2.jpg); background-repeat:no-repeat; background-position:left top;}
.active{ opacity:0.4;}

/*c9*/
.add-c9{}
.remove-c9{}

/*c10*/
.boldbutton{ font-weight:bold;}
.italicbutton{ font-style:italic;}

/*c11*/
.hover-c11{ color:Red; background:url(Img/BALLOON.BMP); background-repeat:no-repeat; background-position:bottom;}
.showtip{ display:block; margin:16px;}

/*c14*/
.button-c14
{
width:100px;
float:left;
text-align:center;
margin:5px;
border:2px solid;
font-weight:bold;}
.amusebutton{}
.sportbutton{}
.politybutton{}
.show-c14{ display:block; margin:16px;color:Red; width:100px; overflow:visible;}

/*c16*/
.image-c16{ position:relative;}

/*c18*/
.hover-c18{ color:Blue; font-weight:bold;}