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 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
搭建vue开发环境
Jul 19 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
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 和 XML: 使用expat函数(一)
2006/10/09 PHP
一篇不错的PHP基础学习笔记
2007/03/18 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
JS跨域代码片段
2012/08/30 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
深入理解python中的闭包和装饰器
2016/06/12 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
python绘制条形图方法代码详解
2017/12/19 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
python3 pygame实现接小球游戏
2019/05/14 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
python实现图片横向和纵向拼接
2020/03/05 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
C语言笔试题回忆
2015/04/02 面试题
服装设计专业自荐书范文
2013/12/30 职场文书
高中考试作弊检讨书
2014/01/14 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
KTV员工管理制度
2015/08/06 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
golang 语言中错误处理机制
2021/08/30 Golang
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技