JavaScript開發中幾個常用知識點總結


前言

  最近在做項目的時候自己寫了一些JavaScipt代碼,於是自己又進行簡單的查閱資料整理了一下,發現了如下幾個比較有用的知識點:

  1、三種聲明函數的方式

  2、jQuery $(document).ready() 與window.onload的區別

  3、location.href

  4、獲取url中的參數

  5、判斷是否存在函數的方法

  6、設置Iframe高度

  7、解決文本框設置只讀后按退鍵后退頁面

1、三種聲明函數的方式

1、聲明式的函數

function functionName(arg1, arg2) {alert(arg1+arg2);}

2、匿名函數

var functionName1 = new Function("arg1", "arg2", "alert(arg1 + arg2)");

3、直接量函數

functionName2 = function (arg1, arg2) { alert(arg1 + arg2); };

三種函數調用方式

functionName("1", "22");
functionName1("2", "11");
functionName2("Hello", "World");

繼續看,還可以這樣寫,第一次體驗很不錯

functionName1.love = "Hello World!";
alert(functionName1.love);
functionName1.Test = function () { alert("Test"); }
functionName1.Test();

2、jQuery $(document).ready() 與window.onload的區別

 1、執行時間

  window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行。 
      $(document).ready()是DOM結構繪制完畢后就執行,不必等到加載完畢。 

2、編寫個數不同

  window.onload不能同時編寫多個,如果有多個window.onload方法,只會執行一個,執行后面的一個。
      $(document).ready()可以同時編寫多個,並且都可以得到執行。

3、簡化寫法 

  window.onload沒有簡化寫法 。
      $(document).ready(function(){})可以簡寫成$(function(){})。

注意:window.onload和body.onload之間的關系和區別,最好自己親自去實踐一下。

3、location.href

1、top.location.href=”url”          在頂層頁面打開url(跳出框架)

2、parent.location.href=”url”    在父窗口打開Url地址

3、self.location.href=”url” 和 this.location.href=”url” 和 window.location.href=“url” 和location.href       都是在本頁面打開url地址

由此我解決了一個問題:就是使用了Iframe框架,同時也控制用戶超時重新登錄的限制,所以有時候登錄頁面會出現在頁面中的某部分。

處理方式就比較簡單就是在登錄頁面通過JavaScript進行一次判斷即可

<script type="text/javascript">
    if (window != top)
        top.location.href = location.href;
</script>

4、獲取url中的參數

 1、獲取指定url指定參數的值

//獲取指定url的指定參數值
//name為參數名
//url為指定的url地址
function GetQueryStringRegExp(name,url) {
    var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
    if (reg.test(url)) return decodeURIComponent(RegExp.$2.replace(/\+/g, " ")); return "";
}

2、獲取當前頁面url指定參數的值

//獲取url指定參數的值
function GetQueryStringRegExp(name) {
    var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
    if (reg.test(location.href)) return decodeURIComponent(RegExp.$2.replace(/\+/g, " ")); return "";
}

5、判斷是否存在函數的方法

 先看代碼

window.onload=function(){ 
    try{
        if(test&&typeof(test)=="function"){ 
            test(); 
        }
        else{ 
            alert("不存在的函數"); 
        } 
    }
    catch(exception){
        alert(exception); 
    }
} 

function test(){ 
    alert("函數執行……"); 
} 

第一種情況就是函數的確存在,那么就會執行該函數。

第二種情況就是函數不存在,但是在此域中存在該名稱的對象或者變量,則為提示不存在的函數。

第三種情況就是函數不存在,對象或者變量也不存在,就是該名稱是未定義的,則會提示函數未定義。

6、設置Iframe高度

 有時候在網頁中可能需要嵌入Iframe,而對Iframe的控制又不能固定,那么就可以自動根據Iframe中內容進行自動設置高度。在HTML的Iframe標簽中加入一個onload事件,就是在Iframe頁面加載完畢時進行計算設置高度。

    function SetIFrameHeight(iFrameId) {
        if (iFrameId == "") {return;}
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        var s;
        (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 0;
        var pTar = null;
        if (document.getElementById) {
            pTar = document.getElementById(iFrameId);
        } else {
            eval('pTar=' + iFrameId + ';');
        }
        pTar.style.display = "block";
        if (Sys.ie) {
            if (Sys.ie == '9.0') {
                pTar.height = pTar.contentWindow.document.body.offsetHeight + 15 + "px";
                pTar.width = pTar.contentWindow.document.body.scrollWidth + "px";
            } else if (Sys.ie == '8.0') {
                pTar.height = pTar.Document.body.offsetHeight + 25 + "px";
                pTar.width = pTar.Document.body.scrollWidth + "px";
            } else {
                pTar.height = pTar.Document.body.scrollHeight + 25 + "px";
                pTar.width = pTar.Document.body.scrollWidth + "px";
            }
        }
    }

參數就是該Iframe的id傳入,暫時通過的是IE8測試是沒問題的。

7、解決文本框設置只讀后按退鍵后退頁面

 解決方法就是定義一個全局的document.documentElement.onkeydown事件,來檢測頁面每次按鍵按下時的操作

    document.documentElement.onkeydown = function (evt) {
        var b = !!evt, oEvent = evt || window.event;
        if (oEvent.keyCode == 8) {
            var node = b ? oEvent.target : oEvent.srcElement;
            var reg = /^(input|textarea)$/i, regType = /^(text|textarea)$/i;
            if (!reg.test(node.nodeName) || !regType.test(node.type) || node.readOnly || node.disabled) {
                if (b) {
                    oEvent.stopPropagation();
                }
                else {
                    oEvent.cancelBubble = true;
                    oEvent.keyCode = 0;
                    oEvent.returnValue = false;
                }
            }
        }
    }

檢測退格鍵時,所對應的操作進行判斷,來處理禁用回退頁面刷新的問題。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM