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 相关文章推荐
IE下js调试工具Companion.JS
Oct 15 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 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 截取字符串专题集合
2010/08/19 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
js玩一玩WSH吧
2007/02/23 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
解读Django框架中的低层次缓存API
2015/07/24 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
如何定义TensorFlow输入节点
2020/01/23 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
毕业实习评语
2014/02/10 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
无工作证明怎么写
2015/06/15 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
mysql创建存储过程及函数详解
2021/12/04 MySQL