这篇文章参考内容分为两部分:
- 西部开源-秦疆老师;
- 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 元素。 |