当前位置：首页 > news >正文

js功能（1）

news 文章来源：https://blog.csdn.net/xjdkxnhcoskxbco/article/details/140962814 2025/5/6 18:54:47

1、readonly
应用于元素：readonly 可以应用于 <input> 和 <textarea> 元素。
用户界面表现：当元素设置为 readonly 时，用户不能更改输入框中的值，但可以选中和复制文本，且表单包含该输入字段的值可以被提交。

<td align="left">&nbsp;<input type="text"  readonly="readonly" /></td>

2、placeholder

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

    <td align="left">&nbsp;<input type="text"  placeholder="无需填写"/></td>

3、submit和form表单

<form> 和 <submit> 是 HTML 中常用的表单相关标签。

<form> 标签：

<form> 标签用于创建 HTML 表单，用来接收用户输入的数据。通过在 <form> 标签内部添加输入字段（如文本框、复选框、下拉菜单等），用户可以在提交表单时将这些数据发送到服务器进行处理。
示例：

html
<form action="/submit-form" method="post"><label for="username">Username:</label><input type="text" id="username" name="username"><br><br><label for="password">Password:</label><input type="password" id="password" name="password"><br><br><input type="submit" value="Submit">
</form>

在上面的示例中，<form> 标签指定了表单的动作（action）和提交方法（method）。用户填写用户名和密码后，点击提交按钮 (<input type="submit">) 将会把数据发送到 /submit-form 这个地址，并用 POST 方法发送数据。
<input type="submit"> 标签：

<input type="submit"> 是 HTML 中的一个表单输入元素类型，用于创建提交按钮。
当用户点击这个按钮时，会触发表单提交事件，将表单中的数据提交到服务器指定的地址。
示例：

html
<form action="/submit-form" method="post"><label for="email">Email:</label><input type="email" id="email" name="email"><br><br><input type="submit" value="Subscribe">
</form>

在这个例子中，点击 "Subscribe" 按钮将会把用户输入的邮箱地址提交到服务器的 /submit-form 地址，使用 POST 方法发送数据。
总结：

<form> 标签用于创建 HTML 表单，定义了表单的动作和提交方法。
<input type="submit"> 标签是表单中的一个输入元素类型，用于创建提交按钮，点击它会触发表单提交事件。

4、return false

在上下文中，"return false"通常用于阻止表单的默认提交行为或者阻止链接的默认点击行为。具体情况如下：

阻止表单提交：
在 JavaScript 事件处理函数中，特别是在表单的提交事件 (onsubmit) 中，如果你希望阻止表单默认的提交行为（即不让表单真正提交到服务器），可以在事件处理函数的最后返回 false。例如：

html
<form onsubmit="return validateForm()"><!-- 表单内容 --><input type="submit" value="Submit">
</form><script>
function validateForm() {// 进行表单验证逻辑if (/* 表单验证通过 */) {return true;  // 允许表单提交} else {return false; // 阻止表单提交}
}
</script>

在这个例子中，当用户点击提交按钮时，会触发 validateForm() 函数。如果验证通过，函数返回 true，表单将会提交到服务器。如果验证不通过，函数返回 false，阻止表单的提交动作。

阻止链接的默认点击行为：
在处理链接的点击事件 (onclick) 中，如果你希望点击链接时不跳转到链接指定的地址，可以同样返回 false。

html
<a href="https://example.com" onclick="return handleClick()">Link</a><script>
function handleClick() {// 处理点击事件的逻辑if (/* 某些条件 */) {return true;  // 允许跳转} else {return false; // 阻止默认跳转}
}
</script>

在这个例子中，当用户点击链接时，会调用 handleClick() 函数。如果满足某些条件，函数返回 true，浏览器会跳转到链接的地址。如果不满足条件，函数返回 false，浏览器不会跳转到链接的地址。

小结：

在 JavaScript 事件处理函数中，返回 false 可以用来阻止表单的默认提交行为或者链接的默认跳转行为。通过这种方式，可以在客户端通过 JavaScript 控制表单提交和链接点击的行为。

5、POST 和 GET 的区别：

GET：

传输数据：通过 URL 传输数据，数据会附加在 URL 后面，以查询字符串的形式发送。
安全性：不适合传输敏感数据，因为数据在 URL 中可见，有安全风险。
数据长度限制：由浏览器和服务器限制，通常较短（约 2000 个字符）。
幂等性：GET 请求是幂等的，多次请求会产生同样的结果，不会影响服务器状态。
示例：http://example.com/resource?id=123

POST：

传输数据：通过请求体传输数据，数据不会附加在 URL 上，而是包含在请求体中发送。
安全性：适合传输敏感数据，因为数据不会暴露在 URL 中。
数据长度限制：理论上没有固定限制，但实际上受服务器和网络环境的影响。
幂等性：POST 请求不是幂等的，多次请求可能会产生不同的结果，会影响服务器状态。
示例：

POST /submit-form HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencodedusername=user&password=pass

6、jQuery 中的 $.post：

在 jQuery 中，$.post 是一个简便的方法，用于发送 POST 请求到服务器，并接收返回的数据。它的基本用法如下：

javascript
$.post(url, data, successCallback, dataType);
url：要发送请求的服务器 URL。
data：要发送到服务器的数据，可以是对象或字符串。
successCallback：请求成功后的回调函数，处理返回的数据。
dataType：可选参数，指定预期的返回数据类型（例如 json）。
示例：

javascript
$.post("/submit-form", { username: "user", password: "pass" }, function(data) {console.log("Response from server:", data);
}, "json");

上述代码示例中，$.post 发送了一个 POST 请求到 /submit-form，并发送了一个包含用户名和密码的对象作为数据。当服务器响应后，会调用回调函数处理返回的数据。

总结：

GET 和 POST 是 HTTP 请求方法，用于从服务器获取资源或向服务器提交数据。
jQuery 的 $.post 方法是简化了的 POST 请求方式，用于发送 POST 请求并处理服务器的响应数据。

7、做下拉框

在 HTML 中创建下拉框（也称为下拉列表或选择框），可以使用 <select> 和 <option> 元素。下面是一个基本的示例：

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉框示例</title>
</head>
<body><h2>请选择一个选项：</h2><select id="mySelect"><option value="option1">选项 1</option><option value="option2">选项 2</option><option value="option3">选项 3</option><option value="option4">选项 4</option>
</select><p>选择的选项是: <span id="selectedOption"></span></p><script>// JavaScript 示例，监听下拉框的变化事件const selectElement = document.getElementById("mySelect");const outputElement = document.getElementById("selectedOption");selectElement.addEventListener("change", function() {outputElement.textContent = selectElement.value;});
</script></body>
</html>

解释：
<select> 元素：用来定义一个下拉框。
<option> 元素：在 <select> 元素内部用来定义选项。每个 <option> 元素代表一个可选项，通过 value 属性定义选项的值，显示的文本写在 <option> 和 </option> 之间。
JavaScript 部分：监听下拉框的变化事件 (change 事件)，当用户选择不同的选项时，更新页面上的显示文本。
以上代码可以生成一个简单的下拉框，并且在用户选择不同选项时实时更新显示的选项值。

8、*span就是没有提示的时候会显示*

js功能（1）

相关文章：

js功能（1）

微信小程序乡村医疗系统，源码、部署+讲解

完美解决pip命令版本冲突导致对应版本模块包无法安装的问题

5.1-软件工程基础知识-软件工程概述

极简聊天室-websocket版

QT学生管理系统开发文档

【五大海内外高校支持】2024年数字经济与计算机科学国际学术会议（DECS2024）

VS项目打包成lib库并使用

社交巨头与去中心化：解析Facebook在区块链的角色

MyBatis(学习记录)

QSpinbox

分布式服务架构[原理、设计与实践]学习笔记

PDF发票解析并将信息回填到前端（1）后端解析PDF

C++练习之插入删除

【LeetCode】238. 除自身以外数组的乘积

Excel公式与函数（运算符，计算限制，错误检查）（一）

用AI助手写程序

动手学深度学习7.2 使用块的网络（VGG）-笔记练习（PyTorch）

SolidityFoundry ERC4626

大模型时代的操作系统：融合 Rust 和大模型，打造 AI 操作系统

【ML】为什么要做batch normlization，怎么做batch normlization

【C++指南】命名空间

RocketMQ Dashboard安装

前端web开发HTML+CSS3+移动web（0基础,超详细）——第3天

认识MySQL

尚品汇-创建ES索引库（二十七）

设计模式-六大原则

MyBatis搭建和增删改查

【一图学技术】6.反向代理 vs API网关 vs 负载均衡的原理和使用场景

python爬虫番外篇 | Reuqests库高级用法（1）