JavaScript & jQuery 常用方法小记

codeGoogle 发布于2019-08-21 10:31 / 1193人阅读

摘要：函数节流用途如调整浏览器大小，或者用户输入信息，导致反复提交接口调用方法判断手机端访问获取地址栏参数返回顶部当滚动条的位置处于距顶部像素以下时，跳转链接出现，否则消失当点击跳转链接后，回到页面顶部位置正则检测手机号邮箱

1.JavaScript 函数节流
用途：如调整浏览器大小，或者用户输入信息，导致反复提交接口

function throttle(method,context) {
    clearTimeout(method.tId);
    method.tId=setTimeout(function() {
        method.call(context);
    },500);
}

调用方法：

window.onresize = function() {
    throttle(winResize);
}

2.JavaScript判断手机端访问

function isPhone() {
        var sUserAgent = navigator.userAgent;
            if (sUserAgent.indexOf("Android") > -1 
                && sUserAgent.indexOf("Mobile") > -1 
                ||sUserAgent.indexOf("iPhone") > -1 
                ||sUserAgent.indexOf("iPod") > -1 
                || sUserAgent.indexOf("Symbian") > -1 
                || sUserAgent.indexOf("IEMobile") > -1){
              //coding...
            }
          }

3.获取URL地址栏参数

function GetQueryString(name) {
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}

4.jQuery返回顶部

$(function() { 
        //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失 
        $(function () { 
            $(window).scroll(function(){ 
                if ($(window).scrollTop()>100){ 
                    $("#back_to_top").fadeIn(1500); 
                } 
                else 
                { 
                    $("#back_to_top").fadeOut(1500); 
                } 
            }); 
 
            //当点击跳转链接后，回到页面顶部位置 
 
            $("#back_to_top").click(function(){ 
                $("body,html").animate({scrollTop:0},1000); 
                return false; 
            }); 
        }); 
    });

5.正则检测手机号,邮箱

var reg= /^[1][0-9]d{9}$/;

mReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;邮箱

qqReg = /^[1-9][0-9]{4,9}$/

if(!reg.test(mobilephone)||mobilephone == null){
    alert("请输入正确的手机号！");
    return false;
};

6.生成随机数函数

function getRandom(n){
    return Math.floor(Math.random()*n+1)
}

1）获取0-100的随机数——getRandom(100);

2）获取0-999的随机数——getRandom(999);

7.jQuery模拟鼠标点击事件

 $("#a").trigger("click");//模拟执行id=a的事件

8.jQuery-onload让第一次页面加载时图片是淡入方式显示

$("#load img").load(function() { 
//图片默认隐藏 
$(this).hide(); 
//使用fadeIn特效 
$(this).fadeIn("5000"); 
})

22.移动端rem布局头部

(function (doc, win) {
        var docEl = doc.documentElement,
                resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = clientWidth / 7.5 + "px";
                    //等价于clientWidth / 750 * 100 + "px";
                };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);//resize
        doc.addEventListener("DOMContentLoaded", recalc, false);//reload
    })(document, window);

23.移动网页打开app

if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
                        var loadDateTime = new Date();
                        window.setTimeout(function() {
                            var timeOutDateTime = new Date();
                            if (timeOutDateTime - loadDateTime < 5000) {
                                window.location = "http://gwact.woniu.com/api/channel/358";
                            } else {
                                window.close();
                            }
                        },
                        25);
                        window.location = "wnapp://";
                    } else if (navigator.userAgent.match(/android/i)) {
                        var state = null;
                        try {
                            state = window.open("wnapp://", "_blank");
                        } catch(e) {}
                        if (state) {
                            window.close();
                        } else {
                            window.location = "http://gwact.woniu.com/api/channel/358";
                        }
                    }

h5视频播放，暂停

$("#media").get(0).play();
$("#media").get(0).pause();

jq发送短信验证码60s倒计时

iframe判断手机是否安装app，安装打开，未安装下载

    function show(){
        if( navigator.userAgent.indexOf("MicroMessenger") != -1 ){   
            document.getElementById("openBrowser").style.display = "block";
        }else{
     }    
    }
    
    function clik(){
    var u = navigator.userAgent, app = navigator.appVersion;
            var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android终端或者uc浏览器
            var isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            var isIpad = u.indexOf("iPad") > -1; //是否iPad
            var isIPhone = u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1; //是否为iPhone或者QQHD浏览器
            if(isAndroid){
                   var ifrSrc = "jsmcc://H/5"+"?json={"urlorClass":"http://wap.js.10086.cn/activity/482","type":"0","description":"0","isLogin":"1","title":"升级4G，抱走6GB超大流量","isurlComplete":"0","isShare":"0"}";
                    //使用iframe方式触发jsmcc://
                    var ifr = document.createElement("iframe");
                    ifr.src = ifrSrc ;
                    ifr.style.display = "none";
                    document.body.appendChild(ifr);
                    //当iframe加载5秒后，无论是否能切换到APP窗口（未安装或者版本不对，是不会打开APP的），页面继续跳转
                    setTimeout( function(){
                        window.location.href="http://wap.js.10086.cn/userfiles/wapapp/jsmcc.apk";
                        //当然也可以回退到前一页面
                        //window.history.go(-1);
                    },3000); 
        
            }else if(isIOS || isIpad || isIPhone){
                    var ifrSrc = "jsmcc://H/5"+"?json={"urlorClass":"http://wap.js.10086.cn/activity/482","type":"0","description":"0","isLogin":"1","title":"升级4G，抱走6GB超大流量","isurlComplete":"0","isShare":"0"}";
                    //使用iframe方式触发jsmcc://
                    var ifr = document.createElement("iframe");
                    window.location = ifrSrc ;
                    ifr.style.display = "none";
                    document.body.appendChild(ifr);
                    //当iframe加载5秒后，无论是否能切换到APP窗口（未安装或者版本不对，是不会打开APP的），页面继续跳转
                    setTimeout( function(){
                        window.location.href="https://itunes.apple.com/cn/app/id446332125?mt=8&t";
                        //当然也可以回退到前一页面
                        //window.history.go(-1);
                    },3000);
            }else{
                    //电脑端 不做处理
            }
        }

js字符串乘法

// 字符串乘法
String.prototype.times = function(n) { 
    return Array.prototype.join.call({length:n+1}, this); 
}; 

"*".times(5)  =>  *****

JavaScript多线程

var worker;
        function startWorker(){
            if(typeof(Worker)!=="undefined"){
            // if(typeof(worker)=="undefined"){
            //      }
                //比较重要的js，多带带放置
                worker = new Worker("./js/countdown.js");
                  worker.onmessage = function (event) {
                      
                    
                };
              }
            else{

              }
        }
        
        
        //销毁
        function stopWorker(){ 
            worker.terminate();
        }

// 判断浏览器是否支持placeholder

    var isPlaceholer = function(){
         var input = document.createElement("input");
         return "placeholder" in input;
    }

    var editPlaceholder = function(){
        var $phone = $(".phone");
        if (!isPlaceholer()) {
            $phone.val("请输入正确的手机号码");

            $phone.focus(function(event) {
                var msg = $phone.val();
                if (msg == "请输入正确的手机号码") {
                    $phone.val("");
                }
            });

            $phone.blur(function(event) {
                var msg = $phone.val();
                if (msg == "") {
                    $phone.val("请输入正确的手机号码");
                }
            });
        }
    };

GPU云服务器云服务器 jquery常用的方法 jquery&ampamp jquery常用选择器 query常用方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85689.html

前端资源系列（4）-前端学习资源分享&amp;前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
微信公众号开发小记——4.两种邀请用户的方式扫码&amp;&amp;链接

摘要：借着这个需求体会了下微信开发的两种不同类型非端口的两种开发，以及的一些正确姿势。关于用户微信登录的事情我们通过已经解决了参考我的上一篇博客微信公众号开发小记接入三方登录，所以可以直接用的装饰器完成这种事情。描述假设的我们的服务号有这么一些功能，比如底部有按钮，点击会有一些复杂的功能，这时候可能就需要一个用户系统，有用户系统就经常想要做什么分享邀请新用户之类的，这时候就又有几种方式，...

BDEEFE 2019-07-31 11:43 评论0 收藏0
温故js系列（12）-ajax&amp;&amp;优缺点&amp;&amp;node后端

摘要：接收响应当请求发送到服务器端，收到响应后，响应的数据会自动填充对象的属性。一般而已状态代码为作为成功的标志。必要时，可以将查询字符串参数追加到的末尾，以便提交给服务器。后端实现可以自学一点后端知识，便于学习。前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：Ajax JavaScript-Ajax&&no...

LiangJ 2019-08-20 10:33 评论0 收藏0
库&amp;插件&amp;框架&amp;工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

Codeing_ls 2019-08-01 18:22 评论0 收藏0
库&amp;插件&amp;框架&amp;工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

xiaowugui666 2019-08-21 18:43 评论0 收藏0