JS（一）基本语法、数据类型与DOM树操作
layout: post
title: JS（一）基本语法、数据类型与DOM树操作
description: JS（一）基本语法、数据类型与DOM树操作
tag: 前端
文章目录
- JS概念
- 快速入门
- js引入
- 基本语法
- 严格检查模式
- 数据类型
- 字符串
- 数组
- 流程控制
- Map和Set
- 函数定义与参数传递
- 变量的作用域、let、const
- 方法的定义与调用
- 常用内部对象
- json
- 对象原型
- 操作BOM对象
- 操作DOM对象
- 表单操作（验证）+MD5算法检验密码
- jQuery
JS笔记网站
JS概念
JavaScript是世界上最好用的脚本语言，用于浏览器交互操作
ECMCScript是JavaScript的语言标准
快速入门
js引入
JS既有专门的.js文件，在html文件中使用script标签，添加src属性引入js文件，也可在html文件中直接使用，用script标签，script标签必须成对出现
基本语法
-
变量
JS只有var类型变量
语句于java类似
Element：元素（html框架）
Console：命令控制台，如console.log(“”/var)，控制台输出，相当于print
Sources：源码
Network：抓包
Application：应用，查看缓存等 -
数据类型
Number：JS不区分小数和整数
-
比较运算符
NaN与任何数字都不相等，包含自身，只能用isNaN判断
避免用浮点数计算比较，有精度损失
- null和undefined
空和未定义 - 判断undefined：
var tmp = undefined;if (typeof(tmp) == "undefined"){alert("undefined");}说明：typeof 返回的是字符串，有六种可能：“number”、“string”、“boolean”、“object”、“function”、“undefined”
- 判断null:
var tmp = null;if (!tmp && typeof(tmp)!="undefined" && tmp!=0){alert("null");}
说明：即非零又非undefined
- 判断NaN:
var tmp = 0/0;if(isNaN(tmp)){alert("NaN");}
说明：isNaN函数判断
- 判断undefined和null:
var tmp = undefined;if (tmp== undefined){alert("null or undefined");}var tmp = undefined;if (tmp== null){alert("null or undefined");}说明：null==undefined
- 判断undefined、null与NaN:
var tmp = null;if (!tmp){alert("null or undefined or NaN");}
- 数组
JS不需要数组中元素类型统一
取数组下标，如果越界，会提示undefined
- 对象
数组是中括号，对象是大括号
对象的定义：
var 对象名{
属性1：属性值，
属性2：属性值，
属性3：属性值}
属性值也可以是一个方法返回的结果
例：
var person = {
age:22,
height:170,
weight:55,
birth:function()={
var now = Data().getFullYear();
return now-this.age}
}
对象类似结构体，可有多个属性构成，每个属性用逗号隔开，最后一个不需要
严格检查模式
数据类型
字符串
数组
流程控制
while，for循环与java一致
if - else语句也一致
JS特殊的，可用一些方法
Map和Set
函数定义与参数传递
关键字throw，抛出异常，类似汇报异常报告
关键字：arguments，一个包含所有函数输入参数的数组
变量的作用域、let、const
全局变量绑定在window的下边
方法的定义与调用
方法.apply（对象1，参数）
apply修饰方法，可以将方法中的this指向为apply的第一个参数，对象名，apply的第二的参数是给方法输入参数赋值
常用内部对象
typeof()
Date()
注：Date（timestamp）可由时间戳返回时间
json
json是数据在传输时的存在形式，在抓包中可以看见。
对象原型
.proto:指向某个对象作为原型，类似父类对象
其实proto只是指向了原型对象，并不是真正意义上的继承，如果对象指定一个原型对象后，当对象再指定第二个原型时，对象有的第一个原型的属性会丢失，即不再与第一个原型有指向关系。。
既然类似Java的继承父类，JS后来引入了class关键字
使用class定义的对象，可以使用new关键字直接继承这个类的属性
也可用extend，在构建子类时继承父类
操作BOM对象
浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。
document
操作DOM对象
DOM为网页的文档树，全称是Document Object Model，翻译过来是文档对象模型的意思
- 在已有节点下追加节点
使用append给父级节点追加新节点：
- 创建新的节点
表单操作（验证）+MD5算法检验密码
- 获取表单信息
- 表单提交绑定事件
onsubmit = function/class
<form action="" method="post" onsubmit="functionName() ">form><script>function functionName(){alert(1)}
- 按钮绑定事件
onclick = function/class
<p><input type="button" onclick="functionName()">
p>
jQuery
jQuery CDN加速
jQuery中文文档
jQuery 使用公式:$选择器().action()
/“拿钱给人办事”/
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！