JavaScript封闭函数及常用内置对象示例


Posted in Javascript onMay 13, 2019

本文实例讲述了JavaScript封闭函数及常用内置对象。分享给大家供大家参考,具体如下:

封闭函数

在封闭函数内部定义的函数与外部函数尽管同名也没有关系,同理,定义的变量也可以同名。

封闭函数的写法,一是加括号,一是加感叹号。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>封闭函数</title>
 <script type="text/javascript">
  var num = 22;
  function f() {
   alert("hello ");
  }
  (function () {
   var num = 11;
   function myalter() {
    alert("hello world");
   }
   alert(num);
   myalter()
  })();
  /*封闭函数的第二种写法,前面加一个感叹号或者加一个波浪线*/
  !function(){
   alert("ll");
  }();
  alert(num)
 </script>
</head>
<body>
<div>
 55
</div>
</body>
</html>

常用内置对象

1.document

document.getElemntsByTagName 通过标签名获取元素
document.getElementsById 通过id获取元素
document.referrer 获取上一个跳转页面的地址

2.location

window.location.href 获取或者重定向url地址
window.location.search 获取地址参数部分
window.location.hash 获取页面锚点或者叫hash值

<meta charset="UTF-8">
 <title>常用内置对象</title>
 <script type="text/javascript">
  /*
  * 1.document
  * document.getElemntsByTagName 通过标签名获取元素
  * document.getElementsById 通过id获取元素
  * document.referrer 获取上一个跳转页面的地址
  *
  * 2.location
  * window.location.href 获取或者重定向url地址
  * window.location.search 获取地址参数部分
  * window.location.hash 获取页面锚点或者叫hash值
  *
  * */
  window.onload = function () {
   var sUrl = document.referrer;
   /*获取服务器地址,或者说上一个页面地址*/
   var oBtn = document.getElementById("btn01");
   oBtn.onclick = function () {
    window.location.href = sUrl;
    /*但是因为不是服务器地址所以存不下来,这边可以直接写百度网址的字符串*/
   };
   var oBody = window.getElementById('body01');
   var sData = window.location.search;
   /*http://localhost:63342/Javascirpt/%E5%B8%B8%E7%94%A8%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1.html?_ijt=1
   * 如上是访问页面的地址,在最后?问好后面的就是参数,在开放中可以根据不同的参数,使得页面表现形式不一样。
   * 比如现在参数是1
   * 我们得到body的属性,让他的背景颜色变成金色
   * */
   var aRr = sData.split("=");
   var iNum = aRr[1];
   if (iNum == 1) {
    oBody.style.backgroundColor = "gold";
   }
   // if(sData!=null)
   // {
   //  alert(sData);
   // }
   alert(sData);
   /*获取地址参数*/
  }
 </script>
</head>
<body id='body01'>
<input type="button" name="" value="跳转" id="btn01">
</body>
</html>

http://localhost:63342/Javascirpt/常用内置对象.html?_ijt=1

如上是访问页面的地址,在最后?问好后面的就是参数,在开放中可以根据不同的参数,使得页面表现形式不一样。

比如现在参数是1

我们得到body的属性,让他的背景颜色变成金色

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <a href="常用内置对象.html" rel="external nofollow" >链接到常用内置对象的页面</a>
 <a href="常用内置对象.html?aa=1" rel="external nofollow" >链接到常用内置对象的页面1</a>
 <a href="常用内置对象.html?aa=2" rel="external nofollow" >链接到常用内置对象的页面2</a>
 <a href="常用内置对象.html?aa=3" rel="external nofollow" >链接到常用内置对象的页面3</a>
</body>
</html>

传递不同的参数改变页面的状态。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 #Javascript
JS中的函数与对象的创建方式
May 12 #Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 #Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 #Javascript
浅谈vue.use()方法从源码到使用
May 12 #Javascript
Vue安装浏览器开发工具的步骤详解
May 12 #Javascript
微信小程序缓存过期时间的使用详情
May 12 #Javascript
You might like
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
PHP缓冲区用法总结
2016/02/14 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
小程序实现密码输入框
2020/11/16 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python使用pickle模块储存对象操作示例
2018/08/15 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
python实现贪吃蛇小游戏
2020/03/21 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
python 如何上传包到pypi
2020/12/24 Python
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
租房协议书范例
2014/10/14 职场文书
2015年测量员工作总结
2015/05/23 职场文书
2016年暑期见闻作文
2015/11/25 职场文书