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 相关文章推荐
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
javascript控制台详解
Jun 25 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
解决vue移动端适配问题
Dec 12 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 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中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
php中socket的用法详解
2014/10/24 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
JS无限树状列表实现代码
2011/01/11 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
一个简易时钟效果js实现代码
2020/03/25 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
python批量导出导入MySQL用户的方法
2013/11/15 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
教师自我评价范文
2013/12/16 职场文书
元宵节寄语大全
2015/02/27 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
maven依赖的version声明控制方式
2022/01/18 Java/Android
Spring Bean是如何初始化的详解
2022/03/22 Java/Android