首页 > 技术文章 > 原生js常用

xiaobai-y 2018-12-24 23:45 原文

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() //失去焦点




推荐阅读