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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
react项目从新建到部署的实现示例
Feb 19 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结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
Python实现邮件的批量发送的示例代码
2018/01/23 Python
分析Python读取文件时的路径问题
2018/02/11 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
优秀小学生家长评语
2014/01/30 职场文书
党员干部承诺书
2014/03/25 职场文书
绘画专业自荐信
2014/07/04 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
办公室主任个人总结
2015/02/28 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
销售员岗位职责范本
2015/04/11 职场文书
刑事案件上诉状
2015/05/23 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
2016寒假假期总结
2015/10/10 职场文书
幼儿体育课教学反思
2016/02/16 职场文书