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 相关文章推荐
js onclick事件传参讲解
Nov 06 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 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往windows中添加用户
2006/12/06 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
js最简单的拖拽效果实现代码
2010/09/24 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
基于Python开发chrome插件的方法分析
2018/07/07 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
python调用win32接口进行截图的示例
2020/11/11 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
中间件的定义
2016/08/09 面试题
JSF界面控制层技术
2013/06/17 面试题
优秀通讯员事迹材料
2014/01/28 职场文书
请假条怎么写
2014/04/10 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
工程款申请报告
2015/05/15 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
方法汇总:Python 安装第三方库常用
2022/04/26 Python
python解析json数据
2022/04/29 Python
nginx 配置指令之location使用详解
2022/05/25 Servers