原生js常用

1， js数组去重的方法

 

//第一种
function unique(ary){
var obj={};
for(var i=0;i<ary.length;i++){
var cur = ary[i];
if(obj[cur] == cur){
ary[i] = ary[ary.length-1];
ary.length--;
i--;
}
obj[cur] = cur;
}
return ary;
}
console.log(unique([2,3,2,4,3,5,6,1,1]));
//第二种
function unique(ary){
var arr1 = [];
var obj = {};
for(var i=0;i<ary.length;i++){
if(!obj[ary[i]]){
arr1.push(ary[i]);
obj[ary[i]] = 1;

}
}
return arr1;
};
var arr = [3,1,1,2,2,3,3,4,4];
console.log(unique(arr));

 

 2、js类数组（arguments,dom元素集合）转化为数组

let arrayLike = {
'0' : 'a',
'1' : 'b',
'2' : 'c',
length : 3
};
1、Array.prototype.slice.call()
利用数组slice的方法实现
let arr1 = Array.prototype.slice.call(arrayLike);
2、[].slice.call();
let arr2 = [].slice.call(arrayLike);
3、Array.from()
ES6新增的转换数组的方法
let arr3 = Array.from(arrayLike);
4、扩展运算符（…）
ES6中新增的方法，扩展运算符（…）也可以将某些数据结构转为数组
let arr4 = [...arrayLike]

 

实现jquery中addClass()和removeClass()的功能：

function addClass(obj, className) {

if (obj.className == '') {

obj.className = className;

} else {

var arrClassName = obj.className.split(' ');

if (arrIndexOf(arrClassName, className) == -1) {

obj.className += ' ' + className;

}

}

}

function removeClass(obj, className) {

if (obj.className != '') {

var arrClassName = obj.className.split(' ');

if (arrIndexOf(arrClassName, className) != -1) {

arrClassName.splice(arrIndexOf(arrClassName, className), 1);

obj.className = arrClassName.join(' ');

}

}

}

//判断要添加的类是否已存在

function arrIndexOf(arr, v) {

for (var i = 0; i < arr.length; i++) {

if (arr[i] == v) {

return i;

}

}

return -1;

}

实现了事件绑定函数：

function bind(obj, evname, fn) {

if (obj.addEventListener) {

obj.addEventListener(evname, fn, false);

} else {

obj.attachEvent('on' + evname, function () {

fn.call(obj);//调用call方法，在IE下将this从指向window改为指向当前对象

}

)

}

}

 

原生JavaScript实现返回顶部的通用方法

function backTop(btnId) {

    var btn = document.getElementById(btnId);

    var d = document.documentElement;

    var b = document.body;

    window.onscroll = set;

    btn.style.display = "none";

    btn.onclick = function() {

        btn.style.display = "none";

        window.onscroll = null;

        this.timer = setInterval(function() {

            d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);

            b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);

            if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);

        },

        10);

    };

    function set() {

        btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"

    }

};

backTop('goTop');

原生JavaScript实现全选通用方法

function checkall(form, prefix, checkall) {

    var checkall = checkall ? checkall : 'chkall';

    for(var i = 0; i < form.elements.length; i++) {

        var e = form.elements[i];

        if(e.type=="checkbox"){

            e.checked = form.elements[checkall].checked;

        }

    }

}

原生JavaScript实现全部取消选择通用方法

function uncheckAll(form) {

    for (var i=0;i<form.elements.length;i++){

        var e = form.elements[i];

        if (e.name != 'chkall')

        e.checked=!e.checked;

    }

}

 

原生JavaScript判断是否为邮箱

function isEmail(str){

    var re=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; 

    if (re.test(str) != true) {

        return false;

    }else{

        return true;

    }  

}

 

元素选择

　　第一个返回选中id，其余则是返回一个数组
　　document.getElementById()
　　document.getElementsByName()
　　document.getElementsByClassName()
　　document.getElementsByTagName()

window对象

 

　　window.open() //打开新窗口

　　window.location //在域名后追加地址进入新页面

　　window.location.href //页面地址

　　window.location.reload() //页面重载

　　window.print() //打印页面

　　window.scrollTo(100,500) //窗口滚动到指定位置、

 

location对象

　window.location="/index.html" //基于原有域名下的页面跳转
  window.location.reload(); //重载页面

 

获取input的value

　　function check(browser){

　　　　document.getElementById("answer").value=browser

　　}

 

①reset()可以清空表单数据
②submit()可以提交表单

　　function formReset(){

　　　　document.getElementById("myForm").reset()

　　}

　　document.getElementById("myForm").submit()

　　document.getElementById('text1').focus() //获取焦点

　　document.getElementById('text1').blur() //失去焦点