本文共 5568 字，大约阅读时间需要 18 分钟。

PS：我用的最新版的WebStorm 。 var可以用const代替，但是很多之前写的代码都没改。 即：var==const

JavaScript的输出

innerHTML

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。

			
zxf
			

显示结果：

document.write()

document.write()同所有HTML文档一起加载的时候，会紧接前面部分输出；在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML

			
123
		试一试	

初始图：

点击后：

windows.alert()

弹出警示框来显示内容：

			
 123
			

显示结果：

console.log()

使用console.log()不会在前端显示数据，在Google浏览器中，打开文件，F12，点击Console即可查看输出结果。

			
123
			

JavaScript代码块

一同执行的两句代码

变量

使用关键字var来声明变量,声明后，被声明的变量的值是undefined。

字符串变量之间可以用 + 连接

"a" + " " + "b"

var x = "8" + 3 + 5;

执行后x=835

var x = 3 + 5 + "8";

执行后x=88

JavaScript 算数运算符

运算符	描述
+	加
-	减
*	乘
**	幂
/	除
%	取余
++	递加
–	递减

JavaScript 赋值运算符

运算符	例子	含义
=	x = y	把y赋值给x
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

JavaScript 比较运算符

运算符	含义
==	等于
===	等值类型（类型和值同事相等）
!=	不等于
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	大雨或小于
?	三元运算符

JavaScript 逻辑运算符

运算符	描述
&&	逻辑与
||	逻辑或
！	逻辑非

JavaScript 类型运算符

运算符	描述
typeof	返回变量的类型
instanceof	如果对象是对象类型实例返回true

JavaScript 对象(类似于python中的字典、C语言中的哈希表)

编写格式：值按照名称 : 值对的形式编写（属性：值）。是命名值的合集。

方法是可以在对象上执行的动作。对象方法是包含函数定义的对象的属性。即方法是对象的属性之一。 比如：

定义一个name对象

name={firstName=“huan”,lastName=“kai”,age=22,fullName=function() {return this.firstName + " " + this.lastName;}}

即：在name对象中

属性	值
firstName	huan
lastName	kai
age	22
fullName	function() {return this.firstName + " " + this.lastName;}

定义对象的方法

• 直接定义，使用对象字面量
  name={firstName="huan",lastName="kai",age=22,fullName=function() {return this.firstName + " " + this.lastName;}}
• 使用JavaScript关键字new
  var name = new Object(); name.firstName : "huan"; name.lastName : "kai"; name.age : 22; name.fullName : function () { return this.firstName + "" + this.lastName; };

JavaScript中的for in循环

在JavaScript中，使用for…in语句遍历对象的属性。

语法：

for (variable in object) {
       要执行的代码}

注意： 要用()包住variable in object

JavaScript中的 Getter和Setter

const person = {
           firstName : "huan",        lastName : "kai",        language : "",        get lang(lang){
               this.language = lang;        },    };  // 使用 setter 来设置对象属性：	person.lang = "en";

const person = {
           firstName : "huan",        lastName : "kai",        age : 18,        get lang(){
               return this.age;        },    };    // 使用 getter 来显示来自对象的数据：    document.getElementById("demo").innerHTML = person.lang;

建立不同对象的不同写法

使用对象字面量 {} 代替 new Object()。

使用字符串字面量 “” 代替 new String()。 使用数值字面量代替 Number()。 使用布尔字面量代替 new Boolean()。 使用数组字面量 [] 代替 new Array()。 使用模式字面量代替 new RexExp()。 使用函数表达式 () {} 代替 new Function()。

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

Undefined 与 Null 的区别

二者值相等，但类型不相同

typeof undefined // undefined

typeof null // object null === undefined // false null == undefined // true

在这里插入代码片

事件

button的onclick事件

			现在的时间		
	

初始状态为：

点击按钮后：

常见的HTML事件

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

.# 转义字符

代码	结果
\b	退格键
\f	换页
\n	换行
\r	回车
\t	水平制表符
\v	垂直制表符

字符串常用方法

方法	含义	使用
length（属性）	返回字符串的长度	txt.length
indexOf()	返回字符串中指定文本首次出现的索引（位置）	str.indexOf(“abc”)
lastIndexOf()	从指定位置开始向后进行检索（从尾到头）	str.lastIndexOf(“abc”, 50)
search()	搜索特定值的字符串，并返回匹配的位置	tr.search(“locate”)
slice()	提取字符串的某个部分并在新字符串中返回被提取的部分；如果某个参数为负，则从字符串的结尾开始计数；如果省略第二个参数，则该方法将裁剪字符串的剩余部分：	str.slice(7,13) str.slice(-13,-7) str.slice(7)
substring()	类似于slice()，但无法接受负数索引	str.substring(7,13)
substr()	截取指定长度字符串。第一个参数指定位置，第二个参数指定截取长度；如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分如果首个参数为负，则从字符串的结尾计算位置。	str.substr(7,6)
replace()	用另一个值替换在字符串中指定的值，返回一个新的字符串，不会更改原有字符串；只替换首个匹配；对大小写敏感，可增加正则表达式/i使之对大小写不敏感；如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）	str.replace(“MSDN”, “CSDN”) str.replace(/MSDN/i, “CSDN”）str.replace(/MSDN/g, “CSDN”）
toUpperCase()	字符串转换为大写	text1.toUpperCase()
toLowerCase()	字符串转换为小写	text1.toLowerCase()
concat()	连接两个或多个字符串	text3 = text1.concat(" ",text2)
concat()	代替加运算符	“Hello” + " " + “World!” === “Hello”.concat(" ",“World!”)
trim()	删除字符串两端的空白符	str.trim()
charAt()	返回字符串中指定下标（位置）的字符串	str.charAt(0)
charCodeAt()	返回字符串中指定索引的字符 unicode 编码	str.charCodeAt(0)
split(“x”)	将字符串转换为数组	txt.split(",") // 用逗号分隔

NaN （Not a Number）- 非数值

NaN类型是number数

如果定义一个NaN型变量，对变量使用typeof，返回值为number。 可以用isNaN(sum)函数进行判断某个数是不是数值 例如：

结果为：

JavaScript数字处理方法

toString(cardinal) 方法以字符串返回数值。

使用方法：NumberObject.toString(cardinal)

其中，参数cardinal用来选择数字的基数，即几进制。默认为10。可选范围为2~36。 例如：

显示结果为：

toFixed() 方法返回字符串值，它包含了指定位数小数的数字。

显示结果为：

toPrecision() 返回字符串值，它包含了指定长度的数字：

显示结果为：

valueOf() 以数值返回数值

显示结果为：

全局方法

方法	描述
Number()	返回数字，由其参数转换而来
parseFloat()	解析其参数并返回浮点数
parseInt()	解析其参数并返回整数

数组

使用Array.foreach()函数遍历数组

使用Array.pufh(“arr”)向数组中添加新元素

表单

格式：

   
    姓名：
    
    
   

required是当提交内容为空时，浏览器会执行表单验证，并提示需要输入。

可以使用以下属性对input进行约束：

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

验证约束的方法：

check
checkValidity()	如果inpue元素包含有效数据，返回true
setCustomValidity()	设置 input 元素的 validationMessage 属性。
customError	如果设置自定义的合法性消息，设置为 true
patternMismatch	如果元素值不匹配其 pattern 属性，设置为 true
rangeOverflow	如果元素值大约其 max 属性，设置为 true
rangeUnderflow	如果元素值小于其 min 属性，设置为 true
stepMismatch	当字段拥有 step 属性，且输入的 value 值不符合设定的间隔值时，设置为 true
tooLong	如果元素值超过了其 maxLength 属性，设置为 true
typeMismatch	当字段的 type 是 email 或者 url 但输入的值不是正确的类型时，设置为 true
valueMissing	如果元素（包含 required）没有值，设置为 true
valid	如果元素值是有效的，设置为 true

例如：

OK

validationMessage属性：假如min=100，如果输入小于100，message中会存储错误信息必须大于100。可以进行判断后输出。

转载地址：https://kaisarh.blog.csdn.net/article/details/102631811 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！