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.οnlοad=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;}}}}

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

转载于:https://www.cnblogs.com/BlogofOldK/p/5289713.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/573848.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cas .net 重定向循环_接口测试平台接入企业cas(一)

cas系统简介提供运营系统的 SSO 和 access control功能。类似百度的UC。CAS 是 Yale 大学发起的一个开源项目&#xff0c;旨在为 Web 应用系统提供一种可靠的单点登录方法&#xff0c;CAS 在 2004 年 12 月正式成为 JA-SIG 的一个项目。官方网站&#xff1a;https://www.apereo…

虚拟机安装rsync服务器配置,虚拟机安装rsync服务器配置

虚拟机安装rsync服务器配置 内容精选换一换在分布式HA部署场景下&#xff0c;ASCS主备节点通过共享盘实现数据同步。本章节指导用户将ASCS主节点的数据盘绑定给ASCS备节点并为ASCS主备节点绑定浮动IP。已在SAP ASCS主备节点之间进行过相互的SSH跳转操作。绑定共享盘创建浮动IP并…

程序包android.support.annotation不存在_efcore技巧贴也许有你不知道的使用技巧

前言.net 环境近些年也算是稳步发展。在开发的过程中&#xff0c;与数据库打交道是必不可少的。早期的开发者都是DbHelper一撸到底&#xff0c;到现在的各种各样的ORM框架大行其道。孰优孰劣谁也说不清楚&#xff0c;文无第一武无第二说的就是这个理。没有什么最好的&#xff0…

MySql数据库表类型MYISAM与InnoDB的区别

InnoDB与Myisam的六大区别 MyISAM InnoDB 构成上的区别&#xff1a; 每个MyISAM在磁盘上存储成三个文件。第一个文件的名字以表的名字开始&#xff0c;扩展名指出文件类型。 .frm文件存储表定义。 数据文件的扩展名为.MYD (MYData)。 索引文件的扩展名是.MYI…

centos系统云服务器,Centos系统怎么进云服务器

Centos系统怎么进云服务器 内容精选换一换CentOS 7.5版本操作系统的弹性云服务器默认关闭SELinux功能。通过/etc/selinux/config开启SELinux功能后&#xff0c;在输入密码时&#xff0c;会出现无法登录的问题。如果业务需要开启SELinux 功能&#xff0c;请参照本节内容进行配置…

applicationproperties不是小叶子_为何“砂糖桔”是带着叶子出售?原来其中有着“猫腻”,涨知识了...

大家好&#xff0c;我是你们的好朋友童童&#xff0c;生活中不止有眼前的苟且&#xff0c;还有诗和梦想。童童每天都给大家分享有趣实用的小知识&#xff0c;有什么意见或者建议都可以和童童交流&#xff0c;喜欢我们的可以关注呦。一起和童童来看看今天的小知识吧。随着春节的…

用android制作一个记事本app_用扁平化呈现一个天气APP

作为当下最火的设计风格之一&#xff0c;扁平化设计其实是一种简约的Ul 设计理念&#xff0c;现被广泛应用于图形用户界面上&#xff0c;在图形材料&#xff0c;例如海报&#xff0c;艺术作品&#xff0c;指导文档&#xff0c;各类出版物等方面尤为常用。今天为大家带来了我最近…

hbase hdfs外部表_硬核干货长文!Hbase来了解一下不?

本文公众号来源&#xff1a;互联网侦察 作者&#xff1a;channingbreeze最近我也在入门大数据相关的基础&#xff0c;这篇文章非常通俗易懂讲解了什么是Hbase&#xff0c;推荐阅读&#xff01;等我学所成&#xff0c;我也来写写大数据相关的入门知识。今天&#xff0c;小史的…

springboot自动配置的原理_SpringBoot实战:详解SpringBoot自动配置原理

SpringBoot 自动配置主要通过 EnableAutoConfiguration, Conditional, EnableConfigurationProperties 或者 ConfigurationProperties 等几个注解来进行自动配置完成的。EnableAutoConfiguration 开启自动配置&#xff0c;主要作用就是调用 Spring-Core 包里的 loadFactoryName…

PYTHON之路(八)

http://www.cnblogs.com/alex3714/articles/5227251.htmlSocket语法及相关socket概念A network socket is an endpoint of a connection across a computer network. Today, most communication between computers is based on the Internet Protocol; therefore most network …

python索引例子_Python实现带下标索引的遍历操作示例

本文实例讲述了Python实现带下标索引的遍历操作。分享给大家供大家参考&#xff0c;具体如下&#xff1a; 代码如下&#xff1a; #codingutf-8 #&#xff50;&#xff59;&#xff54;&#xff48;&#xff4f;&#xff4e; &#xff0d; 实现带下标索引的遍历&#xff0e; s…

kafka消息消费有延迟_RabbitMQ与Kafka的技术差异以及使用注意点

导言作为一个有丰富经验的微服务系统架构师&#xff0c;经常有人问我&#xff0c;“应该选择RabbitMQ还是Kafka&#xff1f;”。基于某些原因&#xff0c; 许多开发者会把这两种技术当做等价的来看待。的确&#xff0c;在一些案例场景下选择RabbitMQ还是Kafka没什么差别&#x…

android 通知_Android 全局消息通知框架实现(类似EventBus)

Github项目地址 https://github.com/532268948/MessageDemo一、介绍随着页面的增多&#xff0c;页面之间的信息交流也会越来越多&#xff0c;比如一个社交类app,你在个人中心修改了自己的个人信息&#xff0c;在动态展示页面你就要通知该页面有关于自己的动态需要更新自己展示在…

2019运管取消了滴滴还查吗_劳务资质2019年取消吗?劳务资质新标准你真的了解吗?...

施工劳务资质2019新标准&#xff01;劳务资质已经取消&#xff1f;不可能&#xff01;虽然这样对于很多企业来说应该比较省事&#xff0c;劳务资质也是越来越受欢迎的&#xff0c;但是企业在办理资质之前一定要将资质标准了解清楚了&#xff0c;新版施工劳务资质仅仅是将专业进…

FFmpeg获取DirectShow设备数据(摄像头,录屏)

这两天研究了FFmpeg获取DirectShow设备数据的方法&#xff0c;在此简单记录一下以作备忘。本文所述的方法主要是对应Windows平台的。 1. 列设备 ffmpeg -list_devices true -f dshow -i dummy命令执行后输出的结果如下&#xff08;注&#xff1a;中文的设备会出现乱码的情…

矩阵的对数运算公式_必修一——对数与对数运算

一、前言(废话)高中数学我们已经学习了二次函数&#xff0c;指数函数(如果不记得的读者可以往前面翻看一下)&#xff0c;这次作者为读者们讲解的是对数与对数运算&#xff0c;对数是什么呢&#xff1f;读者们心里有自己的认知吗&#xff1f;二、对数对数函数是高中阶段学习的一…

分拣外观残缺的机器人_复合机器人AGV+协作机器人的应用领域

什么是复合机器人?复合型机器人是一种集成AGV移动机器人和通用工业机器人两项功能为一身的机器人。在工业领域&#xff0c;通用工业机器人被称为机械臂或者机械手&#xff0c;主要是替代人胳膊的抓取功能;而AGV移动机器人是替代人腿脚的行走功能。复合型机器人则是手脚并用&am…

前端之旅,做一点有回报的事情

本文是参加前端早读课【同说】做的分享 首先感谢情封对前端圈的辛苦付出&#xff0c;能坚持做好一件事真的很不容易&#xff0c;敬佩这份精神。2天前看到早读课的【同说】活动计划&#xff0c;我觉得想法真的很好&#xff0c;忽然情封微信邀请我参与&#xff0c;听到后我是心虚…

差异表达基因变化倍数_10.limma教程|差异表达统计相关理论

点击上方“蓝字”关注我们10.1 Top-Tables 简介limma包提供topTable和decideTests函数概括线性模型结果&#xff0c;进行假设检验&#xff0c;调整p值进行多重检验。结果包括(log2)倍数变化&#xff0c;标准误差&#xff0c;t统计和p值。用于显著性分析的基本统计量是修正t统计…

activemq中怎么知道推送消息是否成功_如何优雅的使用activeMQ 安装、应用、安全认证、持久化...

ActiveMQ安装1. 下载资源ActiveMQ官网&#xff1a;版本说明ActiveMQ5.10.x以上版本必须使用JDK1.8才能正常使用。ActiveMQ5.9.x及以下版本使用JDK1.7即可正常使用。上传至Linux服务器解压安装文件tar -zxf apache-activemq-5.9.0-bin.tar.gz检查权限ls -al apache-activemq-5.9…