跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
HTML / CSS大前端算法

前端开发实战笔记:表单交互、浮动清除与排序原理

前端开发中的表单交互、浮动清除与排序逻辑是常见考点。涵盖表单默认值处理技巧、链接触发 JS 的规范写法、清除浮动元素的三种方案,以及 JavaScript 数组 sort 方法的底层排序原理。

日志猎手发布于 2017/12/20更新于 2026/9/1054 浏览
前端开发实战笔记:表单交互、浮动清除与排序原理

表单默认值与交互处理

在表单设计中,利用 value 属性配合事件监听可以实现友好的占位提示效果。对于普通输入框,设置初始 value 后,通过 onfocus 清空内容,onblur 恢复默认值即可。

<form action="">
  <input type="text" class="name" value="姓名 Name" onfocus="this.value='';" onblur="this.value='姓名 Name'" />
  <input type="submit" class="sublime" value="提交"/>
</form>

需注意,<textarea> 标签没有 value 属性,其内容直接写在标签之间。因此处理逻辑需改为判断当前文本是否为空或默认提示语:

<textarea class="words" onfocus="if(value=='请输入您需要留言的内容'){value=''}" onblur="if (value ==''){value='请输入您需要留言的内容'}">请输入您需要留言的内容</textarea>

链接触发 JavaScript 的规范写法

在 <a> 标签中调用 JS 函数时,为避免页面跳转或刷新,推荐以下几种写法。核心在于阻止默认行为并执行脚本:

<a href="javascript:void(0);" onclick="js_method()">
< = =>

a
href
"javascript:;"
onclick
"js_method()"
<a href="#" onclick="js_method();return false">

清除浮动元素的三种方案

父元素包含浮动子元素时,容易出现高度塌陷问题。常见的解决方案有三种:

  1. 为父元素设置 overflow: hidden;
  2. 让父元素也浮动,并设置宽度为 100%,后续元素添加 clear: both;
  3. 在父元素末尾添加非浮动子元素,或使用 clearfix 伪类技巧。

JavaScript 数组排序原理

sort() 方法内部机制常被误解。它实际上是通过比较函数返回值的正负来决定是否交换元素位置。若返回正数则交换,负数或零则不交换,这本质上类似于冒泡排序的逻辑。

以数组 [10, 5, 40, 25, 1000, 1] 为例,传入比较函数后:

  • 当 a > b 时返回正数,两数交换;
  • 重复此过程,较大的元素会逐步'冒泡'至末尾。

如果直接传入数字 1 作为参数(如 sort(1)),结果则是数组顺序反转,功能等同于 reverse()。理解这一机制有助于更灵活地控制数据展示顺序。

目录

  1. 表单默认值与交互处理
  2. 链接触发 JavaScript 的规范写法
  3. 清除浮动元素的三种方案
  4. JavaScript 数组排序原理

更多推荐文章

查看全部
  • 通义万相 2.1 API 调用与图像文本生成实战
  • GPT 模型的发展历程与核心架构解析
  • Hashcat 实战指南:从安装到高级密码恢复
  • Python、NumPy、Pandas 和 Matplotlib 版本对应关系
  • LangChain Agent 详解:原理、类型与实战应用
  • 人工智能基础概念全解析:从图灵测试到深度学习
  • 本地 Docker 部署开源低代码平台 Appsmith 及远程访问配置
  • 基于小米 9 手机搭建天马 G 复古掌机前端
  • 前端请求后端返回 404/405/500 状态码:排查与解决指南
  • LangBot:企业级即时通讯 AI 机器人平台介绍
  • 摆脱开发板限制:基于 Google Test + Mock 的嵌入式 TDD 实践
  • 盲道分割叠加到 AR 视野的导航效果
  • HarmonyOS6 RcText 组件使用示例完整指南
  • Linux 包管理器速成:yum/apt 指令与镜像源配置指南
  • Serper (Google Search API) 深度解析与实战
  • AI 时代重读《人人都是产品经理》:核心内核与产品实践
  • 基于 Termux 的 Android 平台 OpenClaw 部署:移动端 AI 助理
  • ASP.NET Core 10 Blazor WebAssembly 性能优化实战
  • PCL 点云处理算法汇总:滤波、配准与特征提取实战指南
  • 利用 NAS 部署智能家居网关实现全屋智能控制

相关免费在线工具

  • 加密/解密文本

    使用加密算法(如AES、TripleDES、Rabbit或RC4)加密和解密文本明文。 在线工具,加密/解密文本在线工具,online

  • Gemini 图片去水印

    基于开源反向 Alpha 混合算法去除 Gemini/Nano Banana 图片水印,支持批量处理与下载。 在线工具,Gemini 图片去水印在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online

  • Markdown转HTML

    将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online

  • HTML转Markdown

    将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online