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

js功能(1)

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就是没有提示的时候会显示*

http://www.lryc.cn/news/416724.html

相关文章:

  • 微信小程序乡村医疗系统,源码、部署+讲解
  • 完美解决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)
  • 【链表OJ】常见面试题 3