精通jQuery：深入解析事件处理机制与应用技巧

作者：滨州电信1988_259 | 来源：互联网 | 2024-10-27 14:27

本文详细探讨了jQuery的事件处理机制及其应用技巧，通过具体的代码示例，逐一解析了每个jQuery代码片段与其对应的HTML结构。文章以标记为基准，CSS作为通用样式，确保每段代码都能独立运行。HTML和CSS代码统一放置在文章末尾，方便读者参考和实践。

&＃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 --%>
Boldspan>
Italicspan>

<%--c2--%>
<img src&＃61;"Img/Img1.jpg" alt&＃61;"图片"/>
p>

<%--c3--%>
鼠标经过span>
动态突显文本p>

<%--c4--%>
图片变化span>
<img src&＃61;"Img/Img1.jpg" alt&＃61;"图片"/>

<%--c5--%>
姓名&＃xff1a;<input class&＃61;"name" type&＃61;"text"/>
p>

<%--c6--%>
悬停效果span>

<%--c7--%>
切换CSSspan>

<%--c8--%>
<a href&＃61;"www.baidu.com">span>a>

<%--c9--%>
事件添加文本span>
事件删除文本span>
<div class&＃61;"a">div>

<%--c10--%>
粗体span>
斜体span>
<div id&＃61;"info">我是一只小鸟&＃xff0c;想飞到远方div>

<%--c11 --%>
Boldspan>
Italicspan>

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

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

<%--c14--%>
娱乐span>
体育span>
政治span>
 
娱乐新闻栏目p>
体育新闻栏目p>
政治新闻栏目p>

<%--c15--%>
略读半卷书p>
坐井说天阔p>

<%--c16--%>
<img src&＃61;"Img/BALLOON.BMP" class&＃61;"image-c16" alt&＃61;""/>

<%--c17--%>
<input type&＃61;"text" class&＃61;"infobox"/>
span>
p>
p>

<%--c18--%>
<div class&＃61;"div-c18">Div事件
P事件Span事件span> 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;}

转:https://www.cnblogs.com/suguoqiang/archive/2012/02/26/2369093.html

推荐阅读

input
PHP 过滤器详解

本文深入探讨了 PHP 中的过滤器机制，包括常见的 $_SERVER 变量、filter_has_var() 函数、filter_id() 函数、filter_input() 函数及其数组形式、filter_list() 函数以及 filter_var() 和其数组形式。同时，详细介绍了各种过滤器的用途和用法。 ... [详细]

蜡笔小新 2024-12-23 19:05:02
input
如何高效清空C++标准输入缓冲区

本文探讨了在C++中如何有效地清空输入缓冲区，确保程序只处理最近的输入并丢弃多余的输入。我们将介绍一种不阻塞的方法，并提供一个具体的实现方案。 ... [详细]

蜡笔小新 2024-12-23 15:44:01
join
Python——对象自省

对象自省自省在计算机编程领域里，是指在运行时判断一个对象的类型和能力。dir能够返回一个列表，列举了一个对象所拥有的属性和方法。my_list[ ... [详细]

蜡笔小新 2024-12-23 12:55:35
input
Python处理Word文档的高效技巧

本文详细介绍了如何使用Python处理Word文档，涵盖从基础操作到高级功能的各种技巧。我们将探讨如何生成文档、定义样式、提取表格数据以及处理超链接和图片等内容。 ... [详细]

蜡笔小新 2024-12-23 10:40:32
java
开发笔记:9.八大排序

开发笔记:9.八大排序 ... [详细]

蜡笔小新 2024-12-24 01:20:47
input
HTTP请求与响应机制详解

本文深入探讨了HTTP请求和响应对象的使用，详细介绍了如何通过响应对象向客户端发送数据、处理中文乱码问题以及常见的HTTP状态码。此外，还涵盖了文件下载、请求重定向、请求转发等高级功能。 ... [详细]

蜡笔小新 2024-12-23 20:40:08
input
深入解析Linux pinctrl子系统：数据结构详解

本文将详细探讨Linux pinctrl子系统的各个关键数据结构，帮助读者深入了解其内部机制。通过分析这些数据结构及其相互关系，我们将进一步理解pinctrl子系统的工作原理和设计思路。 ... [详细]

蜡笔小新 2024-12-23 19:52:26
ip
iBatis.NET 循环迭代：深入解析 Iterate 标签

本文详细介绍了 iBatis.NET 中的 Iterate 元素，它用于遍历集合并重复生成每个项目的主体内容。通过该元素，可以实现类似于 foreach 的功能，尽管 iBatis.NET 并未直接提供 foreach 标签。 ... [详细]

蜡笔小新 2024-12-23 18:51:40
input
最小路径覆盖与强连通分量的应用：国王的问题

本题探讨了在一个有向图中，如何根据特定规则将城市划分为若干个区域，使得每个区域内的城市之间能够相互到达，并且划分的区域数量最少。题目提供了时间限制和内存限制，要求在给定的城市和道路信息下，计算出最少需要划分的区域数量。 ... [详细]

蜡笔小新 2024-12-23 18:42:12
input
C＃字符串处理如何从字符串中获取路径和args - C# string handling how get path and args from a string

Ihaveastringwithquotesaroundthepathasfollows:我在路径周围有一个带引号的字符串,如下所示:C:\ProgramFiles(x ... [详细]

蜡笔小新 2024-12-23 16:21:52
utf-8
使用RPM包在本地安装MySQL 5.6

本文详细介绍了如何通过RPM包在Linux系统（如CentOS）上安装MySQL 5.6。涵盖了检查现有安装、下载和安装RPM包、配置MySQL以及设置远程访问和开机自启动等步骤。 ... [详细]

蜡笔小新 2024-12-23 13:36:04
input
理解反向投影技术及其应用

反向投影技术主要用于在大型输入图像中定位特定的小型模板图像。通过直方图对比，它能够识别出最匹配的区域或点，从而确定模板图像在输入图像中的位置。 ... [详细]

蜡笔小新 2024-12-23 12:24:22
input
丽江客栈选择问题

本文介绍了一道经典的算法题，题目涉及在丽江河边的n家特色客栈中选择住宿方案。两位游客希望住在色调相同的两家客栈，并在晚上选择一家最低消费不超过p元的咖啡店小聚。我们将详细探讨如何计算满足条件的住宿方案总数。 ... [详细]

蜡笔小新 2024-12-22 20:15:25
input
HTML 文件上传按钮的样式设计

本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化，使用户界面更加友好和美观。 ... [详细]

蜡笔小新 2024-12-20 18:30:59
input
一个登陆界面

预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]

蜡笔小新 2024-12-20 09:57:07

滨州电信1988_259

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章