JavaScript 小白手册

JavaScript

1. 变量

• 在函数中声明

  // 都为局部变量
  function fun() {
         
      var a, b, c = 1;
  }
  

  // 则除了第一个为局部，其它则全局
  function fun() {
         
      var a = b = c = 20;
  }
  

  // 都是全局变量
  function fun() {
         
      a = 1, b = 1;
  }
  

• 在函数外声明

  var a = 1;   //全局变量
  

• 结构赋值

  var [a,b,c] = [1,2,3];
  

2. 数据类型

2.1 基本类型

基本类型	说明
Number	数字类型
String	字符串类型
Boolean	true与false
Null	空对象赋值，主要是和undefined进行区分
Undefined	变量声明不赋值的情况下，默认值是undefined

2.2 引用类型

引用类型	说明
Object	对象

• 引用数据类型：Object
• 在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象

2.3 类型转换

• 强制类型转换

  函数	作用
  Number()	强制转为Number类型
  Boolean()	强制转为Boolean类型

2.4 判断数据类型

• 判断数据类型：typeof

3. 特殊的关系运算符

运算符	作用
==	值一致即可
===	需要类型与值一致

【注意】：null == undefined //返回true

4. 数组声明

1. var arr = new Array(); //声明一个空数组对象
2. var arr = new Array(length) //声明一个指定长度的数组
3. var arr = [元素] //声明数组(最常用);

【注意】：js中的数组声明不用指定长度，js的数组长度是不固定的，会随着元素的数量改变而改变。

5. 对象声明

1. var 对象名 = new Object();

   var obj1 = new Object();
   obj1.attr = "obj1";
   obj1.fun = function () {
          
       console.log("obj1");
   }
   

2. var 对象名 = {};

   var obj2 = {
          
       attr: "obj2",
       fun: function () {
          
           console.log("obj2");
       }
   }
   

3. function 类名() {this.属性名=属性值; … }

   function Obj3() {
          
       this.attr = "obj3";
       this.fun = function () {
          
           console.log("obj3");
       }
   }
   

4. Object.create()

   var obj4 = Object.create({
          
       attr: "obj4",
       fun: function () {
          
           console.log("obj4");
       }
   });
   

6. 内置对象

6.1 String

函数	作用
concat()	连接
indeoxOf(str[,start])	查找或指定位置开始查询
lastIndexOf(str[,start])	从最后开始查找或指定位置开始查询
charAt(index)	返回此索引的值
replace(str,newStr)	替换
trim()	清除左右两边的空格
split©	切割
toLowerCase()	转为小写
toUpperCase()	转为大写
substring([start][,end])	截取start~end
slice(start[,end])	截取，end可为负值(代表从后面开始)
substr(start[,length])	截取，可指定长度

6.2 Array

函数	作用
join(str)	将数组中的每一个元素都和str连接,最后将所有元素进行组合，变成字符串。
pop()	将数组中最后一个元素删除并且返回
push(str)	向数组末尾添加一个或多个元素，并且返回新长度
shift()	删除并返回数组中的首个元素
unshift([items])	向数组开头添加一个或多个items元素
slice(start[,end])	获取start到end的元素
splice(start[,end][,items])	删除start到end的元素，且添加一个或多个items元素
sort()	正序排序
reverse()	将数组倒序排序

6.3 Math

函数	作用
ceil(num)	向上取整
floor(num)	向下取整
min(num)	获取最小值
max(num)	获取最大值
pow(num,a)	num的a次方
random()	0-1的随机数
round(num)	四舍五入
sqrt(num)	开平方

6.4 Date

函数	作用
getFullYear()	获取年
getMonth()	获取月(0-11)
getDate()	获取日(1-31)
getDay()	获取星期几(0-6)
getTime()	获取当前时间(1970.1.1开始)
getHours()	获取小时(0-23)
getMinutes()	获取分钟(0-59)
getSeconds()	获取秒数(0-59)

6.5 Global

函数	作用
eval()	将字符串转为可以执行js代码
isNaN(“123”)	isNaN判断是否值为NaN,会自动做一次Number()强转
parseFloat(str2)	获取以浮点开头的字符串,返回string类型
parseInt(str1)	获取以整形开头的字符串,返回string类型

7. BOM

• 概述：BOM浏览器对象模型，是规范浏览器对js语言的支持(js调用浏览器本身的功能)。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2H6M9yyJ-1601256238921)(images/BOM.jpg)]

7.1 window

• Tips：可不写window前缀，例如：“window.alert()”，可以省略“window”，则“alert()”

window	作用
alert()	警告框
confirm()	确认框; 返回true/false
prompt()	提示框; 返回输入的值

window	作用
setTimeout(函数对象,时间)	指定的时间后执行指定的函数，返回 ID 值
setInterval(函数对象,时间)	每间隔指定的时间执行指定的函数，返回 ID 值
clearTimeout(函数对象ID)	用来停止指定的定时器
clearInterval(函数对象ID)	用来停止指定的间隔器

window	作用
window.open()	打开页面
window.opener	子页面调用父页面的函数
window.close()	关闭页面

7.2 history

history	作用
forward()	页面资源前进，历史记录的前进
back()	页面资源后退，历史记录后退
go(index)	跳转到指定的历史记录资源

7.3 location

location	作用
href	获取URL
port	获取端口号
reload()	重新加载页面资源

7.4 navigator

navigator	作用
appName	返回浏览器名称
appVersion	返回浏览器的平台的版本信息
cookieEnabled	返回指明浏览器中是否启用cookie
platform	返回运行浏览器的操作系统平台
userAgent	查看浏览器配置属性

7.5 screen

screen	作用
availHeight	返回浏览器显示屏幕的高度
availWidth	返回浏览器显示屏幕的宽度
height	返回显示器屏幕的高度
width	返回显示器屏幕的宽度

8. DOM

8.1 Document

• 概述：浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息。

函数	获取HTML元素对象
getElementById()	通过id
getElementsByName()	通过name属性值
getElementsByTagName()	通过标签名
getElementsByClassName()	通过class属性值
querySelector()	通过选择器
querySelectorAll()	通过选择器

8.2 Element

• 概述：Element 对象表示 HTML 元素。Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

8.2.1 属性操作

函数	作用
setAttribute(attriName,value)	设置属性
getAttribute(attriName)	获取属性
style	设置或返回元素的 style 属性

8.2.2 元素内容

函数	作用
innerHTML	返回或设置元素的内容
innerText	返回或设置元素的纯文本

8.2.3 节点操作

• 节点类型（nodeType）

  返回值	类型
  1	元素节点
  2	属性节点
  3	文本节点

• 节点名称（nodeName）

  返回值	名称
  标签名	元素节点
  属性名	属性节点

• 创建节点

  函数	作用
  document.createElement()	创建元素
  document.createAttribute()	创建属性
  document.createTextNode()	创建文本节点
  setAttributeNode()	设置属性节点

• 获取节点

  函数	作用
  parentNode	获取父节点
  childNodes	获取子节点
  nextElementSibling	获取当前节点的下一个节点
  previousSibling	获取同一级别的前一个元素节点

• 获取节点（不包括文本节点和注释）

  函数	作用
  childElementCount	返回子元素的个数
  firstElementChild	指向第一个子元素
  lastElementChild	指向最后一个子元素
  previousElementSibling	获取当前节点的上一个节点
  nextElementSibling	获取当前节点的下一个节点
  children	返回子元素的HTMLCollection集合

• 删除节点

  函数	作用
  removeChild()	删除子节点

• 追加节点

  函数	作用
  appendChild()	追加子节点

js操作form表单

• 获取form对象

  1. 通过name属性： var frm=document.name属性; // 特殊的，可以直接用name属性获取form对象

• 方法

  1. submit(); //提交表单数据
  2. reset(); //重置表单数据

• 属性

  1. 表单对象名.action=“新的值” //动态的改变数据的提交路径
  2. 表单对象名.method=“新的值” //动态的改变提交方式
     veChild()|删除子节点|

• 追加节点

  函数	作用
  appendChild()	追加子节点

js操作form表单

• 获取form对象
  1. 通过name属性： var frm=document.name属性; // 特殊的，可以直接用name属性获取form对象
• 方法
  1. submit(); //提交表单数据
  2. reset(); //重置表单数据
• 属性
  1. 表单对象名.action=“新的值” //动态的改变数据的提交路径
  2. 表单对象名.method=“新的值” //动态的改变提交方式
  3. elements //（只限于form对象）获取form下的所有表单元素对象集合