JS上下知识汇总

整理了JS上以及JS下的知识,查看注释可以看到详细内容

JS上下知识汇总

• JS上核心
  • 数组与字符串,Math运算方法
    • 通用
      • el.slice(start,end)
      • el.substr(start,end)
      • el.substring(start,end)
      • 含头不含尾,不改变原数组
      • indexOf()
      • lastIndexOf()
      • includes() 是否包含子字符串
      • arr.cancat(arr1,arr2..) 返回新字符串/数组
    • 字符串
      • toLocaleLowerCase() 转小写
      • toLocaleUpperCase() 转大写
      • split()
      • toString() 转字符串
      • charAt(index)
        • 返回该下标所对应的字符,如果下标超过字符串长度则返回空字符串
      • charCodeAt(index)
        • 返回对应下标字符的Unicode编码
      • repeat(n) 复制n次拼接
      • endsWith(value,length) 检测结尾后缀
        • 检测字符串是否以指定子字符串结尾, 从前往后数多少位内进行查找 endsWith()的length从左开始设置字符串的长度 startsWith()的length设置字符串开始的位置
      • startsWith()
    • 数组
      • splice(start,age,el1,el2...) 改变原数组
      • pop()
      • shift()
      • 删除,返回删除元素
      • push()
      • unshift()
      • 添加,返回新数组长度
      • join()
      • map()
      • forEach()
      • reverse()
      • reduce(fun)
        •  计算为一个值,从左至右
      • reduceRight() 从右至左
      • some()
        •  是否至少有一个符合条件 返回true/false
      • filter()
        •  过滤符合条件的以新数组形式返回
      • sort()
        •  a-b<0 -1时不交换位置 a-b>0 1时交换位置 如果是字符串形式的数字,也可以排序 默认将元素转为字符串,以UTF-16的代码单元值序列 注意:返回数组且改变原数组
      • every()
        •  检测是否所有元素都符合条件 返回值:true/false
      • find(fun)
        • 返回符合条件的第一个元素,无则返回undefined
    • Math
      • PI 圆周率约3.14..
      • abs(x) 绝对值
      • ceil(x) 上舍入
      • floor(x) 下舍入
      • random()*(max-min+1)+min
      • round(x) 四舍五入
  • 数据类型与类型转换
    • 数据类型
      • 5种基础数据类型: number string boolean undefined null 1种复杂:object number: 所有数字,及两种特殊数字 NaN(非数字数值) Infinity(无穷大) boolean: true false undefined(未定义): 如果变量只声明不赋值,默认则为undefined null(空对象): 6个转为false的值: 0 "" false undefined null NaN 两个数据进行比较,先尝试用number形式进行隐式转换,如果是两个字串比较顺序为: 数字<大写字母<小写字母 null undefined不等于自身以外的任何数,但undefined==null因为他们都是派生自对象
    • typeOf()
    • isNaN()
      • 可以进行numbet形式的隐式转换
    • 检测数据类型
    • Number()
      • 特殊数字情况: null,false 转为0 ,true 转为 1 , 字符串数字转为数字 其他转为NaN
    • parseInt()
      • 遇到非数字或小数点停止转换 数字字符串转为数字,不支持number形式转换 遇见(true,false,"")转为NaN
    • parseFloat()
      • 原理与parseInt相同,但可以转换小数点以后的数字
    • 转为数字
    • toString()
      • ele.toString() undefined和null不能调用toString() toString()可以传一个表示进制的数字 2/8/10/16
    • String()
      • 任意类型转为字符串
    • +
      • 左右两边都是数字时,加法运算 左右两边至少有一个字符串时,字符串拼接 左边没有数据右边只有一个数据,转为数字
    • 转字符串
    • Boolean 转为布..
  • 运算符&表达式
    • 运算符
      • 算数 : + - * / % ++ -- ** 关系 : < <= > >= == != === !== 逻辑 : && || ! 赋值 : = += -= *= /= %= 条件: ? 逗号 : , 按照运算数据的个数还可以分类:单目运算符,双目运算符,三目运算符 单目 : ++ -- typeOf ! 双目 : + - * / % ** 等等 三目 : ?
  • 日期对象
    • new Date() 创建日期对象,获取的即当前实际年月日 get/setDate() 某一天1-31 get/setFullYear() 年份 如:2020 get/setDay() 一周中某一天0-6 get/setHours() 小时0-23 get/setMonth() 月份0-11 get/setTime() 1970年1月1日至今毫秒数/以毫秒设置Date对象 toLocaleDateString() 根据本地时间格式,把日期部分转为字符串 如:2020/10/16 设置月份或日期时,如果是0-几 应设置为 : 想设置的月份-1
  • 循环语句
    • break 结束整个循环 continue 结束本次循环,跳过下方代码 return 结束函数,返回值
    • switch
      • switch(表达式){ case 常量1:代码1;break; n个case... default:代码n;break; } 常量往往是字符串或数字,default前的成立则执行成立的,否则默认default.
    • whie(条件){ 代码 }
      • 满足条件停止循环,否则死循环
    • for(let i=0;i<x;i++){ 代码 }
      • 满足条件停止循环
• JS下核心
  • 节点操作
    • childNodes dom下所有子节点
    • children dom下所有元素子节点
    • previousSibling
    • previousElementSibling
    • nextSibling
    • nextElementSibling
    • firstChild
    • firstElementChild
    • lastChild
    • lastElementChild
    • parentNode
    • parentElement
    • 所有,兄弟,首尾,父亲
      • 所有孩子ren 兄弟Sibling 首尾孩子Child 父亲不是孩子parentElement
    • cloneNode()
    • cloneNode(true)
    • 节点.remove()
    • 父节点.removeChild(节点)
    • 父节点.insertBefore()
    • 父节点.appendChild()
    • 父节点.replaceChild(newChild,oldChild)
    • document.createElement('标签名')
    • document.createTextNode('文本内容')
    • 克隆,添加,删除,切换
    • dom.nodeName
    • dom.nodeType
    • dom.nodeValue
    • 节点三大属性
  • 元素尺寸,位置的获取
    • clientWidth/Height 内宽高
    • offsetWidth/Height 外宽高
    • offsetLeft/Top 距父元素/浏览器距离
    • dom.getBoundingClientRect()
      • 获取元素尺寸,位置 返回数据:DOMRect{x:元素水平坐标, y:...., width:元素外宽度, height: left:元素左边界与页面边界的距离, right: top:元素上边界与界面上边界的距离, bottom: } 注意:1.此方法获取到的位置和距离不受定位父元素的影响 2.数据中的坐标和距离信息,均是以刷新页面时页面的可视区边界为准
    • offsetParent
    • 元素
      • 内宽高:width/height+padding 外宽高:width/height+padding+border
    • e.clientX/Y 可视区坐标
    • e.pageX/Y 页面中坐标
    • offsetX/Y 元素中的点击位置
    • 鼠标
  • 其他知识
    • JSON.parse(字符串)
    • JSON.stringify(js对象)
    • JSON对象与JSON数据转换
    • dom.setAttribute('属性名','属性值')
    • dom.getAttribute('属性名')
    • dom.removeAttribute('属性名')
    • 设置自定义属性
    • 执行函数.call(对象,参1,参2...)
    • 执行函数.apply(对象,[参1,参2...])
    • 执行函数.bind(对象,参1,参2...)()
    • this替换
    • doucment.getElementById('id')
    • document.getElementsByClassName('class')
    • document.getElementsByTagName('标签名')
    • document.querySelector('')
    • document.querySelectorAll('')
    • 元素获取
      • class名,tag名获取的为一个数组,需要通过 获取集合[index] 方式获取
    • dom.classList.toggle()/add()/remove()/contains() 类名操作
    • obj.hasOwnProperty('name')
      • 确定属性是构造函数中的还是原型中的 如果obj有name属性返true 否则返false
    • document.write() 输出到页面
  • window下常用属性方法
    • alert() 警告框
    • prompt() 输入框
      • prompt('可以设置提示文字') 问题弹框 返回输入的结果可以保存到变量内
    • confirm() 确认框
      • confirm('提示文字') 可以选择确定/取消 选择确定返回true,选择取消返回false
    • window下三大弹框
    • window.getComputedStyle(ele)
      • 获取指定元素的css样式
    • location.herf/search/hash/reload() 地址栏信息
      • window.location.herf 例 herf '?'后的信息 hash 锚点 reload() 重新加载页面
    • history.go()/back()/forword() 浏览器记录
      • window.history.go() go() 负数前跳,整数后跳 back() 前跳 forward 后跳
    • navigator 封装浏览器信息
      • userAgent (头部信息,版本内核等)
    • window下常用三个对象
  • 正则
    • 量词
      • {至少,至多} * 0或任意个 {0,} + 1或任意个 {1,} ? 0或1个 {0,1}
    • 字符集
      • [0-9] 0-9中任意一个数字 [a-z] a-z中任意一个字符 [A-Z] A-Z.... [\u4e00-\u9fa5] 中文字符集
    • 转义字符
      • \d 0-9之间任意数字 \D 非0-9 [^0-9] \w 数字字母下划线 [a-zA-Z0-9_] \W [^a-zA-Z0-9_] \s 空格 \S 非空格 . 任意字符
    • 修饰符img
      • i 不区分大小写 m 匹配多行 g 全局匹配
    • 匹配位置
      • ^ 非以什么开头 $ 以什么结尾 \b 匹配单词边界 () 分组 | 或
    • 方法
      • 正则的方法: 正则.test(字符串) 验证字符串是否符合规则 返bool 正则.exec(字符串) 返数组 null arr.index 敏感词的位置 reg.lastIndex 下次开始查找的位置 支持正则的字符串方法: str.split(正则) 正则为分割条件 str.search(正则) 查找字符串的下标 有返下标,无返-1 str.match(正则) 匹配字符串中所有关键字放在数组中 返数组 null str.replace(正则,字符串/回调函数) 返回替换后的新字符串 (空字符?=.*\d) .任意字符 *可有可无 空字符后面可有可无任意字符但必须有一位数字
  • 事件
    • 事件绑定方式
      • HTM: 事件类型作为html的属性名,函数作为属性值 DOM0级:dom.onclick DOM2级:谷歌:dom.addEventListener(事件类型,事件处理程序,boolean) 3:boolean 默认false()冒泡 ,true(捕获) 冒泡:由具体到不具体 捕获:由不具体到具体
    • 谷歌与IE事件区别
      • 谷歌: 绑定:dom.addEventListener(事件类型,事件处理程序) 卸载事件:dom.removeEventListener(事件类型,事件处理程序,bool) (事件处理程序一定是函数名) 事件对象:e 被触发元素:e.target 阻止默认行为:e.preventDefault() 阻止冒泡:e.stopPropagation() IE: 绑定事件:dom.attachEvent('on'+事件类型,事件处理程序) (默认冒泡) 卸载事件:dom.detachEvent('on'+事件类型,事件处理程序) 事件对象:window.event 被触发元素:e.srcElement 阻止默认行为:e.returnValue=false 阻止冒泡:e.cancelBubble=true
    • 鼠标事件
      • click 单击 dblclick 双击 mouseover 移入 mouseout 移出 mousemove 移动 mousedown 按下 mouseup 弹起
    • 表单事件
      • input 输入框值发生改变时触发 focus 焦点事件 blur 失去焦点 change 改变事件
    • 滚动事件
      • 滚动事件:window/document/div/.onscroll 获取滚动距离: var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop
    • 预加载事件
      • 页面内所有元素加载完毕再执行: window.onload=function(){}
    • keydown 按下
    • keyup 弹起
    • keypress 按下触发
    • e.type 事件类型
    • e.keyCode 键盘编码
      • 左上右下 37,18,39,40 空格32 回车13
    • e.key 键盘上的字符
    • 键盘事件
• 浮动主题