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

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

英语小贴士

1、What are you try to say?——你到底想说什么?

2、Just because。——没有别的原因。

3、You will never guess。——你永远猜不到。

4、 Never say die.it's a piece of cake——别泄气,那只是小菜一碟。

5、Doctor——医生、Musician——音乐家、Photographer——摄影师、Lawyer——律师、Cashier——出纳员、Waiter——服务员、Accountant——会计师、Nurse——护士、Technical——技术

作者:aehyok

出处:http://www.cnblogs.com/aehyok/

感谢您的阅读,如果您对我的博客所讲述的内容有兴趣,那不妨点个推荐吧,谢谢支持:-O。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏魂祭心

原 利用Appdomain动态加载程序集,

37180
来自专栏玄魂工作室

如何将HTML字符转换为DOM节点并动态添加到文档中

将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术。 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题:<br />

19520
来自专栏c#开发者

selenum参考手册中文翻译

Added by SpringSideTeam, last edited by SpringSideTeam on 2006-11-23  (view chan...

29560
来自专栏XAI

ZeroClipboard实现多个浏览器兼容的复制文本到剪贴板的功能

ZeroClipboard实现多个浏览器兼容的复制文本到剪贴板的功能 本人在项目中使用的js版本。为了方便大家下载。直接粘贴代码给大家看。版本是1.2.0 /*...

28970
来自专栏小灰灰

Java 实现 markdown转Image

markdown 转 image 前段时间实现了长图文生成的基本功能,然后想了下能否有个进阶版,直接将markdown生成渲染后的图片呢? 思路 有不少的库...

36250
来自专栏java沉淀

jQuery常用的功能

14530
来自专栏GIS讲堂

Arcgis for Js实现graphiclayer的空间查询(续)

上文中,实现了简单的针对graphiclayer的空间查询工作,在本节,将更加详细的介绍针对graphiclayer的空间查询。首先,空间查询的方式:提供多种类...

12230
来自专栏一直在跳坑然后爬坑

Flutter “跳转页面”(二)前言正文

写了这么多文章,有翻译文档的,有自己理解的,也不知道到底是怎么样的风格更能让人接受,希望大家能给点意见或建议。

49220
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(83)-Easyui Datagrid 行内编辑扩展

这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交 本节主要演示扩展Datagrid行内...

51290
来自专栏hotqin888的专栏

bootstrap table x-editable select2——带图标的选择

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

1.5K10

扫码关注云+社区

领取腾讯云代金券