• 汇总前端最最常用的JS代码片段-你值得收藏


    原始出处,可拷贝:http://www.w3cfuns.com/notes/25068/1d0d350a974d879e63f1115cf80a3288.html

    摘自:http://www.loveqiao.com/archives/768  http://www.cnblogs.com/hupan508/p/5337948.html

    html5选择器

    //参数均接收一个合法的css选择器
    element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素
    elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的nodeList集合

    鼠标滚轮事件

    复制代码
    $('#showPic').on("mousewheel DOMMouseScroll", function (e) {
        var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
            (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));            // firefox
            if (delta > 0) {
                    // 向上滚
            } else if (delta < 0) {
                    // 向下滚
            }
    });
    复制代码

    阻止冒泡

    复制代码
    //js方法
        function stopPropagation(e) {  
            e = e || window.event; 
            if(e.stopPropagation) { //W3C阻止冒泡方法  
                e.stopPropagation();  
            } else {  
                e.cancelBubble = true; //IE阻止冒泡方法  
            }  
        }  
        document.getElementById('need_hide').onclick = function(e) {  
            stopPropagation(e);  
        } 
    
    //jQuery方法
    $('.btn').click(function(){
        return false //直接在方法里 return false 即可 
    })
    复制代码

    阻止默认行为

    e.preventDefault;//阻止默认行为

    说明:该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 “submit”,在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。

    检测浏览器是否支持svg

    function hasSVG(){
        SVG_NS = 'http://www.w3.org/2000/svg';
        return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;
    } 
    alert(hasSVG())

    检测是否是微信浏览器

    复制代码
    function is_weixin(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            return true;
         } else {
            return false;
        }
    }
    alert(is_weixin())
    复制代码

    jQuery获取鼠标在图片上的坐标

    $('#imgtest').click(function(e){
        //获取鼠标在图片上的坐标
        alert('X:'+e.offsetX+'
     Y:'+e.offsetY);
        //获取元素相对于页面的坐标
        alert('X:'+$(this).offset().left+'
     Y:'+$(this).offset().top)
    });

    js获取验证码倒计时效果

    复制代码
    function getCode(obj,n){
        var t=obj.value;
        (function(){
            if(n>0){
                obj.disabled=true
                obj.value='倒计时'+(n--)+'秒';
                setTimeout(arguments.callee,1000);
            }else{
                obj.disabled=false;
                obj.value=t;    
            }    
        })();
    }
    复制代码

    jquery类似模块加载器的方法

    $.getScript("ajax/test.js", function() {
      alert("Load was performed.");
    });

    JS检测浏览器是否支持Canvas

    if(!document.createElement('canvas').getContext){
        alert('您的浏览器弱爆了')
    }else{
        alert('您的浏览器很棒')
    }

    常用正则表达式

    复制代码
    //匹配字母、数字、中文字符
    /^([A-Za-z0-9]|[u4e00-u9fa5])*$/
    
    //验证邮箱
    /^w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/ 
    
    //验证手机号
    /^1[3|5|8|7]d{9}$/
    
    //验证URL
    /^http://.+./
    
    //验证身份证号码
    /(^d{15}$)|(^d{17}([0-9]|X|x)$)/
    
    //匹配中文字符的正则表达式
    /[u4e00-u9fa5]/
    
    //匹配双字节字符(包括汉字在内)
    /[^x00-xff]/
    复制代码

    js时间戳格式化,毫秒格式化

    复制代码
    function formatDate(now)   {     
        var y=now.getFullYear();
        var m=now.getMonth()+1;
        var d=now.getDate();
        var h=now.getHours();
        var m=now.getMinutes();
        var s=now.getSeconds();
        return y+"-"+m+"-"+d+" "+h+":"+m+":"+s;     
    }     
    
    var d=new Date(1442978789184);
    alert(formatDate(d));
    复制代码

    js字符限定,一个汉字算两个字符

    http://www.loveqiao.com/archives/545

    js判断是否移动端及浏览器内核

    http://www.loveqiao.com/archives/581

    getBoundingClientRect() 获取元素位置

    复制代码
    //它返回一个对象,其中包含了left、right、top、bottom四个属性
    var X= this.getBoundingClientRect().left; 
    var Y =this.getBoundingClientRect().top; 
    
    //相当于
    //jquery的: this.offset().left、this.offset().top
    //js的:this.offsetLeft、this.offsetTop
    复制代码

    HTML5全屏

    复制代码
    function fullscreen(element) {
        if(element.requestFullscreen) {
            element.requestFullscreen();
        } else if(element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if(element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if(element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }
    fullscreen(document.documentElement)
    复制代码
     
     
  • 相关阅读:
    Spring常见面试题
    Mybatis常见面试题
    SQLSERVER查询整个数据库中某个特定值所在的表和字段的方法
    四款常见数据库比较同步软件汇总
    SQL Server常用函数整理
    比较经典的SQL面试题
    sqlserver查询数据库中有多少个表
    数据库设计三大范式
    MS SQL SERVER导出表结构到Excel
    flask-vue 解决跨域问题
  • 原文地址:https://www.cnblogs.com/rik28/p/5977279.html
Copyright © 2020-2023  润新知