美文网首页前端
js原生代码合集

js原生代码合集

作者: 一个健康马 | 来源:发表于2019-11-16 11:29 被阅读0次

    数值number
    字符串string
    布尔型boolean
    null空
    undefined 没有值
    typeof检测数据类型
    Number()转换数值
    parseInt()转换数字
    parseFloat()转换小数
    toString(进制数)
    Boolean()转换布尔型
    isNaN()是,不是一个数字
    prompt输入框
    alert弹出框
    confirm询问框
    if else 条件语句
    switch case break default 分支语句
    while 循环语句
    do while 先执行
    条件?成立执行:不成立执行 三元运算符
    for 循环
    break终止循环
    continue结束本次循环
    return 函数返回值
    objname='Jack'添加对象成员
    objname['name']='jack'点语法添加
    delete obj.name删除对象成员
    delete obj['name']删除对象成员 点语法
    obj.name 对象查找
    obj['jack']点语法对象查找
    for in 循环 用来遍历对象
    数组
    push 添加放在最后
    pop删除最后
    unshift 添加最前
    shift删除第0个
    concat 拼接 concat拼接字符串
    reverse反转数组
    splice截取多少个
    slice截取的索引 slice 截取字符串
    sort数组排序
    indexof()内容索引的位置 indexof查找字符位置索引
    forEach遍历数组
    reduce((prev//上一次结果,currect//当前值){return 结果},0//初始值)
    for of循环 es6新增循环 不能遍历对象
    map映射数组返回值新数组
    filter把满足条件的筛选放到新数组
    some遍历满足条件返回true
    every所有满足才返回true
    字符串操作
    indexOf查找字符位置索引
    charAt()对应索引的字符串
    charCodeAt()Ascall编码
    substring截取字符串开始0索引 结束索引
    substr截取字符串 多少个
    concat拼接字符串
    slice 截取字符串结束索引
    toUpperCase字符串该大写
    toLowerCase改成小写
    split()用什么字符切割放在数组中
    replace(把什么,替换成什么)
    sort(function(a,b)){returna-b)}) 排序
    join数组用字符连接成字符串

    数字方法
    Math.random随机数0-0.999
    Math.round四舍五入
    Math.ceil向上取整
    Math.floor向下取整
    Math.pow取幂
    Math.sprt开平方根
    Math.abs取绝对值
    Math.max取最大值
    Math.min取最小值
    Math.PI取PI值
    toFixed(保留几位小数)
    时间
    new Date 获取指定时间对象不填是当前
    .getFullYear()获取年份
    .getMonth月
    .getDate日
    .getHours小时
    getMinutes分钟
    getSeconds秒
    getDay第几天
    getTime时间戳
    set设置年月日小时分钟秒钟时间戳
    函数名.call()改变this指向
    函数名.apply()改变this指向
    函数名.bind()返回值改变好了的this指向函数
    浏览器属性:
    window.innerHeight浏览器高
    window.innerWidth浏览器宽
    document.documentElement.clientWidth不含滚动条的窗口宽
    document.documentElement.clientHeight不含滚动条的窗口高
    window.location.href跳转页面 读写
    location.relod重新加载页面
    location.open(新的页面地址)
    location.close()关闭当前页面
    history.back历史回退
    histor.forward历史前进
    history.go()进行历史记录跳转 数值
    元素.addEventListener标准浏览器 绑定事件
    元素.removeEventListener('事件类型',事件处理函数)移除绑定事件
    attachEvent IE低版本浏览器
    浏览器事件:
    onload加载完毕后执行
    onscroll滚动事件
    onresize浏览器尺寸改变
    docunmentElement(||body).scrollTop浏览器卷去的高度
    鼠标事件
    click 单机
    dblclick 双击
    mouseover 鼠标移入 自带事件传播
    mouseout 鼠标移出
    mouseenter 鼠标移入 阻止事件的传播
    mouseleave 鼠标移出
    mousemove 鼠标移动
    mousedown 鼠标按下
    mouseup 鼠标抬起
    contextmenu 右键
    键盘事件
    keydown 键盘按下
    keyup 键盘抬起
    keypress 键盘按下再抬起
    表单事件
    blur 失去焦点
    focus 获取焦点
    change 文本框内容改变 脱离是改变
    input 文本框内容改变
    submit 表单提交 (专门给 form 标签使用的)
    transitionend 过度结束的时候触发
    animationend 动画结束的时候触发
    selectstart选中事件
    timeupdate 音乐视频播放事件 1S4次
    视频元素.currentTime返回当前播放时间
    触摸事件
    touchstart开始触摸
    touchmove触摸移动
    touchend触摸结束
    console.dir()打印详细信息
    SetTimeout延时定时器
    setInterval间隔定时器
    clearTimeout()关闭定时器
    获取页面元素
    document.documentElenent获取html
    document.head 获取head
    document.body获取Body
    getElementById通过Id获取元素 只有一个
    getElementsByClassName通过class名获取元素 得到伪数组
    getElementsByTagName通过标签名获取元素
    getElementsByName通过元素name获取元素
    querySelector通过书写方式获取元素
    querySelectorAll获取满足条件的所有元素
    元素.childNodes获取一个元素下的所有子节点
    元素.children获取元素下所有的元素节点

    元素.firstChild元素下第一个子节点
    元素.firstElementChild获取第一个元素节点

    元素.lastChild获取元素下最后一个子节点
    元素.LastElementChild获取元素下最后一个元素节点

    元素.previousSibling获取元素的上一个兄弟节点
    元素.previousElementSibing获取元素的上一个兄弟元素节点

    元素.nextSibling获取元素的下一个兄弟节点
    元素.nexElementSibling获取元素的下一个兄弟的元素节点

    元素.attributes获取元素的所有属性节点
    .getAttribute(属性名)获取元素的属性值
    .setAttribute('设置的属性名',设置的属性值)
    removeAttribute(删除的属性名)
    innerHTML完全覆盖式替换内部结构
    innerText替换文本内容
    .style获取行内样式或对值进行增删改查
    window.getComputedStyle(获取的元素)||元素.currentStyle获取非行内样式
    class.name读取类名或者写入新的类名
    document.createElement(创造标签)
    父元素.appendChild(添加的子节点)
    父元素.inserBefore(插入的元素,哪一个元素前)
    父元素.replaceChild(新节点,旧节点)替换
    父元素.removeChild(删除的节点)
    元素.cloneNode(true)克隆节点
    document.createDocumentFragment()文档碎片创建筐
    clientWidth clientHeight边框内的区域
    offsetwidth offsetheight含border的边框区域
    offsettop offsetleft 定位父级的左上角距离
    offsetX offsetY 点击元素的左上角坐标点
    clientX clientY 可视窗口的左上角坐标点
    pageX pageY 文档流的左上角
    event=event||window.event获取事件对象
    var target=e.target||e.srcElement .tagName标签名 获取触发事件的元素
    IE e.cancelBubble=ture ||e.stopPropagation 取消事件冒泡
    IE e.returnValue=false ||e.PreventDefault() || return false 取消默认行为
    //正则表达式
    new RegExp('')创建正则
    .非/n换行的任意字符
    \转译
    \s空格
    \S需要非空格
    \d数字
    \B非数字
    \w数字字母下划线
    \W非数字字母下划线
    ^开始$结尾
    +1到正无穷
    *0到正无穷
    ?0或者1次
    {n}n次
    {n,}至少n次
    {n,m}至少n次,最多m次
    ()集合可以单独捕获
    []任意选择的集合
    [^]表示非任意选择集合
    |占位一般和小括号一起使用
    -一般和中括号一起用,a-b 必须ASCII挨着的
    正则表达式.test(字符串)检测字符串
    正则表达式.exec(捕获的字符串)
    g标识全局 i不分大小写
    var ze = new RegExp("^[0-9]+"+param+"[a-z]+$","g"); 动态添加正则
    字符串.search(正则)找符合条件的
    字符串.match(正则)有g的时候。捕获到每一个符合的内容
    字符串.replace(正则,替换内容)
    JSON.stringify(要转换的对象或数组)
    JSON.parse(JSON格式的字符串)
    let const 变量
    prototype函数自带属性
    protot
    Object.prototype.toString.call()或constructor构造者 检测数据类型
    面向对象 calss关键字 class类名
    constructor(){}构造函数体

    1. 每一个函数天生自带一个属性,叫做 prototype, 是一个对象空间
    2. 每一个对象天生自带一个属性,叫做 __proto__,指向所属构造函数的 prototype
    3. 每一个函数天生自带的那个 prototype 上有一个 constructor 属性,指向该构造函数
    4. 当一个对象没有准确的构造函数来实例化的时候,那么他的所属构造函数是 Object
      //

    Es6继承
    extends 继承
    super( 参数)
    Object.defineProperty(你要给谁添加,添加的key,配置项{get(){return 'jack'}set(接收一个参数){捕获你想改变的行为}}数据劫持

    classList 每一个元素都有一个classList的属性
    add(您要添加的类名)用来添加类名的
    remove(你要移除的类名)用来移除类名的
    replace(你要替换的类名,替换成什么)用来替换类名的
    toggle(你要切换的类名)
    数组去重set方法
    new Set()
    size方法和属性
    add(你要添加的成员)
    delete(你要删除的成员)
    clear()把数据集合中的所有内容全部删除
    has(你要判断的数据)
    forEach(function(){})
    ...展开

    对象
    1,set(成员的Key,成员的值)
    2,get(获取的成员名称)
    3,delete(你要删除的成员名称)
    4,clear()用来清除该数据集合中的所有成员
    5,forEach()
    item拿到的是所有的value
    index拿到的是所有的key
    arr原始的Map数据集合
    6,has()判断该数据集合内有没有某一个数据成员
    7,size
    8,...展开

    获取地址栏?后面部分window.location.search
    获取地址栏#后面部分window.location.hash
    ecodeURI解码中文
    解构


    QQ截图20191116112847.png

    相关文章

      网友评论

        本文标题:js原生代码合集

        本文链接:https://www.haomeiwen.com/subject/zlqyictx.html