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笔记 数据的存储与访问性能优化
Aug 02 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
javascript数据类型示例分享
Jan 19 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
js 对象使用的小技巧实例分析
Nov 08 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
递归列出所有文件和目录
2006/10/09 PHP
PHP 透明水印生成代码
2012/08/27 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
php-msf源码详解
2017/12/25 PHP
php实例化一个类的具体方法
2019/09/19 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
JavaScript知识点整理
2015/12/09 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
python判断输入日期为第几天的实例
2018/11/13 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
财务部副经理岗位职责
2014/03/14 职场文书
2014年信访工作总结
2014/11/17 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
普通员工辞职信范文
2015/05/12 职场文书
借条格式范本
2015/05/25 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
Python破解极验滑动验证码详细步骤
2021/05/21 Python
Java输出Hello World完美过程解析
2021/06/13 Java/Android
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS