JavaScript & jQuery 常用方法小記

codeGoogle 發布于2019-08-21 10:31 / 1196人閱讀

摘要：函數節流用途如調整瀏覽器大小，或者用戶輸入信息，導致反復提交接口調用方法判斷手機端訪問獲取地址欄參數返回頂部當滾動條的位置處于距頂部像素以下時，跳轉鏈接出現，否則消失當點擊跳轉鏈接后，回到頁面頂部位置正則檢測手機號郵箱

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.;
                        //當然也可以回退到前一頁面
                        //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.;
                        //當然也可以回退到前一頁面
                        //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常用方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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