JavaScript
js输出
JavaScript显示方案:
-使用 window.alert() 写入警告框
-使用 document.write() 写入HTML输出
-使用 innerHTML 写入HTML元素
-使用 console.log() 写入浏览器控制台
js关键字
关键字 | 描述 |
---|---|
break | 终止switch或循环 |
continue | 跳出循环并在顶端开始 |
debugger | 停止执行JavaScript,并调用调试函数(如果可用) |
do…while | 执行语句块,并在条件为真时重复代码块 |
for | 标记需被执行的语句块,只要条件为真。 |
function | 声明函数 |
if…else | 标记需被执行的语句块,根据某个条件 |
return | 退出函数 |
switch | 标记需被执行的语句块,根据不同的情况 |
try … catch | 对语句块实现错误处理 |
var | 声明变量 |
js数据类型
JavaScript数据类型:
javascript有五种可包含值的数据类型:字符串值(String)、数值(Number)、布尔值(Boolean)、对象(Object)、函数(Function)。
有三种对象类型:
对象(Object)、日期(Date)、数组(Array)。
同时有两种不能包含值的数据类型:
null、undefined。
typeof运算符:
type 0.123 //返回Number
js字符串方法
- length属性返回字符串的长度。
- indexOf()方法返归字符串中指定文本首次出现的索引(位置),如果未找到文本返回-1.
- lastIndexOf()方法返回指定文本在字符串中最后一次出现的索引,如果未找到文本返回-1。
- search()方法搜索特定值的字符串,并返回匹配的位置。
- slice()提取字符串的某个部分并在新字符串中返回被提取的部分,该方法设置两个参数:起始索引(开始位置),终止索引(结束位置)。
- substring()类似于 slice(),不同之处在于 substring() 无法接受负的索引。
- substr()类似于 slice(),不同之处在于第二个参数规定被提取部分的长度。
- replace() 方法用另一个值替换在字符串中指定的值。
- toUpperCase()把字符串转换为大写。
- toLowerCase()把字符串转换成小写。
- concat() 连接两个或多个字符串。
- trim() 方法删除字符串两端的空白符。
- charAt() 方法返回字符串中指定下标(位置)的字符串。
- charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码。
- split() 将字符串转换为数组。
js数字方法
- toString() 以字符串返回数值。
- toExponential() 返回字符串值,它包含已被四舍五入并使用指数计数法的数。
- toFixed() 返回字符串值,它包含了指定位数小数的数字。
- toPrecision() 返回字符串值,它包含了指定长度的数字。
- valueOf() 以数值返回数值。
- Number() 可用于把 JavaScript 变量转换为数值,还可以把日期转化为数值。
- parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字。
- parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字。
数字属性:
属性 | 描述 |
---|---|
MAX_VALUE | 返回 JavaScript 中可能的最大数。 |
MIN_VALUE | 返回 JavaScript 中可能的最小数。 |
MIN_VALUE | 表示负的无穷大(溢出返回)。 |
NaN | 表示非数字值(“Not-a-Number”)。 |
POSITIVE_INFINITY | 表示无穷大(溢出返回)。 |
js数组
数组方法:
- toString() 把数组转换为数组值(逗号分隔)的字符串。
- join() 方法也可将所有数组元素结合为一个字符串。
- pop() 方法从数组中删除最后一个元素。
- push() 方法(在数组结尾处)向数组添加一个新的元素。
- shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引。
- unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素。
- splice() 方法可用于向数组添加新项,第一个参数定义了应添加新元素的位置(拼接),第二个参数定义应删除多少元素。
- concat() 方法通过合并(连接)现有数组来创建一个新数组。
- slice() 方法用数组的某个片段切出新数组。
数组排序:
- sort() 方法以字母顺序对数组进行排序。
- reverse() 方法反转数组中的元素。
数组迭代:
- forEach() 方法为每个数组元素调用一次函数(回调函数),该函数接受 3 个参数:项目值,项目索引,数组本身。IE9+
- map() 方法通过对每个数组元素执行函数来创建新数组,该函数接受 3 个参数:项目值,项目索引,数组本身。IE9+
- filter() 方法创建一个包含通过测试的数组元素的新数组,该函数接受 3 个参数:项目值,项目索引,数组本身。IE9+
- reduce() 方法在每个数组元素上运行函数,以生成(减少它)单个值,该函数接受4个参数:总数(初始值/先前返回的值)、项目值、项目索引、数组本身。IE9+
- reduceRight() 方法在每个数组元素上运行函数,以生成(减少它)单个值,该函数接受4个参数:总数(初始值/先前返回的值)、项目值、项目索引、数组本身。IE9+
- every() 方法检查所有数组值是否通过测试,该函数接受3个参数:项目值、项目索引、数组本身。IE9+
- some() 方法检查某些数组值是否通过了测试,该函数接受3个参数:项目值、项目索引、数组本身。IE9+
- indexOf() 方法在数组中搜索元素值并返回其位置。
- lastIndexOf() 与 Array.indexOf() 类似,但是从数组结尾开始搜索。
- find() 方法返回通过测试函数的第一个数组元素的值,该函数接受3个参数:项目值、项目索引、数组本身。IE9+
- findIndex() 方法返回通过测试函数的第一个数组元素的索引,该函数接受3个参数:项目值、项目索引、数组本身。IE9+
日期
日期获取方法:
方法 | 描述 |
---|---|
getDate() | 以数值返回天(1-31) |
getDay() | 以数值获取周明(0-6) |
getFullYear() | 获取四位的年(yyyy) |
getHours() | 获取小时(0-23) |
getMilliseconds() | 获取毫秒(0-999) |
getMinutes() | 获取分(0-59) |
getMonth() | 获取月(0-11) |
getSeconds() | 获取秒(0-59) |
getTime() | 获取时间(从 1970 年 1 月 1 日至今) |
Math对象
- Math.round(x) 的返回值是 x 四舍五入为最接近的整数。
- Math.pow(x, y) 的返回值是 x 的 y 次幂。
- Math.sqrt(x) 返回 x 的平方根。
- Math.abs(x) 返回 x 的绝对(正)值。
- Math.ceil(x) 的返回值是 x 上舍入最接近的整数。
- Math.floor(x) 的返回值是 x 下舍入最接近的整数。
- Math.sin(x) 返回角 x(以弧度计)的正弦(介于 -1 与 1 之间的值)。
- Math.cos(x) 返回角 x(以弧度计)的余弦(介于 -1 与 1 之间的值)。
- Math.min() 可用于查找参数列表中的最低值。
- Math.max() 可用于查找参数列表中的最高值。
- Math.random() 返回介于 0(包括) 与 1(不包括) 之间的随机数。
- Math.acos(x) 返回 x 的反余弦值,以弧度计。
- Math.asin(x) 返回 x 的反正弦值,以弧度计。
- Math.atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
- Math.atan2(y,x) 返回从 x 轴到点 (x,y) 的角度。
- Math.exp(x) 返回 Ex 的值。
- Math.log(x) 返回 x 的自然对数(底为e)。
- Math.tan(x) 返回角的正切。
javscript 逻辑
0(零)、-0(负零)、""(空值)、undefined、null、false、NaN的布尔值都是false。
javscript 事件
事件 | 描述 |
---|---|
onchange | HTML元素已被改变 |
onclick | 用户点击HTML元素 |
onmouseover | 用户将鼠标移动到HTML元素上 |
onmouseout | 用户将鼠标移开HTML元素 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已经完成页面加载 |
javscript 循环
- for:多次遍历代码块
- for/in:遍历对象属性
- while:当指定条件为true时循环一段代码块
- do/while:当指定条件为true时循环一段代码块
javscript 正则表达式
- search():使用表达式来搜索匹配,然后返回匹配的位置。
- replace():返回模式被替换处修改后的字符串。
- test():是一个正则表达式的方法,它通过模式来搜索字符串,然后根据结果返回true或false。
- exec():是一个正则表达式的方法,它通过指定模式搜索字符串,并返回已找到的文本。
- match():找到一个或多个正则表达式的匹配。
- split():把字符串分割成字符串数组。
javscript 错误
- try语句使您能够测试代码块中的错误。
- catch语句允许你处理错误。
- throw语句允许你创建自定义错误。
- finally使您能够执行代码,在try和catch之后,无论结果如何。
javscript 严格模式
通过在脚本或函数的开头添加"use strict";
来声明严格模式。
在脚本开头进行声明,拥有全局作用域(脚本中的所有代码均以严格模式来执行)。
以下版本的浏览器支持严格模式:
版本 10 以后的 IE
版本 4 以后的 Firefox
版本 13 以后的 Chrome
版本 5.1 以后的 Safari
版本 12 以后的 Opera
"use strict"指令只能在脚本或函数的开头被识别。
javscript5
ECMAScript5是什么?
ECMAScript5也被称为ES5和ECMAScript2019。
ECMAScript5新特性:
- "use strict"指令
- String.trim()
- Array.isArray():检查对象是否为数组
- Array.forEach()
- Array.map()
- Array.filter():过滤
- Array.reduce():确定数组中所有数的总和
- Array.reduceRight()
- Array.every()
- Array.some()
- Array.indexOf()
- Array.lastIndexOf()
- JSON.parse()
- JSON.stringify()
- Date.now():返回自零日期(1970 年 1 月 1 日 00:00:00:00)以来的毫秒数
- 属性Getter和Setter
- 新的对象属性和方法
- String.charAt():返回字符串中指定索引(位置)的字符。
ES5新的对象方法:
方法 | 描述 |
---|---|
Object.defineProperty() | 它允许您定义对象属性和/或更改属性的值和/或元数据 |
Object.defineProperty(object, property, descriptor) | 添加或更改对象属性 |
Object.defineProperties(object, descriptors) | 添加或更改多个对象属性 |
Object.getOwnPropertyDescriptor(object, property) | 访问属性 |
Object.getOwnPropertyNames(object) | 将所有属性作为数组返回 |
Object.keys(object) | 将可枚举属性作为数组返回 |
Object.getPrototypeOf(object) | 访问原型 |
Object.preventExtensions(object) | 防止向对象添加属性 |
Object.isExtensible(object) | 如果可以将属性添加到对象,则返回true |
Object.seal(object) | 防止更改对象属性(而不是值) |
Object.isSealed(object) | 如果对象被密封,则返回true |
Object.freeze(object) | 防止对对象进行任何更改 |
Object.isFrozen(object) | 如果对象被冻结,则返回true |
ES6
ES6的新特性
- JavaScript let
- JavaScript const
- 幂(**)
- 默认参数值
- Array.find():返回通过测试函数的第一个数组元素的值,此函数接受三个参数:项目值、项目索引、数组本身。
- Array.findIndex():返回通过测试函数的第一个数组元素的索引,此函数接受三个参数:项目值、项目索引、数组本身。
新的数字属性:
- EPSILON
- MIN_SAFE_INTEGER
- MAX_SAFE_INTEGER
新的数字方法:
- Number.isInteger():如果参数是整数则返回true。
- Number.isSafeInteger():安全整数是可以精确表示为双精度数的整数,如果参数是安全参数则返回true。
新的全局方法:
- isFinite():如果参数为 Infinity 或 NaN,则全局 isFinite() 方法返回 false。
- isNaN():如果参数是 NaN,则全局 isNaN() 方法返回 true。
箭头函数:
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
const x = (x, y) => { return x * y };
箭头功能没有自己的this,它们不适合定义对象方法。
JavaScript表单
约束验证HTML输入属性:
属性 | 描述 |
---|---|
disabled | 规定 input 元素应该被禁用 |
max | 规定 input 元素的最大值 |
min | 规定 input 元素的最小值 |
pattern | 规定 input 元素的值模式 |
required | 规定输入字段需要某个元素 |
type | 规定 input 元素的类型 |
约束验证CSS伪类元素:
属性 | 描述 |
---|---|
:disabled | 选择设置了 “disabled” 属性的 input 元素 |
:invalid | 选择带有无效值的 input 元素 |
:optainal | 选择未设置 “required” 属性的 input 元素 |
:required | 选择设置了 “rqquired” 属性的 input 元素 |
:valid | 选择带有有效值的 input 元素 |
JavaScript 对象原型
原型继承:
所有 JavaScript对象都从原型继承属性和方法。
日期对象继承自Date.prototype。数据对象继承自Array.prototype。Person对象继承自Preson.prototype。
Object.prototype位于原型继承链的顶端。
日期对象、数组对象和Person对象都继承自Object.prototype。
向对象添加属性和方法
使用prototype
属性:
JavaScript prototype属性允许您为对象构造器添加新的属性:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = lase;
this.age = age;
this.eyecolor= eyecolor;
}
Person.prototype.nationality = "English";
JavaScript prototype属性也允许您为对象构造器添加新的方法:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyecolor = eyecolor;
}
Person.prototype.name = function() {
return this.firstName + " " + this.laseName;
}
ES5对象方法
- Object.defineProperty(object, property, descriptor) : 添加或更改对象属性
var person = { firstName: "Bill", lastName: "Gates", language: "EN" } // 更改属性 Object.defineProperty(person, "language", {value: "ZH"}); // 添加属性 Object.defineProperty(person, "year", {value: "2020"});
- Object.defineProperties(object, descriptors):添加或更改多个对象属性
- Object.getOwnPropertyDescriptor(object, propertype):访问属性
- Object.getOwnPropertyNames(object):以数组返回所有属性
var person = { firstName: "Bill", lastName: "Gates", language: "EN" } Object.defineProperty(person, "language", {enumerable: false}); Object.getOwnProperty(person); // 返回属性数组
- Object.keys(object):以数据返回所有可枚举的属性
var person = { firstName: "Bill", lastName: "Gates", language: "EN" } Object.defineProperty(person, "language", {enumerable: false}); Object.keys(person) // 返回可枚举属性的数组
- Object.getPrototypeOf(object):访问原型
- Object.preventExtensions(object):阻止向对象添加属性
- Object.isExtensible(object):如果可将属性添加到对象,则返回true
- Object.seal(object):防止更改对象属性(而不是值)
- Object.isSealed(object):如果对象被密封,则返回true
- Object.freeze(object):防止对对象进行任何更改
- Object.isFrozen(object):如果对象被冻结,则返回true
更改元数据
ES5允许更改一下 属性元数据:
-
writable : true // 属性值可修改
-
enumerable : true // 属性可枚举
-
configurable : true // 属性可重新配置
-
writable : false // 属性值不可修改
-
enumerable : false // 属性不可枚举
-
configurable : false // 属性不可重新配置
ES5允许更改getter和setter:
// 定义 getter get: function() { return language; } // 定义 setter set: function(value) { language = value; }
此列使语言为只读:
Object.defineProperty(person, "language", {writable: false});
此列使语言不可枚举:
Object.defineProperty(person, "language",{enumerable: false});
javscript 函数
函数是对象
javascript 中的 typeof 运算符会为函数返回 function。
但是最好是把JavaScript函数描述为对象。
JavaScript函数都有属性和方法。
arguments.length
会返回函数被调用时收到的参数数目:
function myFunction(a, b) {
return arguments.length; // 2
}
toString()
方法以字符串返回函数。
箭头函数
// ES5
var x= function(x, y) {
return x * y;
}
//ES6
const x = (x, y) => x * y;
const x = (x, y) => { return x * y };
箭头功能没有自己的this,它们不适合定义对象方法。IE11或更早版本不支持箭头函数。
函数参数
如果函数调用的参数太多(超过声明),则可以使用arguments对象
来达到这些参数。
arguments对象
JavaScript函数有一个名为arguments对象的内置对象。
arguments对象包含函数调用时使用的参数数组。
var x = sumAll(1, 123, 34, 233, 256, 44, 88); // 79
function sumAll() {
vari, sum = 0;
for (i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
函数call
call()方法是预定义的JavaScript方法,它可以用来调用所有者对象作为参数的方法。通过call(),你能够使用属于另一个对象的方法。
var person = {
fullName: function(city) {
return this.firstName + " " + this.lastName + " " + city;
}
}
var person1 = {
firstName: "Bill",
lastName: "Gates",
}
var person2 = {
firstName: "Steve",
lastName: "Jobs",
}
person.fullName.call(person1, "Seattle"); // 将返回 "Bill Gates Seattle"
函数Apply
apply()方法与call()方法非常相似,不同之处:
call()
方法分别接受参数。
apply()
方法接受数组形式的参数。
var person = {
fullName: function(city) {
return this.firstName + " " + this.lastName + " " + city;
}
}
var person1 = {
firstName: "John",
lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo"]); // John Doe Oslo
在数组上模拟max方法
Math.max(1, 2, 3); // 会返回 3
由于JavaScript数组没有max()方法,因此您可以应用Math.max()
方法。
Math.max.apply(null, [1, 2, 3]); // 会返回3
Math.max.apply(Math, [1, 2, 3]); // 会返回3
Math.max.apply(" ", [1, 2, 3]); // 会返回3
Math.max.apply(0, [1, 2, 3]); // 会返回3
在JavaScript严格模式下,如果
apply()
方法的第一个参数不是对象,则它将称为被调用函数的所有者(对象)。在“非严格”模式下,它称为全局对象。
JavaScript必包
var add = (function () {
var counter = 0;
return function () { return counter += 1; }
})();
add();
add();
add();
// 计数器目前是3
这被成为JavaScript闭包,它是函数拥有“私有”变量成为可能。计数器被这个匿名函数的作用域保护,并且只能使用add函数来修改。闭包指的是有权访问父作用域的函数,即使在父函数关闭之后。
JavaScript HTML DOM
查找HTML元素:
方法 | 描述 |
---|---|
document.getElementById(id) | 通过元素id来查找元素 |
document.getElementsByTagName(name) | 通过标签名来查找元素 |
document.getElementsByClassName(name) | 通过类名来查找元素 |
改变HTML元素:
方法 | 描述 |
---|---|
element.innerHTML = new html content | 改变元素的 inner HTML |
element.attribute = new value | 改变HTML元素的属性值 |
element.setAttribute(attribute, value) | 改变HTML元素的属性值 |
element.style.property = new style | 改变HTML元素的样式 |
添加和删除元素:
方法 | 描述 |
---|---|
document.createElement(element) | 创建HTML元素 |
document.removeChild(element) | 删除HTML元素 |
document.appendChild(element) | 添加HTML元素 |
document.replaceChild(element) | 替换HTML元素 |
document.write(text) | 写入HTML输出流 |
添加事件处理程序
方法 | 描述 |
---|---|
document.getElementById(id).onclick = function(){code} | 向onclick事件添加事件处理程序 |
查找HTML对象
属性 | 描述 |
---|---|
document.anchors | 返回拥有 name 的所有 元素。 |
document.baseURl | 返回文档的绝对基准 URl |
document.body | 返回 元素 |
document.cookie | 返回文档的 cookie |
document.doctype | 返回文档的 doctype |
document.documentElement | 返回 元素 |
document.documentMode | 返回浏览器使用的模式 |
document.documentURl | 返回文档的 URl |
document.domain | 返回文档服务器的域名 |
document.forms | 返回所有 元素 |
document.head | 返回 元素 |
document.images | 返回所有 元素 |
document.links | 返回拥有 href 属性的所有 和 元素 |
document.readyState | 返回文档的(加载)状态 |
document.referrer | 返回引用的 URl(链接文档) |
document.scripts | 返回所有 |
通过 CSS 选择器查找 HTML 元素
如果你需要查找匹配指定CSS选择器(id、类名、类型、属性、属性值等等)的所有HTML元素,请使用querySelectorAll()
方法。
<p class="intro">DOM 很有用。</p>
<p class="intro">演示<b>querySelectorAll</b>方法。</p>
<p id="demo"></p>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = x[0].innerHTML;
通过 HTML 对象选择器查找 HTML 对象
<form action="/demo/action_page.php" method="post" id="frm1">
<input type="text" name="fname" value="Bill" />
<br>
<input type="text" name="lname" value="Gates" />
<input type="submit" value="提交"/>
</form>
<button onclick="myFunction6()">试一试,显示表单中每个元素的值</button>
function myFunction6() {
var x = document.forms["frm1"];
var text = "", i;
for (i = 0; i < x.length; i++) {
console.log(x.elements[i].value);
}
}
以下 HTML 对象(和对象集合)也是可访问的:
对象 | 描述 |
---|---|
document.anchors | |
document.body | |
document.documentElement | |
document.embeds | |
document.forms | |
document.head | |
document.images | |
document.links | |
document.scripts | |
document.title |
HTML DOM 事件监听器
-
addEventListenter()
方法:添加当用户点击按钮是触发的事件监听器<button id="myBtn"></button> <p id="demo"></p> document.getElementById("myBtn").addEventListenter(click, displayDate); function displayDate() { document.getElementById("demo").innerHTML = Date(); }
addEventListenter()
方法为指定元素指定事件处理程序。
addEventListenter()
方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。是我们更容易控制事件如何对冒泡作出反应。可以通过使用removeEventListenter()
方法轻松的删除事件监听器。