js功能（1）

xjdkxnhcoskxbco

于 2024-08-06 19:09:27 发布

阅读量542

点赞数 18

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/xjdkxnhcoskxbco/article/details/140962814

版权

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-urlencoded

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