前端学习笔记-没事多看看

实例

把华氏度转换为摄氏度：

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

document.getElementById("demo").innerHTML = toCelsius(77);

一、Html

W3C教程https://www.w3school.com.cn/html/html_jianjie.asp

HTML 属性参考手册https://www.w3school.com.cn/tags/index.asp

重点

1.表单

1.1Action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

在上面的例子中，指定了某个服务器脚本来处理被提交表单：

<form action="action_page.php" >

如果省略 action 属性，则 action 会被设置为当前页面。

1.2Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

1.2.1何时使用 GET？

您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：

action_page.php?firstname=Mickey&lastname=Mouse

**注释：**GET 最适合少量数据的提交。浏览器会设定容量限制。

1.2.2 何时使用 POST？

您应该使用 POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

1.3用fieldset组合表单数据

filedset元素组合表单中的相关数据

legend元素为 fieldset >元素定义标题。

1.4HTML Form 属性

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）。

1.5HTML5 datalist 元素

元素为 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

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>

1.6 HTML5 输入类型

HTML5 增加了多个新的输入类型：

• color 颜色选择器会出现输入字段中
• time / datetime /datetime-local/ date / week / month 日期选择器会出现输入字段中
• email
• number
• range 输入字段能够显示为滑块控件
• search 用于搜索字段（搜索字段的表现类似常规文本字段）
• tel 用于应该包含电话号码的输入字段。目前只有 Safari 8 支持 tel 类型
• url 用于应该包含 URL 地址的输入字段。根据浏览器支持，在提交时能够自动验证 url 字段。

**注释：**老式 web 浏览器不支持的输入类型，会被视为输入类型 text。

输入类型：number

• 用于应该包含数字值的输入字段。

您能够对数字做出限制。

根据浏览器支持，限制可应用到输入字段。

实例

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5" >
form>

输入类型：email

email用于应该包含电子邮件地址的输入字段。

根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。

某些智能手机会识别 email 类型，并在键盘增加 “.com” 以匹配电子邮件输入。

<input type="email" name="email">

输入限制

这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的）：

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

1.7HTML5 为 input增加了如下属性：

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height 和 width
• list
• min 和 max
• multiple
• pattern (regexp)
• placeholder
• required
• step

并为 form 增加如需属性：

• autocomplete
• novalidate 如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。

<form action="action_page.php" novalidate >
   E-mail: < input type="email" name="user_email" >
   <input type="submit" >
form> 

formaction 属性

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 属性

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 属性

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 属性

multiple 属性是布尔属性。

如果设置，则规定允许用户在 input元素中输入一个以上的值。

multiple 属性适用于以下输入类型：email 和 file。

实例

接受多个值的文件上传字段：

Select images: <input type="file" name="img" multiple >

pattern 属性

pattern 属性规定用于检查 input 元素值的正则表达式。

pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。

placeholder 属性

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。

该提示会在用户输入值之前显示在输入字段中。

placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

2.HTML5 实例：

<html>
<head>
<meta charset="UTF-8" >
<title>Title of the documenttitle>
head>

<body>
Content of the document......
body>

html>

**注释：**HTML5 中默认的字符编码是 UTF-8。

HTML5 - 新特性

HTML5 的一些最有趣的新特性：

• 新的语义元素，比如header,footer,article,and section。
• 新的表单控件，比如数字、日期、时间、日历和滑块。
• 强大的图像支持（借由 canvas 和 svg）
• 强大的多媒体支持（借由 video >和 audio）
• 强大的新 API，比如用本地存储取代 cookie。

HTML5 - 被删元素

以下 HTML 4.01 元素已从 HTML5 中删除：

• acronym
• applet
• basefont
• big
• center
• dir
• font
• frame
• frameset
• noframes
• strike
• tt

二、JavaScript

教程https://www.w3school.com.cn/js/js_intro.asp

1.JavaScript简介

JavaScript 能够做什么？

事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：

• 每当页面加载时应该做的事情
• 当页面被关闭时应该做的事情
• 当用户点击按钮时应该被执行的动作
• 当用户输入数据时应该被验证的内容
• 等等

让 JavaScript 处理事件的不同方法有很多：

• HTML 事件属性可执行 JavaScript 代码
• HTML 事件属性能够调用 JavaScript 函数
• 您能够向 HTML 元素分配自己的事件处理函数
• 您能够阻止事件被发送或被处理
• 等等

1. JavaScript 能够改变 HTML 内容

getElementById() 是多个 JavaScript HTML 方法之一。

本例使用该方法来“查找” id=“demo” 的 HTML 元素，并把元素内容（innerHTML）更改为 “Hello JavaScript”：

实例

document.getElementById("demo").innerHTML = "Hello JavaScript";

2.JavaScript 能够改变 HTML 属性

3. JavaScript 能够改变 HTML 样式 (CSS)

改变 HTML 元素的样式，是改变 HTML 属性的一种变种：

实例

document.getElementById("demo").style.fontSize = "25px";

4.JavaScript 能够隐藏\显示 HTML 元素

可通过改变 display 样式来隐藏 \显示HTML 元素：

实例

document.getElementById("demo").style.display="none";

2.JavaScript 使用

2.1script 标签

在 HTML 中，JavaScript 代码必须位于 script 与 /script 标签之间。

实例

<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
script>

**注释：**旧的 JavaScript 例子也许会使用 type 属性：

<script type="text/javascript">。

注释：type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

2.2JavaScript 函数和事件

JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。

例如，当发生事件时调用函数，比如当用户点击按钮时。

2.3head 或 body中的 JavaScript

**提示：**把脚本置于< body >元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

2.4外部脚本

脚本可放置与外部文件中：

function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}

JavaScript 文件的文件扩展名是 .js。

如需使用外部脚本，请在 < script > 标签的 src (source) 属性中设置脚本的名称：

实例

<script src="myScript.js" >script>

**注释：**外部脚本不能包含 < script > 标签。

2.4.1外部引用

可通过完整的 URL 或相对于当前网页的路径引用外部脚本：

本例使用完整的 URL 来链接至脚本：

实例

<script src="https://www.w3school.com.cn/js/myScript1.js" >script>

本例使用了位于当前网站上指定文件夹中的脚本：

实例

<script src="/js/myScript1.js" >script>

3.JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：

• 使用 window.alert() 写入警告框
• 使用 document.write() 写入 HTML 输出
• 使用 innerHTML 写入 HTML 元素
• 使用 console.log() 写入浏览器控制台

**注意：**在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：

提示：document.write() 方法仅用于测试。

3.JavaScript 函数

3.1 JavaScript 函数语法

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

圆括号可包括由逗号分隔的参数：

(参数 1, 参数 2, ...)

由函数执行的代码被放置在花括号中：{}

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

*函数参数（Function parameters）*是在函数定义中所列的名称。

函数参数（Function arguments）是当调用函数时由函数接收的真实的值。

在函数中，参数是局部变量。

在其他编程语言中，函数近似程序（Procedure）或子程序（Subroutine）。

3.2 函数调用

函数中的代码将在其他代码调用该函数时执行：

• 当事件发生时（当用户点击按钮时）
• 当 JavaScript 代码调用时
• 自动的（自调用）

函数提升

在本教程中稍早前，您已经学到了“提升”（hoisting）。

Hoisting 是 JavaScript 将声明移动到当前作用域顶端的默认行为。

Hoisting 应用于变量声明和函数声明。

正因如此，JavaScript 函数能够在声明之前被调用：

myFunction(5);

 function myFunction(y) {
     return y * y;
}

使用表达式定义的函数不会被提升。

3.3函数返回

当 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() 引用的是函数结果

不使用 () 访问函数将返回函数声明而不是函数结果.

3.4 用作变量值的函数

函数的使用方法与变量一致，在所有类型的公式、赋值和计算中。

把函数当做变量值直接使用.

var text = "The temperature is " + toCelsius(77) + " Celsius";

3.5局部变量

• 在 JavaScript 函数中声明的变量，会成为函数的局部变量。
• 局部变量只能在函数内访问。
• 由于局部变量只能被其函数识别，因此可以在不同函数中使用相同名称的变量。
• 局部变量在函数开始时创建，在函数完成时被删除。

4.JavaScript 对象

汽车有诸如车重和颜色等属性，也有诸如启动和停止的方法：

对象	属性	方法
汽车	car.name = porsche car.model = 911 car.length = 4499mm car.color = white	car.start() car.drive() car.brake() car.stop()

所有汽车都拥有同样的属性，但属性值因车而异。

所有汽车都拥有相同的方法，但是方法会在不同时间被执行。

4.1 JavaScript 对象

对象也是变量。但是对象包含很多值。

这段代码把多个值（porsche, 911, white）**赋给名为 car 的变量：

var car = {type:"porsche", model:"911", color:"white"};

值以名称:值对的方式来书写（名称和值由冒号分隔）。

JavaScript 对象是被命名值的容器。

4.1.1对象属性

（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;}

4.2 对象方法

对象也可以有方法。

方法是在对象上执行的动作。

方法以函数定义被存储在属性中。

方法是作为属性来存储的函数。

实例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

4.3this 关键词

在函数定义中，this 引用该函数的“拥有者”。

在上面的例子中，this 指的是“拥有” fullName 函数的 person 对象。

换言之，this.firstName 的意思是 this 对象的 firstName 属性。

4.4对象定义

空格和折行都是允许的。对象定义可横跨多行：

实例

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
};

4.5访问对象属性

您能够以两种方式访问属性：

objectName.propertyName

或者

objectName["propertyName"]

4.6访问对象方法

您能够通过如下语法访问对象方法：

objectName.methodName()

实例

name = person.fullName();

如果您不使用 () 访问 fullName 方法，则将返回函数定义, 方法实际上是以属性值的形式存储的函数定义。

4.7请不要把字符串、数值和布尔值声明为对象！

如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象：

var x = new String();        // 把 x 声明为 String 对象
var y = new Number();        // 把 y 声明为 Number 对象
var z = new Boolean();       //	把 z 声明为 Boolean 对象

请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。

5.HTML 事件

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>

常见的 HTML 事件

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	浏览器已经完成页面加载

6.JavaScript 正则表达式

什么是正则表达式？

1. 正则表达式是构成***搜索模式（search pattern）***的字符序列。
2. 当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。
3. 正则表达式可以是单字符，或者更复杂的模式。
4. 正则表达式可用于执行所有类型的文本搜索和文本替换操作。

6.1语法

/pattern/modifiers;

实例

var patt = /w3school/i;

例子解释：

/w3school/i 是一个正则表达式。

w3school 是模式（pattern）（在搜索中使用）。

i 是修饰符（把搜索修改为大小写不敏感）。

6.2使用字符串方法

在 JavaScript 中，正则表达式常用于两个字符串方法：search() 和 replace()。

search() 方法使用表达式来搜索匹配，然后返回匹配的位置。

replace() 方法返回模式被替换处修改后的字符串

<script>
var str = "Visit W3School!"; 
var n = str.search("W3School");
document.getElementById("demo").innerHTML = n;
script>

6.2.1在字符串方法 search() 中使用正则表达式

实例

使用正则表达式执行搜索字符串中 “w3school” 的大小写不敏感的搜索：

var str = "Visit W3School";
var n = str.search(/w3school/i); 

6.2.2使用字符串方法 replace() 处理字符串

replace() 也接受字符串作为搜索参数：

在字符串方法 replace() 中使用正则表达式

实例

使用大小写不明的正则表达式以 W3school 来替换字符串中的 Microsoft：

var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3School"); 

6.3正则表达式修饰符

修饰符可用于大小写不敏感的更全局的搜素：

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

6.4正则表达式模式

括号用于查找一定范围的字符串：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x|y)	查找由 | 分隔的任何选项。

*元字符（Metacharacter）*是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

Quantifiers 定义量词：

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

6.5使用 RegExp 对象

完整的 RegExp 参考手册: 如需完整的参考手册，请访问我们完整的 JavaScript RegExp 参考手册。

在 JavaScript 中，RegExp 对象是带有预定义属性和方法的正则表达式对象。

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

直接量语法

/pattern/attributes

创建 RegExp 对象的语法：

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 参数，抛出该异常。

6.6使用 test()

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!");

6.7使用 exec()

exec() 方法是一个正则表达式方法。

它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。

如果未找到匹配，则返回 null。

下面的例子搜索字符串中的字符 “e”：

实例

/e/.exec("The best things in life are free!");

由于字符串中有一个 “e”，以上代码的输出将是：

e

7.JavaScript 代码约定

代码约定(Coding conventions)指的是编程的样式指导方针。这些原则大体上包括：

• 变量和函数的命名和声明规则
• 使用空格、缩进和注释的规则
• 编程习惯和准则

1.变量名

在 W3School，我们对标识符名称（变量和函数）使用了驼峰式大小写。

所有名称以字母开头。

2.运算符周围的空格

3.代码缩进

请始终使用对代码块缩进使用 4 个空格：

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";
}

5.对象规则

针对对象定义的通用规则：

• 把开括号与对象名放在同一行
• 在每个属性与其值之间使用冒号加一个空格
• 不要在最后一个属性值对后面写逗号
• 请在新行上写闭括号，不带前导空格
• 请始终以分号结束对象定义

实例

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 50,
    eyeColor:  "blue"
};

可以对短对象在一行中进行压缩，只在属性之间使用空格，就像这样：

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

6.行长度小于 80

7.1命名约定

请始终对您所有的代码使用相同的命名约定。例如：

• 变量和函数名以驼峰大小写 来写
• 全局变量使用大写（我们不这样做，但是相当普遍）
• 常量（比如 PI）使用大写

7.2HTML 和 CSS 中的连字符：

HTML5 属性能够以 data- 开头（data-quantity, data-price）。

CSS 在 property-names 中使用连字符（font-size）。

Hyphens 可被错误地视为减法运算符。JavaScript 命名不允许使用连字符。

7.3驼峰大小写（camelCase）：

JavaScript 本身、jQuery 以及其他 JavaScript 库使用驼峰大小写。

JavaScript 命名请不要以 $ 符号开头。此举会引起 JavaScript 库名称冲突。

7.4文件扩展名

HTML 文件应该使用 .html 扩展名（而非 .htm）。

CSS 文件应该使用 .css 扩展名。

JavaScript 文件应该使用 .js 扩展名。

7.5使用小写文件名

• 大多数 web 服务器（Apache、Unix）对文件名的大小写敏感：
• london.jpg 无法视作 London.jpg 进行访问。
• 其他 web 服务器（微软的 IIS）对大小写不敏感：
• london.jpg 能够以 London.jpg 或 london.jpg 来访问。
• 如果您混合使用大小写，则必须严格保持连续和一致。
• 如果您将站点从大小写不敏感的服务器转移至对大小写敏感的服务器，即使这种小错误也可能破坏您的网站。
• 为了避免这些问题，请始终使用小写文件名（如果可能）。

8.JavaScript 最佳实践

请避免全局变量、new、===、eval()

1.避免全局变量

请尽量少地使用全局变量。

它包括所有的数据类型、对象和函数。

全局变量和函数可被其他脚本覆盖。

请使用局部变量替代，并学习如何使用闭包。

2.始终声明局部变量

所有在函数中使用的变量应该被声明为局部变量。

局部变量必须通过 var 关键词来声明，否则它们将变成全局变量。

严格模式不允许未声明的变量。

3.在顶部声明

一项好的编码习惯是把所有声明放在每段脚本或函数的顶部。

4.请勿使用 new Object()

• 请使用 {} 来代替 new Object()
• 请使用 “” 来代替 new String()
• 请使用 0 来代替 new Number()
• 请使用 false 来代替 new Boolean()
• 请使用 [] 来代替 new Array()
• 请使用 /()/ 来代替 new RegExp()
• 请使用 function (){}来代替 new Function()

实例

var x1 = {};           // 新对象
var x2 = "";           // 新的原始字符串值
var x3 = 0;            // 新的原始数值
var x4 = false;        // 新的原始布尔值
var x5 = [];           // 新的数组对象
var x6 = /()/;         // 新的正则表达式
var x7 = function(){}; // 新的函数对象

5.意识到自动类型转换

请意识到数值会被意外转换为字符串或 NaN（Not a Number）。

JavaScript 属于松散类型。变量可包含不同的数据类型，并且变量能够改变其数据类型：

实例

var x = "Hello";     // typeof x 为字符串
x = 5;               // 把 typeof x 更改为数值

用字符串减去字符串，不会产生错误而是返回 NaN（Not a Number）.

6.使用 === 比较

== 比较运算符总是在比较之前进行类型转换（以匹配类型）。

=== 运算符会强制对值和类型进行比较：

实例

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false

7.使用 Parameter Defaults

如果调用函数时缺少一个参数，那么这个缺失参数的值会被设置为 undefined。

undefined 值会破坏您的代码。为参数设置默认值是一个好习惯。

实例

function myFunction(x, y) {
    if (y === undefined) {
        y = 0;
    }
}

8.用 default 来结束 switch

9.避免使用 eval()

eval() 函数用于将文本作为代码来允许。在几乎所有情况下，都没有必要使用它。

因为允许任意代码运行，它同时也意味着安全问题。

9.JavaScript 表单验证

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

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

9.1自定义javaScript函数验证表单

JavaScript 实例

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

该函数能够在表单提交时被调用：

HTML 表单实例

<form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post" >
姓名：<input type="text" name="fname" >
<input type="submit" value="Submit" >
form>

9.2自动 HTML 表单验证

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

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

HTML 表单实例

<form action="/action_page_post.php" method="post" >
   <input type="text" name="fname" required >
   <input type="submit" value="Submit" >
form>

9.3数据验证

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

典型的验证任务是：

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

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

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

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

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

9.4HTML 约束验证

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

HTML 约束验证基于：

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

约束验证 HTML 输入属性

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

如需完整的列表，请访问我们的 HTML input 属性。

约束验证 CSS 伪选择器

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

如需完整列表，请访问 CSS 伪类。

10.JavaScript 变量

JavaScript 变量是存储数据值的容器。

JavaScript 标识符

所有 JavaScript 变量必须以唯一的名称的标识。

这些唯一的名称称为标识符。

标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。

构造变量名称（唯一标识符）的通用规则是：

• 名称可包含字母、数字、下划线和美元符号
• 名称必须以字母开头
• 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
• 名称对大小写敏感（y 和 Y 是不同的变量）
• 保留字（比如 JavaScript 的关键词）无法用作变量名称

三、JavaScript JSON

教程https://www.w3school.com.cn/js/js_json.asp

JSON 是存储和传输数据的格式。

JSON 经常在数据从服务器发送到网页时使用。

什么是 JSON？

• JSON 指的是 JavaScript Object Notation
• JSON 是轻量级的数据交换格式
• JSON 独立于语言 *****
• JSON 是“自描述的”且易于理解

* JSON 的语法是来自 JavaScript 对象符号的语法，但 JSON 格式是纯文本。读取和生成 JSON 数据的代码可以在任何编程语言编写的。

1.JSON 实例

JSON 语法定义了一个雇员对象：包含三条员工记录的数组（对象）：

JSON 实例

{
"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"},
    {"firstName":"Alan", "lastName":"Turing"}
]
}

2. JSON 格式评估为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象的代码相同。

3.JSON 语法规则

• 数据是名称/值对
• 数据由逗号分隔
• 花括号保存对象
• 方括号保存数组

3.1JSON 数据 - 名称和值

JSON 数据的书写方式是名称/值对，类似 JavaScript 对象属性。

名称/值对由（双引号中的）字段名构成，其后是冒号，再其后是值：

"firstName":"Bill"

JSON 名称需要双引号。JavaScript 名称不需要。

3.2 JSON 对象

JSON 对象是在花括号内书写的。

类似 JavaScript，对象能够包含多个名称/值对：

{"firstName":"Bill", "lastName":"Gates"} 

3.3JSON 数组

JSON 数组在方括号中书写。

类似 JavaScript，数组能够包含对象

4.把 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> 

四、AJAX

教程 https://www.w3school.com.cn/js/js_ajax_intro.asp

菜鸟教程 https://www.runoob.com/jquery/ajax-getjson.html

jQuery getJSON() 方法

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 对象

jQuery 遍历 - map() 方法

定义和用法

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，则不会插入任何元素。

五、jQuery

教程https://www.runoob.com/jquery/jquery-selectors.html

1. jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

1.元素选择器：$(“p”)

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 < p > 元素:

$(“p”)

实例

用户点击按钮后，所有 < p > 元素都隐藏：

实例

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

2.id 选择器$("#test")

3. .class 选择器$(".test")

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 > 元素

2.jQuery 文档操作 - html() 方法

教程 https://www.w3school.com.cn/jquery/manipulation_html.asp

实例

设置所有 p 元素的内容：

$(".btn1").click(function(){
  $("p").html("Hello < b >world< /b >!");
});

定义和用法

html() 方法返回或设置被选元素的内容 (inner HTML)。

如果该方法未设置参数，则返回被选元素的当前内容。

1.返回元素内容

当使用该方法返回一个值时，它会返回第一个匹配元素的内容。

语法

$(selector).html()

2.设置元素内容

当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。

语法

$(selector).html(content)

3.使用函数来设置元素内容

使用函数来设置所有匹配元素的内容。

语法

$(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)。

如果该方法未设置参数，则返回被选元素的当前内容。

1.返回元素内容

当使用该方法返回一个值时，它会返回第一个匹配元素的内容。

语法

$(selector).html()

2.设置元素内容

当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。

语法

$(selector).html(content)

3.使用函数来设置元素内容

使用函数来设置所有匹配元素的内容。

语法

$(selector).html(function(index,oldcontent))