JavaScript学习笔记

JavaScript 笔记

---

基本数据类型转换

数据类型转换整数

• Number(var)

• parseInt(var)

• parseFloat(var)

• "100" - 0 (* / %)

  • // 此方法可以快速获得整数
    var number = '123' - 0
    // 返回的是一个123的整数 * / % 都可以

数据类型转换字符串

• String(var)
• var.toString()
  • 此方法可以转换进制
  • 例: var.toString(16)转换成16进制
• 只要 + 有一边是字符串 就会进行字符串拼接

数据类型转换布尔型

• Boolean(var)
• 非0都是true

基础函数

• typeof(var)type 返回数据类型
• console.log(var) 打印到控制台
• isNaN(var)Bool 判断是否为数字

---

数组

数组的声明

• var arr = [] 声明一个空数组
• var arr = new array() 声明一个数组指针

常用方法

• arr.push(var) 添加数据到末尾

  • arr.[arr.length] = var 非常规写法

• arr.pop(var) 取出末尾数据,返回数据

• arr.unshift(var) 添加头部数据

• arr.shift()var 取出头部数据,返回数据

• arr.concat(arr1,arr2)arr 数组合并,返回新数组

• arr.splice(index,number)arr 截取数组数据并返回一个新数组,会改变原始数组

  • arr.splice(index,number,newdata)arr 改变原始数组并可以替换数据

• arr.reverse() 反转数组

• arr.sort 数组按位排序

  • 按照数字大小排列 升序,如果降序则 b - a

  • var arr = [9,8,5,2,1,3,4]
    arr.sort(function(a,b){
        return a - b
    })

• arr.join('var')string 把数组链接成字符串,var则代表用什么链接

  • var arr = [1,2,3,4,5]
    var str = arr.join('-')
    console.log(str)
    // console.info ==> '1-2-3-4-5'

• arr.slice(headIndex,tailIndex)arr 把数组切片并返回一个数组

ES5数组方法

• arr.indexOf(var)int32 *查看数组中是否由该数据,返回位置index,如果返回 -1 则表示数据不存在

• arr.forEach(function(){}) 遍历数组

  • var arr = [1,2,3,4,5,6]
    arr.forEach(function(item,index,arr){
        // 第三个参数为原始数组
        console.log(index + ':' + item)
    })
    // return
    // 0:1
    // 1:2
    // ...

• arr.map(function(){})arr 映射数组

  • var arr = [1,2,3,4,5]
    var newarr = arr.map(function(item,index){
        return item + 1
    })
    console.log(newarr)
    console.log(arr)
    // 如果item +'1' 则数据会变成字符串
    // 如果item + 1 则数组内的数字会相加
    // 不会改变原始数组

• arr.filter(function(){})arr 筛选数据并返回新数组

  • var arr = [1,2,3,4,5,6,7]
    var newarr = arr.filter(function(item,index){
        return item > 2
    })
    console.log(newarr)
    // 会返回大于2的数据

• arr.some(function(){})Bool 遍历数组并判断数据,只要有一项满足就会返回true

  • var arr = [1,2,3,4,5,6,7]
    var newarr = arr.some(function(item,index){
        return item > 6
    })
    console.log(newarr)
    // 返回true 因为 7 > 6

• arr.every(function(){})Bool 遍历数组并判断数据,只要有一项不满足就会返回false,代码参照上一层

forin 循环,一般用来遍历对象

• for (var item in object){ 拿到的item是key object[item]}

---

字符串

• 字符串的声明

  • var str = '' 声明一个空字符串
  • var str = "" 声明一个空字符串,与上一层等价
  • var str = new string('str') 声明一个字符串指针

• 字符串常用方法

  • string.length 使用时转换成了object,返回字符串的长度

  • string.charAt(index)string 按照索引查找字符串的内容,如果找到就返回数据,如果没有找到返回空字符串

    • var str = '今天天气不错呢'
      var newstr = str.charAt(1)
      console.log(newstr)
      // 返回了 '天'
      // 如果索引值超出则返回 ''

  • string.charCodeAt(index)unicode 按照索引查找字符串的内容,并返回unicode编码值.如果没有找到就返回空字符串

    • var str = '今天天气不错呢'
      var newstr = str.charCodeAt(1)
      console.log(newstr)
      // 返回了 22825

  • string.substring(headIndex,tailIndex)string 截取字符串并返回新字符串

  •   var str = '今天天气不错呢'
      var newstr = str.substring(0,5)
      console.log(newstr)
      // 返回 '今天天气不'
      // 如果索引超出了字符串的最大长度 则全部返回
      // 如果tailIndex为空 则全部返回

  • string.substr(headIndex,howManyNumber)string 截取字符串并返回新字符串

    • var str = '今天天气不错呢1'
      var newstr = str.substr(2,5)
      console.log(newstr)
      // 返回 '天气不错呢'

  • string.concat(string ...)string 拼接字符串 注意: string + string 等价

  • string.slice(headIndex,tailIndex)string 截取字符串,切片形式

  • string.split(',')string 切割字符串,如果参数为空'',则返回字符数组,如果为','则返回去掉','的字符数组

  • string.toLowerCase()string 转换字符串为小写

  • string.toUpperCase()string 转换字符串为大写

  • string.replace(oldstr,newstr)string 替换字符串内容,只替换一次,可以使用正则来全局替换

    • var str = '今天的天气真的很不错呢,天气特别棒'
      var newstr = str.replace(/天气/g,'日')
      console.log(newstr)
      // 返回 '今天的日真的很不错呢,日特别棒'

  • string.indexOf(string)int32 查找字符串中是否该内容,如果找到返回索引 index ,找不到则返回 -1

    • 此函数接收两个参数,第二个参数可以设置区间

---

Math 数学包

• Math.random() 返回 0 ~ 0.99999 的随机数字
• Math.round(number) 返回四舍五入取整的数字
• Math.ceil(number) 返回向上取整 1.1 = 2
• Math.floor(number) 返回向下取整 1.9 = 1
• Math.pow(number,次幂) 返回取幂
• Math.sqrt(number) 返回平方根
• Math.abs(number) 返回绝对值 绝对值为去掉数字符号的数字,比如去掉负数变为正整数
• Math.max(number ...) 返回最大值
• Math.min(number ...) 返回最小值
• Math.PI() 返回 Π

---

时间操作

• new Date() 返回当前时间对象

  • var time = new Date()
    console.log(time)
    // 返回 Mon Dec 23 2019 03:33:13 GMT+0800 (中国标准时间)

  • var time = new Date(2019,0,1,15,33,45)
    console.log(time)
    // 返回 Tue Jan 01 2019 15:33:45 GMT+0800 (中国标准时间)
    // 需要注意的是0为月份 月份 0 = 1
    
    var time = new Date('2019-01-03 22:22:22')
    console.log(time)
    // 返回 Thu Jan 03 2019 22:22:22 GMT+0800 (中国标准时间)
    // 也可以传入字符串

• 时间获取操作函数

  • var time = new Date() 首先假定赋值当前时间给time
  • time.getFullYear()number 返回时间对象的年份
  • time.getMonth()number 返回时间对象的月份 需要注意的是如果返回 0 则是 1 月 ,以此类推
  • time.getDate()number 返回时间对象的多少号
  • time.getHours()number 返回时间对象的小时
  • time.getMinutes()number 返回时间对象的分钟
  • time.getSeconds()number 返回时间对象的秒数
  • time.getDay()number 返回一周中的第几天 需要注意的是 0 为 周日

• 时间设置操作函数

  • var time = new Date() 首先假定赋值当前时间给time

  • time.setFullYear(number) 设置时间对象的年份

  • time.setMonth(number) 设置时间对象的月份 注意 0 = 1月 的问题

  • time.setDate(number) 设置时间对象的多少号

  • time.setHours(number) 设置时间对象的小时

  • time.setMinutes(number) 设置时间对象的分钟

  • time.setSeconds(number) 设置时间对象的秒

  • time.setTime(时间戳) 设置时间戳 时间戳为按照毫秒从1970年计算的日期

    • var time = new Date()
      time.setTime(1577044288266)
      console.log(time)
      // 返回 Mon Dec 23 2019 03:51:28 GMT+0800 (中国标准时间)

---

BOM(Borwser Object Model)

• 窗体操作

  • window.innerWidth 返回浏览器窗体的宽 包含了滚动条的宽度

  • window.innerHeight 返回浏览器窗体的高 包含了滚动条的高度

  • window.alert(content) 浏览器提示框

  • window.confirm(content)Bool 浏览器的询问框,返回布尔类型 确定=true,取消=false

  • window.prompt(alert,content)content 浏览器的输入框,返回输入的内容,如果空则返回空字符串,取消返回null

  • window.location *返回了一个对象,对象内的href = 当前页面的地址栏地址 如果给href赋值,则会直接跳转 location.reload()则会重新加载页面

    • window.location.href = 'https://www.baidu.com'
      // 会直接跳转页面到百度

  • window.open(URL) 此方法会打开一个URL

    • 跳转百度
      
      

  • window.close() 关闭当前页面

• 操作历史记录

  • window.history 返回一个历史记录对象 ?
  • window.history.back() && window.history.go(-1) 浏览器网址后退(如果可以的话)
  • window.history.forward() && window.history.go(1) 浏览器网址前进(如果可以的话)

• 浏览器

  • window.navigator 返回一个浏览器对象
    • window.navigator.userAgent *返回浏览器的版本信息
    • window.navigator.appName 返回浏览器的内核版本信息(除了IE都是网景,为了致敬)
    • window.navigator.appVersion 返回浏览器的版本号
    • window.navigator.platform 返回客户端的操作系统(经常不准)

---

定时器

• 创建定时器

  • setInterval(function(){},毫秒) 每隔多少毫秒会执行一次,返回定时器的ID

    • var intervalID = setInterval(function(){
          console.log('hello world')
          console.log(intervalID)
      },1000)
      // 每隔一秒钟返回 hello world 和 1

  • setTimeout(function(){},毫秒) 倒计时定时器,只会执行一次,返回定时器ID

• 关闭定时器

  • clearInterval(定时器ID) 关闭间隔定时器
  • clearTimeout(定时器ID) 关闭倒计时定时器

---

浏览器的常见事件

• window.onload 会在所有资源加载完毕后触发
• window.onscroll 会在浏览器滚动的时候触发
• window.onsize 会在浏览器改变尺寸大小的时候触发
• document.documentElement.scrollTop 获取浏览器卷起的页面文档尺寸
• document.body.scrollTop 获取html内body被卷起的尺寸

---

DOM(Document Object Model)

• document API

  • document.documentElement 返回html标签
  • document.head 返回head标签
  • ducument.body 返回body标签
  • document.getElementById('ID') 通过ID返回标签信息
  • document.getElementsByClassName('class') 通过class返回标签伪数组
  • document.getElementByTagName('TAG Name') 通过标签名返回标签伪数组
  • document.getElementByName('name') 通过标签的name属性返回标签伪数组
  • document.querySelector('CSS') 按照书写CSS的方式获取标签,只能获取到满足选择器的第一个标签
  • document.querySelectorAll('CSS') 按照书写CSS的方式获取标签,返回所有满足条件的标签伪数组

• 标签 | 元素 API

  • 标签.innerHTML 返回该标签内部的所有结构 可以进行写入赋值

  • 标签.innerTEXT 返回该标签内部的文本内容 可以进行写入赋值

  • 标签.style 返回一个标签的行内样式 可以进行写入赋值

  • 标签.className 返回一个标签的class 可以进行写入赋值

  • 标签.getAttribute(属性名) 返回一个标签的属性

  • 标签.setAttribute(属性名,值) 设置一个标签的属性

  • 标签.removeAttribute(属性名) 删除标签的属性

  • 标签.childNodes 返回标签下的所有子节点 回车和空格也会返回

    • 
          
      
              百度
              谷歌
              
      呵呵
      
      
      
      

  • 标签.children 返回标签内的所有子标签

    • 
          
      
              百度
              谷歌
              
      呵呵
          
          
      
      

  • 标签.firstChild 返回标签内的第一个子节点 回车和空格也会返回

  • 标签.firstElementChild 返回标签内的第一个子标签

  • 标签.lastChild 返回标签内的最后一个子节点

  • 标签.lastElementChild 返回标签内的最后一个子标签

  • 标签.previousSibling 返回标签的上一个兄弟节点,如果没有返回null 回车和空格也会返回

  • 标签.nextSibling 返回标签的下一个兄弟节点,如果没有返回null 回车和空格也会返回

  • 标签.previousElementSibling 返回标签的上一个兄弟标签,如果没有返回null

  • 标签.nextElementSibling 返回标签的下一个兄弟标签,如果没有返回null

  • 标签.parentNode 返回标签的父节点

  • 标签.attributes 返回标签的所有属性节点

• 节点操作 | Node Handle

  • nodeType 节点类型
    • 标签节点 = 1
    • 属性节点 = 2
    • 文本节点 = 3
    • 注释节点 = 8
  • nodeName 节点名称
    • 标签节点 = 大写的标签名 P | DIV | SPAN | ...
    • 属性节点 = 属性名
    • 文本节点 = #text
    • 注释节点 = #comment
  • nodeValue 节点值 标签节点没有节点值
    • 标签节点 = null
    • 属性节点 = 属性值
    • 文本节点 = 文本内容(包含换行和空格)
    • 注释节点 = 注释内容(包含换行和空格)
  • document.createElement(标签名) 创建一个标签节点
  • document.createTextNode 创建一个文本节点
  • 标签.appendChild(节点) 在标签内部的尾部添加一个子节点
  • 标签.insetBefore(标签,新标签) 在标签内部的子节点前面添加一个子节点
  • 标签.replaceChild(新节点,旧节点) 替换标签内部的某一个子节点为新节点
  • 标签.removeChild(子节点) 删除一个子节点
  • 标签.cloneNode(true | false) 克隆节点,true克隆子节点,默认flase为不克隆子节点
  • document.createDocumentFragment() 返回一个document缓存,减少写页面的次数
  • 标签.clientWidth 返回标签边框以内的区域 (Width + padding)
  • 标签.clientHeight 返回标签边框以内的区域 (Height + padding)
  • 标签.offsetLeft ↓
    • 如果有定位则返回与父级左边框的距离 (left值)
    • 如果没有定位则返回与页面左边的距离
  • 标签.offsetTop ↑
  • 标签.offsetWidth 返回标签的 width + padding + border
  • 标签.offsetHeight 返回标签的 height + padding + border

• 获取页面的尺寸

  • document.documentElement.clientWidth 获取页面不包含滚动条的宽度
  • document.documentElement.clientHeight 获取页面不包含滚动条的高度

---

常用事件

• 鼠标事件

  • click 鼠标左键单击
  • mousedown 鼠标左键按下
  • mouseup 鼠标左键抬起
  • mousemove 鼠标移动
  • mouseover 鼠标移入 冒泡
  • mouseout 鼠标移出 冒泡
  • mouseenter 鼠标移入
  • mouseleave 鼠标移出
  • dbclick 鼠标双击
  • contextmenu 鼠标右击

• 键盘事件

  • keyup 按键抬起
  • keydown 按键按下
  • keypress 按键按下后抬起(完整动作)

• 浏览器事件

  • load 浏览器载入完毕
  • resize 浏览器尺寸更改
  • scroll 浏览器滚动条滚动

• 表单事件

  • input 表单输入
  • change 表单改变,失去焦点时触发
  • blur 表单失去焦点
  • forcus 表单获得焦点
  • submit 表单提交

• 触摸事件(Cell Phone)

  • touchstart 点触
  • touchmove 移动
  • touchend 抬起

• 其他事件

  • transitionend
  • animationend

• 事件对象

  • window.event 用来在事件里获取事件信息的对象