JavaScript常用方法

1.js时间对象查看文档

var: //全局作用域 
let: //块级作用域 
const: //用来定义常量 必须初始化 const a =2 

BOM: //浏览器对象模型,核心是window 
DOM: //文档对象模型 
window.onload: //当文档和资源都加载完后调用(只能写一个) 
window.write(): //操作标签body内容,会覆盖已有内容 

$(document).ready(): //当网页中所有的DOM结构绘制完毕就执行,jquery中用法,可简写为$(function(){}) 
charCodeAt() //返回指定位置的字符编码
charAt() //返回指定位置的字符字符串 
parseInt() //转换为number类型,整数 
parseFloat() //转换为number类型,可以保留小数 
null //访问一个不存在对象返回的值,空对象 
undefined //访问一个声明完没有赋值的变量返回的值,空变量 
arguments //表示当前函数的所有实参集合 console.log(arguments) 
this //当前触发事件 
evel() //计算一个字符串并执行里面的JS代码 

/* 定时器 */ 
setInterval(函数,间隔时间); //重复执行,隔某个时间就执行一次 
setTimeout(函数,间隔时间); //执行一次,延迟某个时间后执行 
clearInterval(定时器ID) | clearTimeout(定时器ID); //清除定时器 

// 改变this指向 
call() 改变函数中的this指向 
         函数名.call(this指向,参数....) 
         fun.call(document.body) 
         fun.call(document.body,10,20) //函数有参时 
apply() 用法与call()一致 
         fun.apply(document.body,[10,20]) //函数有参时

2.js字符串方法

查询字符串

indexOf()  返回指定字符串在另一个字符串中首次出现的位置,查找不到返回-1 详情
lastIndexOf()  返回指定字符串在另一个字符串中最后一次出现的位置  详情

截取字符串:

substring([start,[stop]])  从start开始截取到stop位置,包括开始不包括结束,1个参数表示从start截到末尾,stop负数表示倒数第几个  详情
slice()  用法与substring一致,不自动调节位置  详情

分割字符串:

split(分隔符,数组的长度)   详情

替换字符串:

replace(被替换的字符串,替换的字符串)   详情

大小写转换:

toLowerCase()  将字符串都转成小写
toUpperCase()  将字符串都转成大写
可以用来验证码检测  str1.toLowerCase() == str2.toUpperCase()

其他:

trim()  去除首尾空格

seach()  查询,与indexOf()用法一致

match()  排除字符串中符合条件的组成一个新的数组返回

3.数组对象

创建数组:

字面量方式创建:var a = [1,2,3,4]

构造函数创建:var arr = new Array(1,2,3,4)

数组方法:

push()  在数组末尾添加元素,返回当前数组长度
pop()   删除数组末尾一个元素,返回被删元素
unshift()  在数组开头添加元素
shift()    在数组开头删除元素
splice()  删除、添加、替换
        arr.splice(1)   从1开始删到末尾
        arr.splice(1,2)  从1开始删到2
        arr.splice(1,2,c)  从1开始删2个,用c替换

数组排序:

sort()  默认从小到大排序  arr.sort()
        自定义排序:
        arr.sort(function(a,b){ //a,b为相邻两个
            return a-b  //a-b由小到大  b-a由大到小
        })
reverse()  倒序  arr.reverse()
concat()   合并数组 arr1.concat(arr2,arr3)
join()    将数组按特定的分隔符组合成字符串  arr.join(‘-‘)
indexOf()  查找是否存在某个元素,存在返回对应下标,不存在返回-1

数组排序之冒泡排序和选择排序

对象操作例子:

let arr = { aaa:123 , bbb:222 , ccc:333}

删除 aaa
delete this.namelist.name;//js方法
Vue.delete(this.namelist,’name’);//vue方法
编辑aaa/新增也是
arr[‘aaa’] = 456

数组的迭代(遍历)方法:

map()  循环数组,返回新数组
        arr.map(function(item,index){
            return ….
        })
foreach()  简单循环,没有返回值
filter()   返回满足条件的新数组
        arr.filter(function(item.index){
            return item>3
        })
every()  结果都为true,返回true
some()   结果有一个为true,返回true

4.数学对象

Math.ceil()  向上取整  Math.ceil(3.8)
Math.floor()  向下取整
Math.round()  取整四舍五入
Math.random() 随机数 大于0小于1
          .random()*x          0-x之间
          .random()*(y-x)+x    x-y之间

其他不常用的点此查看

5.DOM操作

获取节点:

父节点.children   获取子节点,返回子元素集合

父节点.childNodes   获取子节点

子节点.parentNode  获取直接父节点

子节点.offsetParent   获取定位父节点

父元素.firstChild   获取父元素中的首尾节点 ie可用

父元素.firstElementChild   获取父元素首尾节点  标准浏览器专用

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

元素.nextElementSibling  获取下一个兄弟节点 获取前一个兄弟节点

元素.previousSibling  获取前一个兄弟节点

元素.previousElementSibling  获取前一个兄弟节点 (获取前一个兄弟节点)

节点.nodeName   获取标签节点的标签名

节点.nodevalue    获取文本节点内容

节点.nodeTtpe    获取节点类型

创建节点:

document.createElement(标签)     创建标签

document.createTextNode(文本)   创建文本

添加节点:

父元素.appendChild(标签)   在父元素末尾添加

插入节点:

父元素.insertBefore(节点)   在某个元素之前插入

删除节点:

元素.remove()     移除元素

父元素.removeChild(子节点)   移除元素

替换节点:

父元素.replaceChild(新节点,被替换的节点)

复制节点:

节点.cloneNode(true)     默认false,只复制标签不复制内容,true复制标签和内容

获取和设置属性值:

标签.getAttribute(属性名)    获取属性   oLi.getAttribute(‘id’)

标签.setAttribute(属性名,属性值)   设置属性

操作标签内容:

标签.innerHTML = “” ;   设置标签内容

input.value = “” ;    设置表单内容

标签.style.color = “red” ;  设置样式

标签.className = “” ;   设置class

6.操作表单

提交事件  form.onsubmit    提交事件时触发

oForm.onsubmit = function(){
    //如果值为空,不允许提交
    if(oForm.user.value == ''){
        return false
    }
}

重置事件  form.onreset

获取焦点  form.onfocus

失去焦点  form.onblur

//获取焦点事件
oForm.user.onfocus = function(){
    this.style.background = 'pink'
}
//失去焦点
oForm.user.onblur = function(){
    this.style.background = ''
}

input.focus();  //打开界面input直接获取焦点
input.blur(); 
input.select('');  //默认选中
oForm.submit(); //提交
oForm.reset(); //重置

7.BOM-window对象

window.alert(''); //警告框
window.confirm('是否开始'); //带确认的框,返回true或false
window.prompt('请输入'); //带输入的对话框,确认返回输入的值,取消null
window.open(url); //打开新页面 window.open("http://osuu.net", "_blank", true) 
window.close(); //关闭窗口

window.location.herf;   //返回当前加载页面的完整url
window.location.search;   //返回url中查询字符串,以?开头
window.location.reload();   //重新加载页面

history.go(0);  //刷新页面 -1上一页   1后一页
navigator   //获取浏览器信息 详情看文档这里就不多写了

8.位置属性

元素.clientWidth  / .clientHeight     可视宽高 width+padding

元素.offsetWidth / .offsetHeight     占位宽高 width+padding+border

元素.offsetTop   当前元素的顶部到定位父元素的距离,没有则到body的距离

……

元素.scrollTop  / .scrollLeft   元素被卷去的宽高

元素.scrollWidth / .scrollHeight  获取元素的实际内容宽高

onscroll 滚动事件     window.onscroll = function(){}

onresize 屏幕发生变化时调用

9.事件函数

事件绑定:

function fun (){
…..
}

标准浏览器:元素.addEventListener(“click”,fun,false)     是否捕获true/false

取消:元素removeEventListener(“click”,fun)

IE浏览器:元素.attachEvent(“onclick”,fun)

取消:元素.detachEvent(“onclick”,fun)

阻止事件冒泡:

标准浏览器:ev.stopPropagation()

IE浏览器:ev.cancelBubble = true

var ev = window.event || ev;
ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true

阻止事件默认行为:

默认行为:浏览器赋予的默认的操作
阻止默认行为:
标签.事件 return false
标准浏览器:ev.preventDefault();
ie浏览器:ev.returnValue = false

键盘事件:

键盘事件
onkeyup
onkeydown
onkeypress

    document.onkeydown = function(ev){
        var ev = window.event ||ev;

        //console.log(ev.key); //获取键盘按钮,在ie中获取不到  undefined
        /* console.log(ev.keyCode); //编码不区分大小写,都是按大写的算


        console.log(ev.ctrlKey); //有没有按住ctrl  按--true  没有false
        console.log(ev.shiftKey); //有没有按住ctrl  按--true  没有false
        console.log(ev.altKey); //有没有按住ctrl  按--true  没有false */

        if(ev.ctrlKey && ev.keyCode == 67){
            console.log("复制");
        }
         console.log(ev.key)
    }

滚轮事件:

1.添加滚轮事件
标准、ie: 元素.onmousewheel
ff:必须使用事件绑定 标签.addEventListener(“DOMMouseScroll”,fun)

2.获取滚动方向
标准、ie: ev.wheelDelta 120上 -120下
ff : ev.detail -3上 3下

        var oDiv = document.getElementsByTagName("div")[0];
        //1.添加滚动事件
        oDiv.onmousewheel = mouseScroll;
        oDiv.addEventListener?oDiv.addEventListener("DOMMouseScroll",mouseScroll):null;


        //2.事件触发时调用的事件处理函数
        function mouseScroll(ev){
            var ev = window.event || ev;
            //3.获取滚动方向
            var flag = true;  //true---上   false---下
            if(ev.wheelDelta){
                flag = ev.wheelDelta>0?true:false;
            }else{
                flag = ev.detail>0?false:true;
            }


            if(flag){ //上

            }else{ //下

            }

        }

事件代理:

        //1.事件委托:子元素委托父元素
        //将事件添加给父元素,当事件发生的时候,通过冒泡传递给父元素,父元素接收到事件,找到具体的子元素去处理
        var oUl = document.getElementsByTagName("ul")[0];
        
        //1.将事件委托父元素
        oUl.onclick = function(ev){
            var ev = window.event || ev;

            //2.通过target找到具体的子元素去处理事件
            var target = ev.target || ev.srcElement;

            target.style.background = "red";
        }

        //3.后面添加的标签也可以实现功能,可以发生在未来
        oUl.innerHTML += "

10.面向对象

new操作符都做了什么?

1.创建了一个空对象

2.让this指向这个空对象

3.让空对象的_proto_指向构造函数的prototype

4.隐式的返回创建的对象

面向对象的创建方式:

1.字面量创建 : (适合创建单个对象,多个会代码冗余)

2.工厂模式创建

3.构造函数创建 : (解决类型识别问题,但会造成浪费内存)

4.原型创建

5.实例创建

6.混合创建

面向对象的继承方式:

1.原型链继承(不能传参)

2.对象冒充继承

3.混合继承

闭包:

能够读取其他函数内部变量的函数,函数里面套函数,内部函数访问外部函数变量,在本质上,闭包是将函数内部与函数外部连接起来的桥梁

特点:变量会一直存储在内存中,类似全局变量,避免全局污染

缺点:浪费内存

其他

浅拷贝:拷贝地址
                 var arr1 = [1,4,2,3]
                 var arr2 = arr1
深拷贝:拷贝值
                for(var i=0;i>arr1.length;i++){
                     arr3.push(arr1[i])
                }
Ajax:原生ajax不常用,查看详情
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片