今天整jQuery网页,我差点被自己蠢哭。本来以为这玩意儿跟搭积木似的简单,结果刚上手就蒙圈了。
第一步:瞎搞html骨架
我直接新建了个txt文件,后缀改成.html。开头复制粘贴了段标准代码:
- <!DOCTYPE html>打头阵
- <html>裹住整个页面
- <head>里塞了<title>,随便写个“测试页面”
- <body>空白大草原,就放了句<p>你好世界</p>
用浏览器打开一看——好家伙,光秃秃一行字杵在那儿,寒碜得像个毛坯房。
第二步:硬塞jQuery库
查了半天才知道得先加载jQuery。在<head>里加了行代码:
<script src="*/jquery-3.6.*"></script>
刷新页面屁反应没有!盯着F12控制台才看见报错:混了http和https。把本地文件拖进浏览器网址栏前面是file://,这破事儿折腾我半小时。
第三步:瞎写按钮事件
在body里怼了个按钮:
<button id="myBtn">点我变魔术</button>
接着在<script>标签里憋出两行:
$("#myBtn").click(function(){
$("p").text(" jQuery真香!");
手抖把click拼成clik,点按钮像戳死鱼。查拼写时顺带发现美元符号写成了S,这键盘该换了!
第四步:动态改样式
想给文字加点颜色。在click事件里追了句:
$("p").css("color","red");
结果字是红了,但原先内容被覆盖成“jQuery真香”。才明白.text()是清空重写。改成用.html()保留格式,又补了句.append()追加内容,总算像点样子。
第五步:怼点动画特效
想整点花活。在按钮事件末尾加了:
$("p").fadeOut(1000).fadeIn(500);
点完按钮文字先闪没再闪现,像抽风的老电视。把1000毫秒改成500,速度顺眼多了。顺手给body加了个灰色背景,不然白底太刺眼。
忙活两钟头就搞出个会变红的字+闪烁按钮。同事路过瞅了眼说:“你这网页长得像2008年QQ空间?” 我反手就把浏览器关了——菜鸟的尊严比代码重要。





