加法计算器按钮变脸文本框变脸无刷新评论高亮显示点击的当前行网站选择

本文档提供了一系列使用jQuery实现的前端交互案例，包括加法计算器、按钮变脸、文本框变脸、无刷新评论等功能，并详细展示了每个案例的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加法计算器：

$(function () { $("#eq").click(function () { var txt1 = $("#txt1").val(); if (isNaN(txt1)||txt1=="") { alert("第一个数是非数字，请重新输入"); $("#txt1").focus(); return; } var txt2 = $("#txt2").val(); if (isNaN(txt2) || txt2 == "") { alert("第二个数是非数字，请重新输入"); $("#txt2").focus(); return; } $("#txt3").val(parseFloat(txt1) + parseFloat(txt2)); }); }); function clearit() { if (confirm("确认要清空吗？")) { $("#txt1").val(""); $("#txt2").val(""); $("#txt3").val(""); } }

网页内容：

按钮变脸：

$(function () { $(":input").click(function () { $(this).val("哈哈").css("background","red").siblings().val("呜呜").css("background","white"); }); });

网页内容：

文本框变脸：

$(function () { $(":text").blur(function () { if ($(this).val().length <= 0) { $(this).css("background", "#f00"); } else { $(this).css("background", "#fff"); } }); $(":text").focus(function () { $(this).css("background","ff0"); }); });

网页内容：

无刷新评论：

$(function () { $("input[value=发表]").click(function () { var nickname = $("#nickname").val(); var speak = $("#speak").val(); var tr = $("<tr><td>" + nickname + "</td><td>" + speak + "</td></tr>"); $("#table1").append(tr); $("#nickname").val("");//清空提交的内容 $("#speak").val(""); //清空提交的内容 }); });

网页内容：

高亮显示点击行：

$(function () { $("#nets tr").click(function () { $(this).css("background", "#ff0").siblings().css("background", "#fff"); }); });

网页内容：

<table id="nets"><tr><td>百度</td><td>baidu.com</td></tr><tr><td>新浪</td><td>sina.com</td></tr><tr><td>网易</td><td>163.com</td></tr></table>

网站选择：

$(function () { $("#lanmu1 li").css("cursor", "pointer").mousemove(function () { $(this).css("background", "#f00").siblings().css("background", "#fff"); }).click(function () { $(this).css("background", "#fff").appendTo("#lanmu2") }).mouseout(function () { $(this).css("background", "#fff") }); });

网页内容：