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;}

 


 

posted @ 2012-02-26 22:05  Ghost Soar  阅读(246)  评论(0编辑  收藏