JavaScript -jQuery / 表单

最新推荐文章于 2024-07-27 14:51:01 发布

S_numb

最新推荐文章于 2024-07-27 14:51:01 发布

阅读量301

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/S_numb/article/details/103923669

版权

Java 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

这篇文章参考内容分为两部分：

西部开源-秦疆老师；
https://www.w3school.com.cn/h.asp；

文章目录

jQoery

jQuery 由 John Resig 于 2006 年创建。

它旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。

十多年来，jQuery 一直是世界上最受欢迎的 JavaScript 库。

但是，在 JavaScript Version 5（2009）之后，大多数 jQuery 实用程序都可以通过几行标准 JavaScript 来解决：

1. JavaScript / jQuery DOM 选择器

1. 通过 id 来查找 HTML 元素

返回 id=“intro” 的元素：

//jQuery
var myElement = $("#id01");

//JavaScript
var myElement = document.getElementById("id01");

2. 通过标签名来查找 HTML 元素

返回所有 <p> 元素：

//jQuery
var myElements = $("p");

//JavaScript
var myElements = document.getElementsByTagName("p");

3. 通过类名来查找 HTML 元素

返回 class=“intro” 的所有元素。

//jQuery
var myElements = $(".intro");

//JavaScript
var myElements = document.getElementsByClassName("intro");

4. 通过 CSS 选择器查找 HTML 元素

返回包含 class=“intro” 的所有 <p> 元素的列表。

//jQuery
var myElements = $("p.intro");

//JavaScript
var myElements = document.querySelectorAll("p.intro");

2. JavaScript / JQuery HTML 元素

1. 设置文本内容

设置 HTML 元素的内部文本：

//jQuery
myElement.text("Hello China!");

//JavaScript
myElement.textContent = "Hello China!";

2. 获取文本内容

获取 HTML 元素的内部文本：

//jQuery
var myText = myElement.text();

//JavaScript
var myText = myElement.textContent || myElement.innerText;

3. 设置 HTML 内容

设置元素的 HTML 内容：

//jQuery
var myElement.html("<p>Hello World</p>");

//JavaScript
var myElement.innerHTML = "<p>Hello World</p>";

4. 获取 HTML 内容

获取元素的 HTML 内容：

//jQuery
var content = myElement.html();

//JavaScript
var content = myElement.innerHTML;

3. JavaScript / jQuery CSS 样式

1. 隐藏 HTML 元素

隐藏一个 HTML 元素：

//jQuery
myElement.hide();

//JavaScript
myElement.style.display = "none";

2. 显示 HTML 元素

显示一个 HTML 元素：

//jQuery
myElement.show();

//JavaScript
myElement.style.display = "";

3. 格式化 HTML 元素

更改 HTML 元素的字体尺寸：

//jQuery
myElement.css("font-size","35px");

//JavaScript
myElement.style.fontSize = "35px";

4.JavaScript / jQuery HTML DOM

1. 删除元素

删除 HTML 元素：

//jQuery
$("#id").remove();

//JavaScript
element.parentNode.removeChild(element);

2. 获取父元素

返回 HTML 元素的父元素：

//jQuery
var myParent = myElement.parent();

//JavaScript
var myParent = myElement.parentNode;

JavaScript 表单

1.JavaScript 表单验证

HTML 表单验证能够通过 JavaScript 来完成。

如果某个表单字段（fname）是空的，那么该函数会发出一条警告消息，并返回 false，以防止表单被提交出去：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<form  name="myForm" onsubmit="return validateForm()" method="post">
    姓名：<input type="text" name="fname">
    <input type="submit" value="提交">
</form>

<script>
    function validateForm() {
        var x = document.forms["myForm"]["fname"].value;
        if (x == "") {
            alert("必须填写姓名！");
            return false;
        }
    }
</script>
</body>
</html>

结果：
在这里插入图片描述

2. JavaScript 数字输入验证

JavaScript 常用于验证数字输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background: pink;
            border: 1px solid pink;
        }
    </style>
</head>

<body>
<div>
    <h2>JavaScript 能够验证输入</h2>
    <p>请输入 1 与 10 之间的数：</p>
    <input id="numb">
    <button type="button" onclick="myFunction()">提交</button>
    <p id="demo"></p>
</div>

<script>
    function myFunction() {
        var x, text;

        // 获取 id="numb" 的输入字段的值
        x = document.getElementById("numb").value;

        // 如果 x 不是数字或小于 1 或大于 10
        if (isNaN(x) || x < 1 || x > 10) {
            text = "输入无效";
        } else {
            text = "输入有效";
        }
        document.getElementById("demo").innerHTML = text;
    }
</script>

</body>

</html>

结果：
在这里插入图片描述

3. 自动 HTML 表单验证

HTML 表单验证能够被浏览器自动执行：

如果表单字段（fname）是空的，required 属性防止表单被提交：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h2>自动HTML表单验证</h2>
    <form action="">
        <input type="text"  required>
        <input type="submit" value="提交">
    </form>
    <p>如果单击“提交”，而不填写文本字段，您的浏览器将显示错误消息。</p>
</div>
</body>

</html>

结果：
在这里插入图片描述

4. 数据验证

数据验证指的是确保干净、正确和有用的用户输入的过程。

典型的验证任务是：

用户是否已填写所有必需的字段？
用户是否已输入有效的日期？
用户是否在数字字段中输入了文本？

大多数情况下，数据验证的作用是确保正确的用户输入。

验证可以通过很多不同的方法来定义，并且可以使用很多不同的方法来开发。

服务器端验证是由 web 服务器执行的，在输入被送往服务器之后。

客户端验证是由 web 浏览器执行的，在输入被送往 web 服务器之前。

5. HTML 约束验证

HTML5 引入了一种新的 HTML 验证概念，名为约束验证（constraint validation）。

HTML 约束验证基于：

约束验证 HTML 输入属性
约束验证 CSS 伪选择器
约束验证 DOM 属性和方法

1. 约束验证 HTML 输入属性

属性	描述
disabled	规定 input 元素应该被禁用
max	规定 input 元素的最大值
min	规定 input 元素的最小值
pattern	规定 input 元素的值模式
required	规定输入字段需要某个元素
type	规定 input 元素的类型

2. 约束验证 CSS 伪选择器

选择器	描述
:disabled	选择设置了 “disabled” 属性的 input 元素。
:invalid	选择带有无效值的 input 元素。
:optional	选择未设置 “required” 属性的 input 元素。
:required	选择设置了 “required” 属性的 input 元素。
:valid	选择带有有效值的 input 元素。

3. 约束验证 DOM 方法

属性	描述
checkValidity()	返回 true，如果 input 元素包含有效数据
setCustomValidity()	设置 input 元素的 validationMessage 属性。

4. 约束验证 DOM 属性

属性	描述
validity	包含与 input 元素的合法性相关的布尔属性。
validationMessage	包含当 validity 为 false 时浏览器显示的消息。
willValidate	指示是否验证 input 元素。

S_numb

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript -jQuery / 表单

这篇文章参考内容分为两部分：西部开源-秦疆老师；https://www.w3school.com.cn/h.asp；文章目录jQoery1. JavaScript / jQuery DOM 选择器2. JavaScript / JQuery HTML 元素3. JavaScript / jQuery CSS 样式4.JavaScript / jQuery HTML DOMJavaSc...
复制链接

扫一扫

专栏目录