javascript从入门到精通

1，getElementsByClassName

首先这是HTML5 DOM中新增的一个已久的方法，所有部分旧的浏览器有可能不支持

一般用法：var element = document.getElementsByClassName('元素')；获得的是一个集合，需要循环遍历元素；

为了得到兼容，我们可以封装下这个方法来方便我们使用；

function getElementsByClassName(ele,calssname){
	if(ele.getElementsByClassName){
		return ele.getElementsByClassName(classname);
	}else{
		var _results = new Array(),
			_elems = ele.getElementsByTagName('*');
		for(var i=0,len=_elems.length;i

解释下：这个getElementsByClassName函数接受两个参数，第一个ele表示DOM树中的搜索起点，第二个calssname就是要搜索的类名了。（提示，这个例子不使用多个类名）

用法例子：

var myId = document.getElementById(id);

var myClass = getElementsByClassName(myId,'className');

2,onload

我们都知道onload事件只能执行一次，所以假设你要运行两个onload时候执行的函数，最后只能执行后一个onload事件的函数，那么我们如何执行多个onload事件的函数呢，

形式如下：

window.onload = function(){

num1();

num2();

}

所以，我们就顶一个函数addLoadEvent(func),它只接受参数，就是在页面加载完毕时执行的函数的名字

function addLoadEvent(func){
	var oldonload = window.onload; //把现在有window.onload事件处理函数的值存入变量oldonload。
	if(typeof window.onload != 'function'){ //如果这个处理函数还没有绑定任何函数，就像平时那样把新函数添加给它
		window.onload = func;
	}else{ //如果在这个处理函数上已经绑定了一些函数。就把新函数追加到现有指令的末尾
		window.onload = function(){
			oldonload();
			func();
		}
	}

}

调用：

addLoadEvent(num1);

addLoadEvent(num2);

3，trigger

模拟jquery中的trigger（）事件；

    var trigger = function (ele, method) {
        var func = ele[method];
        return func();
    };

调用方式：

trigger(document.getElementById('...'),'onclick');

4，trim去除前后空格

    function trim(str){  //删除左右两端的空格
        return str.replace(/(^\s*)|(\s*$)/g, '');
    }

5，禁止鼠标滑轮滚动

    //禁止鼠标滚轮滚动
    function disabledMouseWheel() {
        if (document.addEventListener) {
            document.addEventListener('DOMMouseScroll', scrollFunc, false);
        }//W3C  
        window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome  
    }
    function scrollFunc(evt) {
        evt = evt || window.event;
        if (evt.preventDefault) {
            // Firefox  
            evt.preventDefault();
            evt.stopPropagation();
        } else {
            // IE  
            evt.cancelBubble = true;
            evt.returnValue = false;
        }
        return false;
    }
    window.onload = disabledMouseWheel;

6，原生js实现在元素后面插入一个元素

function insertAfter(newElement, targetElement){
        var parent = targetElement.parentNode;
        if (parent.lastChild == targetElement) {
            // 如果最后的节点是目标元素，则直接添加。因为默认是最后
            parent.appendChild(newElement);
        }
        else {
            parent.insertBefore(newElement, targetElement.nextSibling);
            //如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面
        }
    }

7，getQueryString()获取url参数的值

        function getQueryString(key,func){
            if(!key || typeof key == 'undefined'){
                key = '';
                return null;
            }else {
                key = key.toLowerCase();
                var _reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)'),
                    _search = window.location.search.toLowerCase().substr(1).match(_reg);
                if(_reg !== null){
                    if(!func || func === '' || func ==='decodeURI' || typeof (func) === 'undefined'){
                        return decodeURI(_search[2]);
                    }else if(func === 'unescape'){
                        return unescape(_search[2]);
                    }else if(func === 'decodeURIComponent'){
                        return decodeURIComponent(_search[2]);
                    }
                }else{
                    return null;
                }


            }
        }

8，Cookie的设置，读取，删除

/*设置cookie*/
        function setCookie(name, value, iDay)
        {
            var _oDate=new Date();
            _oDate.setDate(_oDate.getDate()+iDay);
            document.cookie=name+'='+value+';expires='+_oDate;
        };
        /*使用方法：setCookie('user', 'andy', 11);*/
        /*获取cookie*/
        function getCookie(key,func)
        {
                var _cookies = document.cookie;
                key += '=';
                var _i = 0;
                while (_i < _cookies.length) {
                    var _offset = _i + key.length;
                    if (_cookies.substring(_i, _offset) == key) {
                        var _endstr = _cookies.indexOf(';', _offset);
                        if (_endstr == -1) {
                            _endstr = _cookies.length;
                        }
                        var r = _cookies.substring(_offset, _endstr);
                        if (r !== null) {
                            if (!func || func === '' || func == 'decodeURI' || typeof (func) == 'undefined') {
                                console.log(decodeURI(r));
                                return decodeURI(r);
                            } else if (func == 'unescape') {
                                console.log(unescape(r));
                                return unescape(r);
                            } else if (func == 'decodeURIComponent') {
                                return decodeURIComponent(r);
                            }
                        } else {
                            return null;
                        }


                    }
                    _i = _cookies.indexOf(' ', _i) + 1;
                    if (_i === 0) {
                        return;
                    }
                }
                return null;
        };


        /*使用方法：getCookie('user')*/
        /*删除cookie*/
        function removeCookie(name)
        {
            setCookie(name, 1, -1); //-1就是告诉系统已经过期，系统就会立刻去删除cookie
        };
        /*使用方法：removeCookie('user')*/

9，SessionStorage存储的设置，读取，删除；

        function setSessionStorage(key,val){
            try{
                sessionStorage.removeItem(key);
                sessionStorage.setItem(key,val);
                return 1;
            }catch(e){
                return 0;
            }
        }
        function getSessionStorage(key){
             try{
                 return sessionStorage.getItem(key);
             }catch(e){
                 console.log(e.message);
                 return 0;
             }
        }
        function removeSessionStorage(key){
            try{
                sessionStorage.removeItem(key);
            }catch(e){
                console.log(e.message);
                return 0;
            }
        }

10，LocalStorage存储的设置，读取以及删除

        function setLocalStorage(key,val){
            try{
                localStorage.removeItem(key);
                localStorage.setItem(key,val);
                return 1;
            }catch(e){
                console.log(e.message);
                return 0;
            }
        }
        function getLocalStorage(key){
            try{
                return localStorage.getItem(key);
            }catch(e){
                console.log(e.message);
                return 0;
            }
        }
        function removeLocalStorage(key){
            try{
                localStorage.removeItem(key);
            }catch(e){
                console.log(e.message);
                return 0;
            }
        }

11，页面加载loading以及loading结束

        function loading(){
            var _doc = document,
                _backUrl = 'javascript:history.go(-1)';
            var _oldLoading = document.getElementById('loading');
            if(_oldLoading !==null && typeof (_oldLoading) !== 'undefined'){
                return;
            }else{
                var _fragment = _doc.createDocumentFragment(),
                    _loading = _doc.createElement('div');
                _loading.className = 'loading';
                _loading.id = 'loading';
                var _loader = _doc.createElement('div');
                _loader.className = 'loader';
                var _p = _doc.createElement('p');
                _p.innerHTML = '正在加载中...';
                var _backBtn = _doc.createElement('a');
                _backBtn.setAttribute('href',_backUrl);
                _loading.appendChild(_loader);
                _loading.appendChild(_backBtn);
                _loader.appendChild(_p);
                _doc.body.appendChild(_loading);
            }
        }
        function enloading(){
            var _doc = document,
                _loading = _doc.getElementById('loading');
            if(_loading !==null && typeof (_loading) !=='undefined'){
                _doc.body.removeChild(_loading);
            }
        }

12，获得元素的样式

function getStyle(obj, attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }
        else{
            return getComputedStyle(obj,false)[attr];
        }
    }

调用：getStyle(document.getElementById('  '),'width');

13，判断滚动条是否滚动

    //  滚动条是否滚动
    var $topVal = 0,
        $timer = null;
    function isOnScroll(){
        if($timer === null){//  未发起时,启动定时器,30秒执行1次
            $timer = setInterval(isStopOnscroll,30);
        }
        $topVal = document.body.scrollTop;
    }
    function isStopOnscroll(){
        // 判断此刻到顶部的距离是否和1秒前的距离相等
        if($doc.body.scrollTop === $topVal){
            console.log("scroll bar is stopping!"); 
            clearInterval($timer);
            $timer = null;
        }
    }

14，移动端有弹窗的时候禁止底部页面滚动

css:

.uzai-frozen{
  height: 100%;
  overflow: hidden;
}

js:

    //  禁止页面滚动
    function frozenHtml(){
        $doc.getElementsByTagName('html')[0].classList.add('uzai-frozen');
        $doc.getElementsByTagName('body')[0].classList.add('uzai-frozen');
    }

    //  释放页面滚动
    function thawHtml(){
        $doc.getElementsByTagName('html')[0].classList.remove('uzai-frozen');
        $doc.getElementsByTagName('body')[0].classList.remove('uzai-frozen');
    }

15，获取移动端屏幕的高度

    //  获得当前屏幕的高度
    var $clientHeight = document.documentElement.clientHeight,
        $filter = $doc.getElementsByClassName('filter-all')[0];
    $filter.style.height = $clientHeight + 'px';

16，移动端返回顶部动画（先快后慢）

               var _asider = $doc.getElementsByClassName('right-banner')[0],
                        _back = _asider.getElementsByClassName('back-top')[0],
                        _timer = null,
                        _isStop = true,//   向上滚动中,用户是否滚动了滚轮;
                        _clientHeight = $doc.documentElement.clientHeight;
                    var _bodyScroll = function(){
                        var _osTop = $doc.documentElement.scrollTop || $doc.body.scrollTop;
                        if(_osTop >= _clientHeight){
                            _asider.style.display = 'block';
                        }else{
                            _asider.style.display = 'none';
                        }
                        if(!_isStop){
                            clearInterval(_timer);
                        }
                        _isStop = false;
                    };
                    addEventOnScroll(_bodyScroll);
                    _back.onclick = function(){
                        _timer = setInterval(function(){
                            //  获得滚动条距离顶部的距离
                            var _osTop = $doc.documentElement.scrollTop || $doc.body.scrollTop,
                                _speed = Math.floor(-_osTop / 2);
                            _isStop = true;
                            $doc.documentElement.scrollTop = $doc.body.scrollTop = _osTop + _speed;
                            if(_osTop === 0){
                                clearInterval(_timer);
                            }
                        },20);
                    }

17，移动端图片懒加载

 var _img = document.getElementsByClassName('lazys');
                    for (var i = 0; i < _img.length; i++) {
                        if (_img[i].offsetTop < window.innerHeight + document.body.scrollTop) {
                            var src_ = _img[i].getAttribute('data-original');
                            _img[i].setAttribute('src', src_);
                        }
                    }

18，appendHTML()－－－意在把html字符串转成html节点

HTMLElement.prototype.appendHTML = function(html) {
    var _divTemp = document.createElement("div"), _nodes = null
    // 文档片段，一次性append，提高性能
        , _fragment = document.createDocumentFragment();
    _divTemp.innerHTML = html;
    _nodes = _divTemp.childNodes;
    for (var i=0, length=_nodes.length; i

19，prependHTML:
 
var prependHTML = function(el, html) {
    var divTemp = document.createElement("div"), nodes = null
        , fragment = document.createDocumentFragment();

    divTemp.innerHTML = html;
    nodes = divTemp.childNodes;
    for (var i=0, length=nodes.length; i




20，removeElement(ele)删除当前元素


var _removeElement = function(_element){
    var _parentElement = _element.parentNode;
    if(_parentElement){
        _parentElement.removeChild(_element);
    }
};

21，移动端实时监控input的值，例如input框内只能输入数字：
_lowPrice.addEventListener('focus',function(){
    var _str = '';
    var _now = '';
    var filter_time = function(){
        var _time = setInterval(filter_staff_from_exist, 100);
        _lowPrice.addEventListener('blur',function(){
            clearInterval(_time);
        });
    };

    var filter_staff_from_exist = function(){
        _now  = _lowPrice.value.replace('/[^d]+/g','');
        _now = parseInt(_now,10);
        if(isNaN(_now)){
            _now = '';
        }
        _lowPrice.value = _now;
        if (_now != '' && _now != _str) {
            console.log(_now);
        }
        _str = _now;
    };

    filter_time();
});
22,移动端有input框的时候，当input框获得焦点的时候，若此时滑动屏幕，
想要input框失去焦点（一般真对ios机，
	因为ios机当是弹层里的input框的时候，此时如果滑动屏幕，焦点会来会跑）；
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    var windowTop = 0; //初始话可视区域距离页面顶端的距离
    _routerPlay.addEventListener('touchmove',function(){
        var _scrolls = _routerPlay.scrollTop;
        if(_scrolls >= windowTop){
            windowTop = _scrolls;
            var el = document.activeElement;
            if (el.nodeName.toLowerCase() == 'input') {
                el.blur();
                return;
            }
        }else{
            windowTop = _scrolls;
            var el = document.activeElement;
            if (el.nodeName.toLowerCase() == 'input') {
                el.blur();
                return;
            }
        }
    });

} else if (/(Android)/i.test(navigator.userAgent)) {
    var winHeight = window.innerHeight,
        bShowRec = true;
    window.addEventListener('resize', function (e) {

    });
}

23,移动端当弹层里有滚动条的时候，禁止body层滚动
目前测试ios问题不大，不过andriod机上有点问题，先把代码贴出来，谁有好的方法欢迎指导
var _filter = $doc.getElementById('uzai-choose'),
    _choose = _filter.getElementsByClassName('choose')[0],
    _goCity = _choose.getElementsByClassName('go-city')[0];

var startx, starty;
//获得角度
var getAngle = function (angx, angy) {
    return Math.atan2(angy, angx) * 180 / Math.PI;
};
//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
var getDirection = function (startx, starty, endx, endy) {
    var angx = endx - startx;
    var angy = endy - starty;
    var result = 0;

    //如果滑动距离太短
    if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
        return result;
    }
    var angle = getAngle(angx, angy);
    if (angle >= -135 && angle <= -45) {
        result = 1;
    } else if (angle > 45 && angle < 135) {
        result = 2;
    } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
        result = 3;
    } else if (angle >= -45 && angle <= 45) {
        result = 4;
    }
    return result;
};

var _bodyTop;
var _flag = true;
ele.addEventListener('touchstart', function (e) {
    startx = e.touches[0].pageX;
    starty = e.touches[0].pageY;
    _bodyTop = $doc.body.scrollTop;
}, false);
//手指离开屏幕
ele.addEventListener('touchmove', function (e) {
    $doc.body.scrollTop = _bodyTop;
    e.stopPropagation();
    var endx, endy;
    endx = e.changedTouches[0].pageX;
    endy = e.changedTouches[0].pageY;
    var direction = getDirection(startx, starty, endx, endy);
    switch (direction) {
        case 0:
            //console.log("未滑动！");
            break;
        case 1:
            //console.log("向上！");
            //  判断是否达到底部
            if (ele.scrollTop + ele.clientHeight + 5>= ele.scrollHeight) {
                //console.log('已经达到底部');
                e.preventDefault();
                return false;
            }
            e.stopPropagation();
            //console.log(e.target.className);
            break;
        case 2:
            //console.log("向下！");
            //  判断是否达到顶部
            var _scroTop = ele.scrollTop;
            if (_scroTop <= 0) {
                //console.log('已经到达顶部!');
                e.preventDefault();
                return false;
            }
            break;
        default:
    }
}, false);

ele.addEventListener('touchend',function(e){
    $doc.body.scrollTop = _bodyTop;
    //alert('ni')
});

24,移动端滑动页面的时候，如果像获得当前页面是第几个页，例如京东的页码分页
var _arr = [];
for(var i = 0,len = $pLi.length;i 0) ) {
        var _cur = Number($pLi[i].getAttribute('data-cur-page'));
        _arr.push(_cur);
        var _num = Math.max.apply(null, _arr);
        _pag.innerHTML = _num;
    }
}
25,ajax原生封装
/**
     * 执行基本ajax请求,返回XMLHttpRequest
     *  Ajax.request({
    *  url
    *  async 是否异步 true(默认)
    *  method 请求方式 POST or GET(默认)
    *  data 请求参数 (键值对字符串)
    *  success 请求成功后响应函数，参数为xhr
    *  error 请求失败后响应函数，参数为xhr 11
    *  });
     */
    var Ajax = function () {
        function request(opt) {
            function fn() {
            }
            var url = opt.url || '';  //    获得url
            var async = opt.async !== false, method = opt.method || 'GET', data = opt.data
                || null, success = opt.success || fn, error = opt.failure
                || fn;
            method = method.toUpperCase();  //  默认都转换大写
            if (method == 'GET' && data) {
                var args = '';
                if (typeof data == 'string') {
                    args = data;
                } else if (typeof data == 'object') {
                    var arr = new Array();
                    for (var k in data) {
                        var v = data[k];
                        arr.push(k + '=' + v);
                    }
                    args = arr.join('&');
                }
                url += (url.indexOf('?') == -1 ? '?' : '&') + args;
                data = null;
            }
            // var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveObject('Microsoft.XMLHTTP');
            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : '';
            xhr.onreadystatechange = function () {// 当请求被发送到服务器时，需要执行一些基于响应的任务
                _onStateChange(xhr, success, error);
            };
            xhr.open(method, url, async);// 创建一个请求，并准备向服务器发送
            if (method == 'POST') {//   如果是POST请求的时候，需要添加个请求消息头
                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');
            }
            xhr.send(data);//   向服务器发送请求
            return xhr;
        }
        function _onStateChange(xhr, success, failure) {
            if (xhr.readyState == 4) {//    请求已完成，且响应已就绪
                var s = xhr.status;//   状态码
                if (s >= 200 && s < 300) {
                    success(xhr);//
                } else {
                    failure(xhr);
                }
            } else {
            }
        }
        return {
            request: request
        };
    }();
26,URL参数设定相关方法
        
          
          
          
          

         
           
           
           
           
///设置浏览器URL
    function setUrl(url) {
        var _stateObject = {};
        var _title = '';
        history.pushState(_stateObject, _title, url);
    }

    //替换指定传入参数的值,paramName为参数,replaceWith为新值
    function replaceParamVal(Url, paramName, replaceWith) {

        var pattern = paramName + '=([^&]*)';
        var replaceText = paramName + '=' + replaceWith;
        if (Url.match(pattern)) {
            var re = eval('/(' + paramName + '=)([^&]*)/gi');
            var tmp = Url.replace(re, paramName + '=' + replaceWith);

            return (tmp);
        }
        else {
            if (Url.match('[\?]')) {
                return Url + '&' + replaceText;
            }
            else {
                return Url + '?' + replaceText;
            }
        }
        return Url + '\n' + paramName + '\n' + replaceWith;
    }


    ///删除URL指定参数
    function delQueStr(url, ref) //删除参数值
    {
        var str = '';

        if (url.indexOf('?') != -1){
            str = url.substr(url.indexOf('?') + 1);
        }
        else{
            return url;
        }
        var arr = '';
        var returnurl = '';
        var setparam = '';
        if (str.indexOf('&') != -1) {
            arr = str.split('&');
            for (var i in arr) {
                if (arr[i].split('=')[0] != ref) {
                    returnurl = returnurl + arr[i].split('=')[0] + '=' + arr[i].split('=')[1] + '&';
                }
            }
            return url.substr(0, url.indexOf('?')) + '?' + returnurl.substr(0, returnurl.length - 1);
        }
        else {
            arr = str.split('=');
            if (arr[0] == ref){
                return url.substr(0, url.indexOf('?'));
            }
            else{
                return url;
            }
        }
    }
         
           
           
           
           

         
           
           
           
           
27,原生js懒加载
        
          
          
          
          
        
          
          
          
          

           
           
           
           
         html:
        
          
          
          
          
        
          
          
          
          

         
           
           
           
           

    

        


            

                
                    
                        
                            
                                
                                上海出发
                                邮轮
                            
                            
                        
                        
<【品质济首】韩国首尔+济州岛4晚5日>全程安排五花特<【品质济首】韩国首尔+济州岛4晚5日>全程安排五花特
                        
                            ¥8888起
                            ¥9999
                        
                        
                            减
                            自营
                            推荐
                            首发
                            热卖
                            全包
                            会员
                            定制
                        
                        
                            
                            
                                班期:
                                5/6,7/9,12/12
                            
                        
                        
                            
                            
                                666+人出游 好评率100%
                            
                        
                    
                
            
	
   



        
          
          
          
          
        
          
          
          
          

           
           
           
           
         js:
        
          
          
          
          
        
          
          
          
          

         
           
           
           
           
                    var _imgs = $doc.getElementById('productlist');


                    //var _img = document.getElementsByClassName('lazys');
                    //for (var i = 0; i < _img.length; i++) {
                    //    if ((_img[i].offsetTop < (window.innerHeight + document.body.scrollTop)) && (_img[i].getAttribute('data-original'))) {
                    //        var src_ = _img[i].getAttribute('data-original');
                    //        _img[i].setAttribute('src', src_);
                    //        _img[i].removeAttribute('data-original');
                    //    }
                    //
                    //}
                    //console.log(_imgs[0].offsetTop);
                    if($doc.getElementById('productlist')){
                        var _li = _imgs.getElementsByTagName('li');
                        var _img,
                            _src;
                        for(var i = 0,len = _li.length;i

         
           
           
           
           
28,原生js处理input框第一个不能为空格
        
          
          
          
          

        
          
          
          
          

         
           
           
           
           
            var _inputValue = $doc.getElementsByClassName('serchinput')[0].value;
            //console.log(_inputValue.substr(0,1));

            if(_inputValue.substr(0,1) === ' '){
                $doc.getElementsByClassName('serchinput')[0].value = _inputValue.replace(/^ +| +$/g,'');
            }
         
           
           
           
           

         
           
           
           
           
29,删除字符串最后一个字符
        
          
          
          
          
        
          
          
          
          

         
           
           
           
           
substring(0,_inner.length-1);