原生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));

 

 二、js類數組（arguments,dom元素集合）轉化爲數組

let arrayLike = {
'0' : 'a',
'1' : 'b',
'2' : 'c',
length : 3
};
一、Array.prototype.slice.call()
利用數組slice的方法實現
let arr1 = Array.prototype.slice.call(arrayLike);
二、[].slice.call();
let arr2 = [].slice.call(arrayLike);
三、Array.from()
ES6新增的轉換數組的方法
let arr3 = Array.from(arrayLike);
四、擴展運算符（…）
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() //失去焦點