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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
Javascript实现的分页函数
Dec 22 Javascript
点击文章内容处弹出页面代码
Oct 01 Javascript
JavaScript中的类继承
Nov 25 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
js模块加载方式浅析
Aug 12 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
Vue vm.$attrs使用场景详解
Mar 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
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
如何在django中添加日志功能
2020/02/06 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
正规的求职信范文分享
2013/12/11 职场文书
执行力心得体会
2013/12/31 职场文书
办公室人员先进事迹
2014/01/27 职场文书
活动策划邀请函
2014/02/06 职场文书
迎国庆演讲稿
2014/09/05 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
董事长年会致辞
2015/07/29 职场文书
检讨书范文
2019/04/16 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫