把华氏度转换为摄氏度:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
W3C教程https://www.w3school.com.cn/html/html_jianjie.asp
HTML 属性参考手册https://www.w3school.com.cn/tags/index.asp
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常,表单会被提交到 web 服务器上的网页。
在上面的例子中,指定了某个服务器脚本来处理被提交表单:
<form action="action_page.php" >
如果省略 action 属性,则 action 会被设置为当前页面。
method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):
您能够使用 GET(默认方法):
如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。
当您使用 GET 时,表单数据在页面地址栏中是可见的:
action_page.php?firstname=Mickey&lastname=Mouse
**注释:**GET 最适合少量数据的提交。浏览器会设定容量限制。
您应该使用 POST:
如果表单正在更新数据,或者包含敏感信息(例如密码)。
POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。
filedset元素组合表单中的相关数据
legend元素为 fieldset >元素定义标题。
HTML form 元素,已设置所有可能的属性,是这样的:
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate >
.
form elements
.
form>
下面是 < form > 属性的列表:
属性 | 描述 |
---|---|
accept-charset | 规定在被提交表单中使用的字符集(默认:页面字符集)。 |
action | 规定向何处提交表单的地址(URL)(提交页面)。 |
autocomplete | 规定浏览器应该自动完成表单(默认:开启)。 |
enctype | 规定被提交数据的编码(默认:url-encoded)。 |
method | 规定在提交表单时所用的 HTTP 方法(默认:GET)。 |
name | 规定识别表单的名称(对于 DOM 使用:document.forms.name)。 |
novalidate | 规定浏览器不验证表单。 |
target | 规定 action 属性中地址的目标(默认:_self)。 |
元素为 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
input元素的 list 属性必须引用 datalist 元素的 id 属性。
通过 datalist 设置预定义值的 input 元素:
<form action="action_page.php">
<input list="browsers" >
<datalist id="browsers" >
< option value="Internet Explorer" >
< option value="Firefox" >
< option value="Chrome" >
< option value="Opera" >
< option value="Safari" >
datalist>
form>
HTML5 增加了多个新的输入类型:
**注释:**老式 web 浏览器不支持的输入类型,会被视为输入类型 text。
您能够对数字做出限制。
根据浏览器支持,限制可应用到输入字段。
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5" >
form>
email用于应该包含电子邮件地址的输入字段。
根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证。
某些智能手机会识别 email 类型,并在键盘增加 “.com” 以匹配电子邮件输入。
<input type="email" name="email">
这里列出了一些常用的输入限制(其中一些是 HTML5 中新增的):
属性 | 描述 |
---|---|
disabled | 规定输入字段应该被禁用。 |
max | 规定输入字段的最大值。 |
maxlength | 规定输入字段的最大字符数。 |
min | 规定输入字段的最小值。 |
pattern | 规定通过其检查输入值的正则表达式。 |
readonly | 规定输入字段为只读(无法修改)。 |
required | 规定输入字段是必需的(必需填写)。 |
size | 规定输入字段的宽度(以字符计)。 |
step | 规定输入字段的合法数字间隔。 |
value | 规定输入字段的默认值。 |
并为 form 增加如需属性:
<form action="action_page.php" novalidate >
E-mail: < input type="email" name="user_email" >
<input type="submit" >
form>
formaction 属性规定当提交表单时处理该输入控件的文件的 URL。
formaction 属性覆盖form元素的 action 属性。
formaction 属性适用于 type=“submit” 以及 type=“image”。
拥有两个两个提交按钮并对于不同动作的 HTML 表单:
<form action="action_page.php" >
First name: <input type="text" name="fname" ><br>
Last name: <input type="text" name="lname" ><br>
<input type="submit" value="Submit" ><br>
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin" >
form>
formenctype 属性规定当把表单数据(form-data)提交至服务器时如何对其进行编码(仅针对 method=“post” 的表单)。
formenctype 属性覆盖 form 元素的 enctype 属性。
formenctype 属性适用于 type=“submit” 以及 type=“image”。
发送默认编码以及编码为 “multipart/form-data”(第二个提交按钮)的表单数据(form-data):
<form action="demo_post_enctype.asp" method="post" >
First name: <input type="text" name="fname" >< br >
<input type="submit" value="Submit" >
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data" >
form>
list 属性引用的 datalist元素中包含了 input元素的预定义选项。
使用 datalist设置预定义值的 input元素:
<input list="browsers" >
<datalist id="browsers" >
<option value="Internet Explorer" >
<option value="Firefox" >
<option value="Chrome" >
<option value="Opera" >
<option value="Safari" >
datalist>
multiple 属性是布尔属性。
如果设置,则规定允许用户在 input元素中输入一个以上的值。
multiple 属性适用于以下输入类型:email 和 file。
接受多个值的文件上传字段:
Select images: <input type="file" name="img" multiple >
pattern 属性规定用于检查 input 元素值的正则表达式。
pattern 属性适用于以下输入类型:text、search、url、tel、email、and password。
placeholder 属性规定用以描述输入字段预期值的提示(样本值或有关格式的简短描述)。
该提示会在用户输入值之前显示在输入字段中。
placeholder 属性适用于以下输入类型:text、search、url、tel、email 以及 password。
<html>
<head>
<meta charset="UTF-8" >
<title>Title of the documenttitle>
head>
<body>
Content of the document......
body>
html>
**注释:**HTML5 中默认的字符编码是 UTF-8。
HTML5 的一些最有趣的新特性:
以下 HTML 4.01 元素已从 HTML5 中删除:
教程https://www.w3school.com.cn/js/js_intro.asp
事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作:
让 JavaScript 处理事件的不同方法有很多:
getElementById() 是多个 JavaScript HTML 方法之一。
本例使用该方法来“查找” id=“demo” 的 HTML 元素,并把元素内容(innerHTML)更改为 “Hello JavaScript”:
document.getElementById("demo").innerHTML = "Hello JavaScript";
改变 HTML 元素的样式,是改变 HTML 属性的一种变种:
document.getElementById("demo").style.fontSize = "25px";
可通过改变 display 样式来隐藏 \显示HTML 元素:
document.getElementById("demo").style.display="none";
在 HTML 中,JavaScript 代码必须位于 script 与 /script 标签之间。
<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
script>
**注释:**旧的 JavaScript 例子也许会使用 type 属性:
<script type="text/javascript">。
注释:type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
JavaScript 函数是一种 JavaScript 代码块,它可以在调用时被执行。
例如,当发生事件时调用函数,比如当用户点击按钮时。
**提示:**把脚本置于< body >元素的底部,可改善显示速度,因为脚本编译会拖慢显示。
脚本可放置与外部文件中:
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本,请在 < script > 标签的 src (source) 属性中设置脚本的名称:
<script src="myScript.js" >script>
**注释:**外部脚本不能包含 < script > 标签。
可通过完整的 URL 或相对于当前网页的路径引用外部脚本:
本例使用完整的 URL 来链接至脚本:
<script src="https://www.w3school.com.cn/js/myScript1.js" >script>
本例使用了位于当前网站上指定文件夹中的脚本:
<script src="/js/myScript1.js" >script>
JavaScript 能够以不同方式“显示”数据:
**注意:**在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML :
提示:document.write() 方法仅用于测试。
JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。
圆括号可包括由逗号分隔的参数:
(参数 1, 参数 2, ...)
由函数执行的代码被放置在花括号中:{}
function name(参数 1, 参数 2, 参数 3) {
要执行的代码
}
*函数参数(Function parameters)*是在函数定义中所列的名称。
函数参数(Function arguments)是当调用函数时由函数接收的真实的值。
在函数中,参数是局部变量。
在其他编程语言中,函数近似程序(Procedure)或子程序(Subroutine)。
函数中的代码将在其他代码调用该函数时执行:
在本教程中稍早前,您已经学到了“提升”(hoisting)。
Hoisting 是 JavaScript 将声明移动到当前作用域顶端的默认行为。
Hoisting 应用于变量声明和函数声明。
正因如此,JavaScript 函数能够在声明之前被调用:
myFunction(5);
function myFunction(y) {
return y * y;
}
使用表达式定义的函数不会被提升。
当 JavaScript 到达 return 语句,函数将停止执行。
如果函数被某条语句调用,JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者:
计算两个数的乘积,并返回结果:
var x = myFunction(7, 8); // 调用函数,返回值被赋值给 x
function myFunction(a, b) {
return a * b; // 函数返回 a 和 b 的乘积
}
把华氏度转换为摄氏度:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
使用上面的例子,toCelsius 引用的是函数对象,而 toCelsius() 引用的是函数结果
不使用 () 访问函数将返回函数声明而不是函数结果.
函数的使用方法与变量一致,在所有类型的公式、赋值和计算中。
把函数当做变量值直接使用.
var text = "The temperature is " + toCelsius(77) + " Celsius";
汽车有诸如车重和颜色等属性,也有诸如启动和停止的方法:
对象 | 属性 | 方法 |
---|---|---|
汽车 | car.name = porsche car.model = 911 car.length = 4499mm car.color = white | car.start() car.drive() car.brake() car.stop() |
所有汽车都拥有同样的属性,但属性值因车而异。
所有汽车都拥有相同的方法,但是方法会在不同时间被执行。
对象也是变量。但是对象包含很多值。
这段代码把多个值(porsche, 911, white)**赋给名为 car 的变量:
var car = {type:"porsche", model:"911", color:"white"};
值以名称:值对的方式来书写(名称和值由冒号分隔)。
JavaScript 对象是被命名值的容器。
(JavaScript 对象中的)名称:值对被称为属性。
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
属性 | 属性值 |
---|---|
firstName | Bill |
lastName | Gates |
age | 62 |
eyeColor | blue |
fullName | function() {return this.firstName + " " + this.lastName;} |
对象也可以有方法。
方法是在对象上执行的动作。
方法以函数定义被存储在属性中。
方法是作为属性来存储的函数。
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
在函数定义中,this 引用该函数的“拥有者”。
在上面的例子中,this 指的是“拥有” fullName 函数的 person 对象。
换言之,this.firstName 的意思是 this 对象的 firstName 属性。
空格和折行都是允许的。对象定义可横跨多行:
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
};
您能够以两种方式访问属性:
objectName.propertyName
或者
objectName["propertyName"]
您能够通过如下语法访问对象方法:
objectName.methodName()
name = person.fullName();
如果您不使用 () 访问 fullName 方法,则将返回函数定义, 方法实际上是以属性值的形式存储的函数定义。
如果通过关键词 “new” 来声明 JavaScript 变量,则该变量会被创建为对象:
var x = new String(); // 把 x 声明为 String 对象
var y = new Number(); // 把 y 声明为 Number 对象
var z = new Boolean(); // 把 z 声明为 Boolean 对象
请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。
HTML 事件可以是浏览器或用户做的某些事情。
JavaScript 允许您在事件被侦测到时执行代码。
通过 JavaScript 代码,HTML 允许您向 HTML 元素添加事件处理程序。
<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是?button>
代码(使用 this.innerHTML)改变了其自身元素的内容:
<button onclick="this.innerHTML=Date()" >现在的时间是?button>
JavaScript 代码通常有很多行。事件属性调用函数更为常见:
<button onclick="displayDate()" >时间是?button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
script>
<p id="demo" >p>
W3School JavaScript 参考手册 HTML DOM 事件 https://www.w3school.com.cn/jsref/dom_obj_event.asp
下面是一些常见的 HTML 事件:
事件 | 描述 |
---|---|
onchange | HTML 元素已被改变 |
onclick | 用户点击了 HTML 元素 |
onmouseover | 用户把鼠标移动到 HTML 元素上 |
onmouseout | 用户把鼠标移开 HTML 元素 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已经完成页面加载 |
/pattern/modifiers;
var patt = /w3school/i;
/w3school/i 是一个正则表达式。
w3school 是模式(pattern)(在搜索中使用)。
i 是修饰符(把搜索修改为大小写不敏感)。
在 JavaScript 中,正则表达式常用于两个字符串方法:search() 和 replace()。
search() 方法使用表达式来搜索匹配,然后返回匹配的位置。
replace() 方法返回模式被替换处修改后的字符串
<script>
var str = "Visit W3School!";
var n = str.search("W3School");
document.getElementById("demo").innerHTML = n;
script>
使用正则表达式执行搜索字符串中 “w3school” 的大小写不敏感的搜索:
var str = "Visit W3School";
var n = str.search(/w3school/i);
replace() 也接受字符串作为搜索参数:
使用大小写不明的正则表达式以 W3school 来替换字符串中的 Microsoft:
var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3School");
修饰符可用于大小写不敏感的更全局的搜素:
修饰符 | 描述 |
---|---|
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
括号用于查找一定范围的字符串:
表达式 | 描述 |
---|---|
[abc] | 查找方括号之间的任何字符。 |
[0-9] | 查找任何从 0 至 9 的数字。 |
(x|y) | 查找由 | 分隔的任何选项。 |
*元字符(Metacharacter)*是拥有特殊含义的字符:
元字符 | 描述 |
---|---|
\d | 查找数字。 |
\s | 查找空白字符。 |
\b | 匹配单词边界。 |
\uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
Quantifiers 定义量词:
量词 | 描述 |
---|---|
n+ | 匹配任何包含至少一个 n 的字符串。 |
n* | 匹配任何包含零个或多个 n 的字符串。 |
n? | 匹配任何包含零个或一个 n 的字符串。 |
完整的 RegExp 参考手册: 如需完整的参考手册,请访问我们完整的 JavaScript RegExp 参考手册。
在 JavaScript 中,RegExp 对象是带有预定义属性和方法的正则表达式对象。
RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具。
/pattern/attributes
new RegExp(pattern, attributes);
参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串,包含属性 “g”、“i” 和 “m”,分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前,不支持 m 属性。如果 pattern 是正则表达式,而不是字符串,则必须省略该参数。
一个新的 RegExp 对象,具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串,那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。
如果不用 new 运算符,而将 RegExp() 作为函数调用,那么它的行为与用 new 运算符调用时一样,只是当 pattern 是正则表达式时,它只返回 pattern,而不再创建一个新的 RegExp 对象。
SyntaxError - 如果 pattern 不是合法的正则表达式,或 attributes 含有 “g”、“i” 和 “m” 之外的字符,抛出该异常。
TypeError - 如果 pattern 是 RegExp 对象,但没有省略 attributes 参数,抛出该异常。
test() 是一个正则表达式方法。
它通过模式来搜索字符串,然后根据结果返回 true 或 false。
var patt = /e/;
patt.test("The best things in life are free!");
由于字符串中有一个 “e”,以上代码的输出将是:
true
您不必首先把正则表达式放入变量中。上面的两行可缩短为一行:
/e/.test("The best things in life are free!");
exec() 方法是一个正则表达式方法。
它通过指定的模式(pattern)搜索字符串,并返回已找到的文本。
如果未找到匹配,则返回 null。
下面的例子搜索字符串中的字符 “e”:
/e/.exec("The best things in life are free!");
由于字符串中有一个 “e”,以上代码的输出将是:
e
代码约定(Coding conventions)指的是编程的样式指导方针。这些原则大体上包括:
在 W3School,我们对标识符名称(变量和函数)使用了驼峰式大小写。
所有名称以字母开头。
请始终使用对代码块缩进使用 4 个空格:
简单语句的通用规则:
请始终以分号结束单条语句:
针对复杂语句(compound)的通用规则:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
for (i = 0; i < 5; i++) {
x += i;
}
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
针对对象定义的通用规则:
var person = {
firstName: "Bill",
lastName: "Gates",
age: 50,
eyeColor: "blue"
};
可以对短对象在一行中进行压缩,只在属性之间使用空格,就像这样:
var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};
请始终对您所有的代码使用相同的命名约定。例如:
HTML5 属性能够以 data- 开头(data-quantity, data-price)。
CSS 在 property-names 中使用连字符(font-size)。
Hyphens 可被错误地视为减法运算符。JavaScript 命名不允许使用连字符。
JavaScript 本身、jQuery 以及其他 JavaScript 库使用驼峰大小写。
JavaScript 命名请不要以 $ 符号开头。此举会引起 JavaScript 库名称冲突。
HTML 文件应该使用 .html 扩展名(而非 .htm)。
CSS 文件应该使用 .css 扩展名。
JavaScript 文件应该使用 .js 扩展名。
请避免全局变量、new、===、eval()
请尽量少地使用全局变量。
它包括所有的数据类型、对象和函数。
全局变量和函数可被其他脚本覆盖。
请使用局部变量替代,并学习如何使用闭包。
所有在函数中使用的变量应该被声明为局部变量。
局部变量必须通过 var 关键词来声明,否则它们将变成全局变量。
严格模式不允许未声明的变量。
一项好的编码习惯是把所有声明放在每段脚本或函数的顶部。
var x1 = {}; // 新对象
var x2 = ""; // 新的原始字符串值
var x3 = 0; // 新的原始数值
var x4 = false; // 新的原始布尔值
var x5 = []; // 新的数组对象
var x6 = /()/; // 新的正则表达式
var x7 = function(){}; // 新的函数对象
请意识到数值会被意外转换为字符串或 NaN(Not a Number)。
JavaScript 属于松散类型。变量可包含不同的数据类型,并且变量能够改变其数据类型:
var x = "Hello"; // typeof x 为字符串
x = 5; // 把 typeof x 更改为数值
用字符串减去字符串,不会产生错误而是返回 NaN(Not a Number).
== 比较运算符总是在比较之前进行类型转换(以匹配类型)。
=== 运算符会强制对值和类型进行比较:
0 == ""; // true
1 == "1"; // true
1 == true; // true
0 === ""; // false
1 === "1"; // false
1 === true; // false
如果调用函数时缺少一个参数,那么这个缺失参数的值会被设置为 undefined。
undefined 值会破坏您的代码。为参数设置默认值是一个好习惯。
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
eval() 函数用于将文本作为代码来允许。在几乎所有情况下,都没有必要使用它。
因为允许任意代码运行,它同时也意味着安全问题。
HTML 表单验证能够通过 JavaScript 来完成。
如果某个表单字段(fname)是空的,那么该函数会发出一条警告消息,并返回 false,以防止表单被提交出去:
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("必须填写姓名");
return false;
}
}
该函数能够在表单提交时被调用:
<form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post" >
姓名:<input type="text" name="fname" >
<input type="submit" value="Submit" >
form>
HTML 表单验证能够被浏览器自动执行:
如果表单字段(fname)是空的,required 属性防止表单被提交:
<form action="/action_page_post.php" method="post" >
<input type="text" name="fname" required >
<input type="submit" value="Submit" >
form>
数据验证指的是确保干净、正确和有用的用户输入的过程。
典型的验证任务是:
大多数情况下,数据验证的作用是确保正确的用户输入。
验证可以通过很多不同的方法来定义,并且可以使用很多不同的方法来开发。
服务器端验证是由 web 服务器执行的,在输入被送往服务器之后。
客户端验证是由 web 浏览器执行的,在输入被送往 web 服务器之前。
HTML5 引入了一种新的 HTML 验证概念,名为约束验证(constraint validation)。
HTML 约束验证基于:
属性 | 描述 |
---|---|
disabled | 规定 input 元素应该被禁用 |
max | 规定 input 元素的最大值 |
min | 规定 input 元素的最小值 |
pattern | 规定 input 元素的值模式 |
required | 规定输入字段需要某个元素 |
type | 规定 input 元素的类型 |
如需完整的列表,请访问我们的 HTML input 属性。
选择器 | 描述 |
---|---|
:disabled | 选择设置了 “disabled” 属性的 input 元素。 |
:invalid | 选择带有无效值的 input 元素。 |
:optional | 选择未设置 “required” 属性的 input 元素。 |
:required | 选择设置了 “required” 属性的 input 元素。 |
:valid | 选择带有有效值的 input 元素。 |
如需完整列表,请访问 CSS 伪类。
JavaScript 变量是存储数据值的容器。
所有 JavaScript 变量必须以唯一的名称的标识。
这些唯一的名称称为标识符。
标识符可以是短名称(比如 x 和 y),或者更具描述性的名称(age、sum、totalVolume)。
构造变量名称(唯一标识符)的通用规则是:
教程https://www.w3school.com.cn/js/js_json.asp
JSON 是存储和传输数据的格式。
JSON 经常在数据从服务器发送到网页时使用。
* JSON 的语法是来自 JavaScript 对象符号的语法,但 JSON 格式是纯文本。读取和生成 JSON 数据的代码可以在任何编程语言编写的。
JSON 语法定义了一个雇员对象:包含三条员工记录的数组(对象):
{
"employees":[
{"firstName":"Bill", "lastName":"Gates"},
{"firstName":"Steve", "lastName":"Jobs"},
{"firstName":"Alan", "lastName":"Turing"}
]
}
JSON 格式在语法上与创建 JavaScript 对象的代码相同。
JSON 数据的书写方式是名称/值对,类似 JavaScript 对象属性。
名称/值对由(双引号中的)字段名构成,其后是冒号,再其后是值:
"firstName":"Bill"
JSON 名称需要双引号。JavaScript 名称不需要。
JSON 对象是在花括号内书写的。
类似 JavaScript,对象能够包含多个名称/值对:
{"firstName":"Bill", "lastName":"Gates"}
JSON 数组在方括号中书写。
类似 JavaScript,数组能够包含对象
JSON 的通常用法是从 web 服务器读取数据,然后在网页中显示数据。
为了简单起见,可以使用字符串作为输入演示。
首先,创建包含 JSON 语法的 JavaScript 字符串:
var text = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"Steve" , "lastName":"Jobs" },' +
'{ "firstName":"Alan" , "lastName":"Turing" } ]}';
然后,使用 JavaScript 的内建函数 JSON.parse() 来把这个字符串转换为 JavaScript 对象:
var obj = JSON.parse(text);
最后,请在您的页面中使用这个新的 JavaScript 对象:
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
script>
教程 https://www.w3school.com.cn/js/js_ajax_intro.asp
菜鸟教程 https://www.runoob.com/jquery/ajax-getjson.html
jQuery AJAX 方法
使用 Ajax 请求获取 JSON 数据,并输出结果:
$(document).ready(function(){
$("button").click(function(){
$.getJSON("demo_ajax_json.js",function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});
});
getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。
$(selector).getJSON(url,data,success(data,status,xhr))
参数 | 描述 |
---|---|
url | 必需。规定将请求发送到哪个 URL。 |
data | 可选。规定发送到服务器的数据。 |
success(*data,status,xhr*) | 可选。规定当请求成功时运行的函数。 额外的参数:data - 包含从服务器返回的数据status - 包含请求的状态(“success”、“notmodified”、“error”、“timeout”、“parsererror”)xhr - 包含 XMLHttpRequest 对象 |
map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。
.map(callback(index,domElement))
参数 | 描述 |
---|---|
callback(index,domElement) | 对当前集合中的每个元素调用的函数对象。 |
由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组。
.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单:
<form method="post" action="" >
<fieldset>
<div>
<label for="two" >2label>
<input type="checkbox" value="2" id="two" name="number[]" >
div>
<div>
<label for="four" >4label>
<input type="checkbox" value="4" id="four" name="number[]" >
div>
<div>
<label for="six" >6label>
<input type="checkbox" value="6" id="six" name="number[]" >
div>
<div>
<label for="eight" >8label>
<input type="checkbox" value="8" id="eight" name="number[]" >
div>
fieldset>
form>
我们能够获得复选框 ID 组成的逗号分隔的列表:
//:class为type类型选择器
$(':checkbox').map(function() {
return this.id;
}).get().join(',');//get() 来处理返回的对象以得到基础的数组
本次调用的结果是字符串:“two,four,six,eight”。
在 callback 函数内部,this 引用每次迭代的当前 DOM 元素。该函数可返回单独的数据项,或者是要被插入结果集中的数据项的数组。如果返回的是数组,数组内的元素会被插入集合中。如果函数返回 null 或 undefined,则不会插入任何元素。
教程https://www.runoob.com/jquery/jquery-selectors.html
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 < p > 元素:
$(“p”)
实例
用户点击按钮后,所有 < p > 元素都隐藏:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下:
$(".test")
语法 | 描述 |
---|---|
$("*") | 选取所有元素 |
$(this) | 选取当前 HTML 元素 |
$(“p.intro”) | 选取 class 为 intro 的 < p > 元素 |
$(“p:first”) | 选取第一个 < p > 元素 |
$(“ul li:first”) | 选取第一个 < ul > 元素的第一个 < li > 元素 |
$(“ul li:first-child”) | 选取每个 < ul > 元素的第一个 < li > 元素 |
$("[href]") | 选取带有 href 属性的元素 |
$(“a[target=’_blank’]”) | 选取所有 target 属性值等于 “_blank” 的 < a > 元素 |
$(“a[target!=’_blank’]”) | 选取所有 target 属性值不等于 “_blank” 的 < a > 元素 |
$(":button") | 选取所有 type=“button” 的 < input > 元素 和 < button > 元素 |
$(“tr:even”) | 选取偶数位置的 < tr > 元素 |
$(“tr:odd”) | 选取奇数位置的 < tr > 元素 |
教程 https://www.w3school.com.cn/jquery/manipulation_html.asp
设置所有 p 元素的内容:
$(".btn1").click(function(){
$("p").html("Hello < b >world< /b >!");
});
html() 方法返回或设置被选元素的内容 (inner HTML)。
如果该方法未设置参数,则返回被选元素的当前内容。
当使用该方法返回一个值时,它会返回第一个匹配元素的内容。
$(selector).html()
当使用该方法设置一个值时,它会覆盖所有匹配元素的内容。
$(selector).html(content)
使用函数来设置所有匹配元素的内容。
$(selector).html(function(index,oldcontent))
| :----------------------- | :----------------------------------------------------------- |
| $("*") | 选取所有元素 |
| $(this) | 选取当前 HTML 元素 |
| $("p.intro") | 选取 class 为 intro 的 < p > 元素 |
| $("p:first") | 选取第一个 < p > 元素 |
| $("ul li:first") | 选取第一个 < ul > 元素的第一个 < li > 元素 |
| $("ul li:first-child") | 选取每个 < ul > 元素的第一个 < li > 元素 |
| $("[href]") | 选取带有 href 属性的元素 |
| $("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 < a > 元素 |
| $("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 < a > 元素 |
| **$(":button")** | **选取所有 type="button" 的 < input > 元素 和 < button > 元素** |
| $("tr:even") | 选取偶数位置的 < tr > 元素 |
| $("tr:odd") | 选取奇数位置的 < tr > 元素 |
## 2.jQuery 文档操作 - html() 方法
> 教程 https://www.w3school.com.cn/jquery/manipulation_html.asp
##### 实例
设置所有 p 元素的内容:
```js
$(".btn1").click(function(){
$("p").html("Hello < b >world< /b >!");
});
html() 方法返回或设置被选元素的内容 (inner HTML)。
如果该方法未设置参数,则返回被选元素的当前内容。
当使用该方法返回一个值时,它会返回第一个匹配元素的内容。
$(selector).html()
当使用该方法设置一个值时,它会覆盖所有匹配元素的内容。
$(selector).html(content)
使用函数来设置所有匹配元素的内容。
$(selector).html(function(index,oldcontent))