原生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; }實現了事件繫結函式：
原生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(); //過載頁面 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() //失去焦點