&＃xff08;每一段jQuery对应一段html代码&＃xff0c;以标记为准则,css为共用代码&＃xff0c;每段代码需独立运行。html和css代码在文章尾部&＃xff0c;如下例&＃xff09;
、
分别为按钮添加事件&＃xff08;c1&＃xff09;
$(document).ready(function () {
$(&＃39;.bold&＃39;).bind(&＃39;click&＃39;, function () {
alert("你点击了Bold按钮");
});
$(&＃39;.italic&＃39;).bind(&＃39;click&＃39;, function () {
alert("你点击了Italic按钮");
})
});
事件作用到两个按钮&＃xff08;c1&＃xff09;
$(document).ready(function () {
$(&＃39;.button&＃39;).bind(&＃39;click&＃39;, function () {
alert("你点击了" &＃43; $(this).text() &＃43; &＃39;按钮&＃39;);
});
});
直接附加事件&＃xff08;c1&＃xff09;
$(document).ready(function () {
$(&＃39;.button&＃39;).click(function () {
alert("你点击了" &＃43; $(this).text() &＃43; &＃39;按钮&＃39;);
});
});
利用事件对象的目标属性&＃xff08;c1&＃xff09;
$(document).ready(function () {
$(&＃39;.button&＃39;).click(function (event) {
var $target &＃61; $(event.target);
if ($target.is(&＃39;.bold&＃39;)) { alert("你点击的是Bold按钮") };
if ($target.is(&＃39;.italic&＃39;)) { alert("你点击的是Italic按钮") };
});
});
双击事件&＃xff08;c1&＃xff09;
$(document).ready(function () {
$(&＃39;.button&＃39;).dblclick(function (event) {
var $target &＃61; $(event.target);
if ($target.is(&＃39;.bold&＃39;)) { alert("你点击的是Bold按钮") };
if ($target.is(&＃39;.italic&＃39;)) { alert("你点击的是Italic按钮") };
});
});
自动触发事件&＃xff08;c1&＃xff09;trigger(eventType)
$(document).ready(function () {
$(&＃39;.button&＃39;).click(function (event) {
alert("自动点击了" &＃43; $(this).text() &＃43; &＃39;按钮&＃39;);
});
$(&＃39;.italic&＃39;).trigger(&＃39;click&＃39;);
});
点击后禁用按钮&＃xff08;c1&＃xff09;unbind(eventType)
$(document).ready(function () {
$(&＃39;.button&＃39;).click(function (event) {
alert("你点击了" &＃43; $(this).text() &＃43; &＃39;按钮&＃39;);
$(&＃39;.button&＃39;).unbind(&＃39;click&＃39;);
});
});
处理鼠标事件&＃xff08;c1&＃xff09;mousedown() mouseup() mouseover() mouseout()
$(document).ready(function () {
$(&＃39;.button&＃39;).mouseover(function (event) {
alert("鼠标经过了" &＃43; $(this).text() &＃43; &＃39;按钮&＃39;);
});
});
按钮间的触发事件&＃xff08;c1&＃xff09;
$(document).ready(function () {
$(&＃39;.bold&＃39;).click(function () {
alert("触发的按钮是Bold,而不是Italic");
});
$(&＃39;.italic&＃39;).mouseover(function (event) {
$(&＃39;.bold&＃39;).click();
});
});
检测鼠标键位&＃xff08;左右键&＃xff09;(c1) event.button的属性 只针对鼠标事件
$(document).ready(function () {
$(&＃39;.button&＃39;).mousedown(function (event) {
if (event.button &＃61;&＃61; 0) {
alert("你按下的是鼠标左键");
}
else {
alert("你按下的是鼠标右键");
}
});
});
检测鼠标点击屏幕的坐标&＃xff08;c2&＃xff09;event.screenX,event.screenY 事件属性
$(document).ready(function () {
$(&＃39;img&＃39;).mousedown(function (event) {
$(&＃39;p&＃39;).html("鼠标点击在图片上的横坐标是" &＃43;event.screenX &＃43; ",纵坐标是" &＃43; event.screenY);
});
});
动态突出显示文本&＃xff08;c3&＃xff09;css(property,value)
$(document).ready(function () {
$(&＃39;.button&＃39;).mouseover(function () {
$(&＃39;p&＃39;).css({
&＃39;color&＃39;:&＃39;#FF0000&＃39;,
&＃39;font-size&＃39;:&＃39;24px&＃39;
});
});
});
图片的明亮与模糊变化&＃xff0c;大小变化&＃xff08;c4&＃xff09;
$(document).ready(function () {
$(&＃39;img&＃39;).css(&＃39;opacity&＃39;, 0.4);
$(&＃39;.button&＃39;).bind(&＃39;mouseover&＃39;, function () {
$(&＃39;img&＃39;).css(&＃39;opacity&＃39;, 1.0);
});
$(&＃39;.button&＃39;).bind(&＃39;mouseout&＃39;, function () {
$(&＃39;img&＃39;).css(&＃39;opacity&＃39;, 0.4);
});
$(&＃39;.button&＃39;).bind(&＃39;mousedown&＃39;, function () {
$(&＃39;img&＃39;).css(&＃39;width&＃39;, function () { return $(this).width() - 100 });
$(&＃39;img&＃39;).css(&＃39;height&＃39;, function () { return $(this).height() - 80 });
});
});
获取和失去焦点&＃xff08;c5&＃xff09;focus(handle),blur(handle)
$(document).ready(function () {
$(&＃39;.name&＃39;).focus(function () {
$(&＃39;p&＃39;).text("请输入姓名&＃xff01;");
});
$(&＃39;.name&＃39;).blur(function () {
$(&＃39;p&＃39;).text("");
});
});
按钮上运用悬停效果&＃xff0c;即通过变化css样式&＃xff08;c6&＃xff09;addClass(),removeClass()
$(document).ready(function () {
$(&＃39;.button&＃39;).hover(
function () {
$(this).addClass(&＃39;hover&＃39;);
},
function () {
$(this).removeClass(&＃39;hover&＃39;);
}
);
});
切换CSS样式&＃xff08;c7&＃xff09;切换 toggle(class),toggle(handle,handle)
方法一&＃xff1a;toggleClass(class)
$(document).ready(function () {
$(&＃39;.button&＃39;).click(function () {
$(this).toggleClass(&＃39;hover&＃39;);
});
});
方法二&＃xff1a;toggle(handle,handle)
$(document).ready(function () {
$(&＃39;.button&＃39;).toggle(
function () {
$(this).addClass(&＃39;hover&＃39;);
},
function () {
$(this).removeClass(&＃39;hover&＃39;);
}
);
});
创建基于图片的变换&＃xff08;c8&＃xff09;忽略超链接的导航网址preventDefault()
$(document).ready(function () {
$(&＃39;.roll&＃39;).addClass(&＃39;link&＃39;);
$(&＃39;.roll&＃39;).hover(
function () {
$(this).addClass(&＃39;hover-c8&＃39;);
},
function () {
$(this).removeClass(&＃39;hover-c8&＃39;);
}
);
$(&＃39;.roll&＃39;).click(function (event) {
$(this).addClass(&＃39;active&＃39;);
event.preventDefault();
});
});
为响应事件而添加和删除文本&＃xff08;c9&＃xff09;remove()删除的内容包括html元素,即选择器的css类指向的内容
$(document).ready(function () {
$(&＃39;.add-c9&＃39;).click(function () {
$(&＃39;.a&＃39;).prepend(&＃39;
aaaaa
&＃39;);});
$(&＃39;.remove-c9&＃39;).click(function () {
$(&＃39;p&＃39;).remove();
});
});
运用样式作为对事件的响应&＃xff08;c10&＃xff09;
$(document).ready(function () {
$(&＃39;.button&＃39;).hover(
function () {
$(this).addClass(&＃39;hover&＃39;);
},
function () {
$(this).removeClass(&＃39;hover&＃39;);
}
);
$(&＃39;#boldbutton&＃39;).click(function () {
$(&＃39;#info&＃39;).addClass(&＃39;boldbutton&＃39;);
$(&＃39;#info&＃39;).removeClass(&＃39;italicbutton&＃39;);
});
$(&＃39;#italicbutton&＃39;).click(function () {
$(&＃39;#info&＃39;).addClass(&＃39;italicbutton&＃39;);
$(&＃39;#info&＃39;).removeClass(&＃39;boldbutton&＃39;);
});
});
文字气泡&＃xff08;c11&＃xff09;
$(document).ready(function () {
$(&＃39;.button&＃39;).hover(
function () {
$(this).addClass(&＃39;hover-c11&＃39;);
$(this).css(&＃39;border&＃39;, &＃39;0px&＃39;);
var $txt &＃61; $(this).text();
$(this).append(&＃39;这是&＃39; &＃43; $txt &＃43; &＃39;菜单&＃39;);
// $(&＃39;这是&＃39; &＃43; $txt &＃43; &＃39;菜单&＃39;).appendTo($(this));
},
function () {
$(this).removeClass(&＃39;hover-c11&＃39;);
$(this).css(&＃39;border&＃39;, &＃39;2px solid&＃39;);
$(&＃39;.showtip&＃39;).remove();
}
);
});
创建“返回顶部”连接&＃xff08;c12&＃xff09;insertAfter()
$(document).ready(function () {
$(&＃39;返回顶部&＃39;).insertAfter(&＃39;p&＃39;);
$(&＃39;&＃39;).prependTo(&＃39;body&＃39;);
});
动态显示与隐藏多文本&＃xff08;c13&＃xff09;
例子1 show(speed,callback),hide(speed,callback) speed包括slow,normal,fast
$(document).ready(function () {
$(&＃39;span.readmore&＃39;).text("更多...");
$(&＃39;.message&＃39;).hide();
$(&＃39;span.readmore&＃39;).click(function () {
$(&＃39;.message&＃39;).show(&＃39;fast&＃39;);
$(this).hide();
});
});
例子2 通过toggle(,)实现切换
$(document).ready(function () {
$(&＃39;.message&＃39;).hide();
$(&＃39;.readmore&＃39;).text("更多...");
$("span.readmore").toggle(
function () {
$(&＃39;.message&＃39;).show(&＃39;slow&＃39;);
$(this).text("隐藏...");
},
function () {
$(&＃39;.message&＃39;).hide(&＃39;slow&＃39;);
$(this).text("更多...");
}
);
});
例子3 fdaeIn(speed,callback),fadeOut(speed,callback) 通过透明度起作用
$(document).ready(function () {
$(&＃39;.message&＃39;).hide();
$(&＃39;.readmore&＃39;).text("更多...");
$("span.readmore").toggle(
function () {
$(&＃39;.message&＃39;).fadeIn(&＃39;slow&＃39;);
$(this).text("隐藏...");
},
function () {
$(&＃39;.message&＃39;).fadeOut(&＃39;slow&＃39;);
$(this).text("更多...");
}
);
});
动画效果切换显示文本&＃xff08;c14&＃xff09;
$(document).ready(function () {
$(&＃39;.amuse&＃39;).hide();
$(&＃39;.sport&＃39;).hide();
$(&＃39;.polity&＃39;).hide();
$(&＃39;.amusebutton&＃39;).mouseover(function () {
$(&＃39;.amuse&＃39;).show(&＃39;slow&＃39;);
});
$(&＃39;.amusebutton&＃39;).mouseout(function () {
$(&＃39;.amuse&＃39;).hide();
});
$(&＃39;.sportbutton&＃39;).mouseover(function () {
$(&＃39;.sport&＃39;).show(&＃39;slow&＃39;);
});
$(&＃39;.sportbutton&＃39;).mouseout(function () {
$(&＃39;.sport&＃39;).hide();
});
$(&＃39;.politybutton&＃39;).mouseover(function () {
$(&＃39;.polity&＃39;).show(&＃39;slow&＃39;);
});
$(&＃39;.politybutton&＃39;).mouseout(function () {
$(&＃39;.polity&＃39;).hide();
});
});
滑动效果替换文本&＃xff08;c15&＃xff09;slideUp(speed,callback),slideDown(speed,callback)
$(document).ready(function () {
$(&＃39;p.message1&＃39;).css({ &＃39;border&＃39;: &＃39;2px solid&＃39;, &＃39;text-align&＃39;: &＃39;center&＃39;, &＃39;font-weight&＃39;: &＃39;bold&＃39; }).hide();
$(&＃39;p.message2&＃39;).css({ &＃39;backgroundColor&＃39;: &＃39;#FF0000&＃39;, &＃39;color&＃39;: &＃39;#FFF&＃39;, &＃39;text-align&＃39;: &＃39;center&＃39;, &＃39;font-weight&＃39;: &＃39;bold&＃39; }).click(function () {
$(this).slideUp(&＃39;slow&＃39;);
$(&＃39;p.message1&＃39;).slideDown(&＃39;slow&＃39;);
});
$(&＃39;p.message1&＃39;).click(function () {
$(this).slideUp(&＃39;slow&＃39;);
$(&＃39;p.message2&＃39;).slideDown(&＃39;slow&＃39;);
});
});
图片滚动&＃xff08;c16&＃xff09;animate(properties,speed,easing,callback) propertise指终值 easing指缓和&＃xff0c;包含linear(线性),swing(摆动)
例子1&＃xff1a;图片滚动后隐藏
$(document).ready(function () {
$(&＃39;.image-c16&＃39;).click(function () {
$(&＃39;.image-c16&＃39;).animate({ left: 600 }, &＃39;slow&＃39;)
$(&＃39;.image-c16&＃39;).slideUp(&＃39;slow&＃39;);
});
});
例子2&＃xff1a;图片滚动并变大
$(document).ready(function () {
$(&＃39;.image-c16&＃39;).click(function (event) {
$(&＃39;.image-c16&＃39;).animate({ left:600, width: $(this).width() * 2, height: $(this).height() * 2 }, &＃39;slow&＃39;)
});
});
例子3&＃xff1a;图片按原路径返回 fadeTo(speed,opacity,callback)调整选定元素的不透明度
$(document).ready(function () {
$(&＃39;.image-c16&＃39;).click(function (event) {
$(&＃39;.image-c16&＃39;).animate({ left: 600 }, &＃39;slow&＃39;, function () {
$(&＃39;.image-c16&＃39;).fadeTo(&＃39;slow&＃39;, 0);
$(&＃39;.image-c16&＃39;).fadeTo(&＃39;slow&＃39;, 1);
$(&＃39;.image-c16&＃39;).animate({ left: 0 }, &＃39;slow&＃39;);
});
});
});
确定键盘的键位&＃xff08;c17&＃xff09; keypress(handle),keydown(handle),keyup(handle)
例子1
$(document).ready(function () {
$(&＃39;.infobox&＃39;).keypress(function (event) {
$(&＃39;p.keychar&＃39;).text(&＃39;按键的字符串格式是&＃39; &＃43; String.fromCharCode(event.keyCode));
$(&＃39;p.keycode&＃39;).text(&＃39;按键的数字代码是&＃39; &＃43; event.keyCode);
});
});
例子2:按钮触发后&＃xff0c;就手动触发键盘事件
$(document).ready(function () {
$(&＃39;.button&＃39;).text(&＃39;单击后再输入&＃39;).click(function () {
$(&＃39;.infobox&＃39;).keypress(function (event) {
$(&＃39;p.keychar&＃39;).text(&＃39;按键的字符串格式是&＃39; &＃43; String.fromCharCode(event.keyCode));
$(&＃39;p.keycode&＃39;).text(&＃39;按键的数字代码是&＃39; &＃43; event.keyCode);
});
});
});
防止事件冒泡&＃xff08;c18&＃xff09;
例子1&＃xff1a;事件冒泡
$(document).ready(function () {
$(&＃39;.div-c18&＃39;).click(function () {
alert("你按下div事件");
});
$(&＃39;.p-c18&＃39;).click(function () {
alert("你按下p事件");
});
$(&＃39;.span-c18&＃39;).click(function () {
alert("你按下span事件");
});
});
例子2&＃xff1a;防止事件冒泡,并控制事件发生在何处 event.target
$(document).ready(function () {
$(&＃39;.div-c18&＃39;).click(function (event) {
var $target &＃61; $(event.target);
if ($target.is(&＃39;.div-c18&＃39;)) {
alert("你按下div事件");
};
if ($target.is(&＃39;.p-c18&＃39;)) {
alert("你按下p事件");
};
if ($target.is(&＃39;.span-c18&＃39;)) {
alert("你按下span事件");
}
});
});
链接多个活动 逐个编写jQuery包装器的方法
例子1&＃xff1a;克隆语句&＃xff0c;并运用样式css于副本
$(document).ready(function () {
$(&＃39;.div-c18&＃39;).children().clone().prependTo(&＃39;.div-c18&＃39;).addClass(&＃39;hover-c18&＃39;);
});
例子2&＃xff1a;克隆语句&＃xff0c;并运用样式css于原本 end() 实现退回到上一个包装集作为返回值
$(document).ready(function () {
$(&＃39;.div-c18&＃39;).children().clone().prependTo(&＃39;.div-c18&＃39;).end().addClass(&＃39;hover-c18&＃39;);
});
html代码
<form id&＃61;"form1" runat&＃61;"server">
<div>
<%--c1 --%>
<span class&＃61;"bold button">Boldspan>
<span class&＃61;"italic button">Italicspan>
<%--c2--%>
<img src&＃61;"Img/Img1.jpg" alt&＃61;"图片"/>
<p>p>
<%--c3--%>
<span class&＃61;"button">鼠标经过span>
<p>动态突显文本p>
<%--c4--%>
<span class&＃61;"button">图片变化span>
<img src&＃61;"Img/Img1.jpg" alt&＃61;"图片"/>
<%--c5--%>
姓名&＃xff1a;<input class&＃61;"name" type&＃61;"text"/>
<p>p>
<%--c6--%>
<span class&＃61;"button">悬停效果span>
<%--c7--%>
<span class&＃61;"button">切换CSSspan>
<%--c8--%>
<a href&＃61;"www.baidu.com"><span class&＃61;"roll">span>a>
<%--c9--%>
<span class&＃61;"add-c9 button">事件添加文本span>
<span class&＃61;"remove-c9 button">事件删除文本span>
<div class&＃61;"a">div>
<%--c10--%>
<span class&＃61;"button" id&＃61;"boldbutton">粗体span>
<span class&＃61;"button" id&＃61;"italicbutton">斜体span>
<div id&＃61;"info">我是一只小鸟&＃xff0c;想飞到远方div>
<%--c11 --%>
<span class&＃61;"bold button">Boldspan>
<span class&＃61;"italic button">Italicspan>
<%--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&＃61;"readmore">span>
<div class&＃61;"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&＃61;"readless">span>
<%--c14--%>
<span class&＃61;"button-c14 amusebutton">娱乐span>
<span class&＃61;"button-c14 sportbutton">体育span>
<span class&＃61;"button-c14 politybutton">政治span>
<br /><br />
<p class&＃61;"amuse">娱乐新闻栏目p>
<p class&＃61;"sport">体育新闻栏目p>
<p class&＃61;"polity">政治新闻栏目p>
<%--c15--%>
<p class&＃61;"message1">略读半卷书p>
<p class&＃61;"message2">坐井说天阔p>
<%--c16--%>
<img src&＃61;"Img/BALLOON.BMP" class&＃61;"image-c16" alt&＃61;""/>
<%--c17--%>
<input type&＃61;"text" class&＃61;"infobox"/>
<span class&＃61;"button">span>
<p class&＃61;"keychar">p>
<p class&＃61;"keycode">p>
<%--c18--%>
<div class&＃61;"div-c18">Div事件
<p class&＃61;"p-c18">P事件<span class&＃61;"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;}
京公网安备 11010802041100号