• 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;
                    }
                }
            }
        }

    检测退格键时,所对应的操作进行判断,来处理禁用回退页面刷新的问题。

  • 相关阅读:
    VC++对话框笔记
    STL中用erase()方法遍历删除元素
    VC++中不小心选错工程类型的解决办法
    directX中常用的数学计算
    VC++中string、char* 转换为LPCSTR
    判断空间上点是否在直线上
    vc6.0插件
    VC++常用定义(如SAFE_DELETE等)
    关于控件的AutoSize属性影响界面布局的问题解决
    C#判断日期是否正确(1900~今年,月份,天数)
  • 原文地址:https://www.cnblogs.com/aehyok/p/3645972.html
Copyright © 2020-2023  润新知