javascript对象的相关操作小结


Posted in Javascript onMay 16, 2016

我们知道浏览器对象模型(BOM)是javascript的组成之一,它提供了独立于内容与浏览器窗口进行交互的对象。其分层结构如下:

javascript对象的相关操作小结

window对象是整个BOM的核心其有document(文档对象)、location(地址对象) 和history(历史对象组成)

调用对象属性的语法:

1.对象.属性名=“属性值”;
2.对象[“属性名称字符串”]=”属性值”;

调用对象方法的语法:

1.对象的方法名();
2.对象[“方法名称字符串”]();

window对象的常用方法

window对象的常用方法

名 称 说 明
prompt() 显示可提示用户输入的对话框
alert() 显示一个大有提示信息和一个“确定“按钮的警示对话框
confirm() 显示一个大有提示信息、”确定“和”取消“按钮的对话框
close() 关闭浏览器窗口
open() 打开一个新的浏览器窗口加载给定URL所指定的文档
setTimeout() 在指定毫秒数后调用函数或计算表达式
setInterval() 按照指定的周期(以毫秒记)来调用函数或计算表达式

窗口的特征属性

名 称 说 明
height、width 高度、宽度(以像素记)
left、top 窗口的x和y坐标 以像素记
toolbar 是否显示浏览器的工具栏
scrollbars 是否显示滚动条
location 是否显示地址栏
status 是否添加状态栏
menubar 是否显示菜单栏
resizable 窗口是否可调节尺寸
titlebar 是否显示标题栏
fullscreen 是否使用全屏模式显示浏览器

window对象的常用事件

名 称 说 明
onload 一个页面或一幅图像加载完成
onmouseover 鼠标指针移到某元素之上
onclick 鼠标单击某个对象
onkeydown 某个键盘按键被按下
onchange 域的内容被改变

自定义对象的声明

第一种声明方式:

<script type="text/javascript">
  function paly() {
   var p = new Object();//创建一个Object对象开辟内存空间
   //给对象p定义属性
   p.age = 1;
   p.name = "javascript";
   //给对象p定义方法
   p.sayHi = function () {
    document.write("大家好!我是" + p.name + "我今年" + p.age + "岁了");
   }
   //返回对象p
   return p;
  }
  //创建自定义对象的实例
  var js = paly();
  //调用对象的方法
  js.sayHi();
  //调用对象的属性
  document.write(js.name);
 </script>

效果截图:

javascript对象的相关操作小结

第二中方式:

<script type="text/javascript">
  function paly() {
   
   //给对象定义属性
   this.age = 1;
   this.name = "javascript";
   //给对象定义方法
   this.sayHi = function () {
    document.write("大家好!我是" + this.name + "我今年" + this.age + "岁了");
   }
   
  }
  //创建自定义对象的实例
  var js = new paly();
  //调用对象的方法
  js.sayHi();
  //调用对象的属性
  document.write(js.name);
 </script>

效果截图:

javascript对象的相关操作小结

对象属性的遍历

<script type="text/javascript">
  function paly() {
   
   //给对象定义属性
   this.age = 1;
   this.name = "javascript";
   //给对象定义方法
   this.sayHi = function () {
    document.write("大家好!我是" + this.name + "我今年" + this.age + "岁了");
   }
   
  }
  //创建自定义对象的实例
  var js = new paly();
  //遍历对象的属性
  for (var par in js) {
   document.write("js."+par+"="+js[par]);
  }
 </script>

效果截图:

javascript对象的相关操作小结

with结构快

<script type="text/javascript">
  function paly() {
   
   //给对象定义属性
   this.age = 1;
   this.name = "javascript";
   //给对象定义方法
   this.sayHi = function () {
    document.write("大家好!我是" + this.name + "我今年" + this.age + "岁了");
   }
   
  }
  //创建自定义对象的实例
  var js = new paly();
  //with结构块中的方法或属性如不指定对象则默认为括号中(js)对象的属性或方法
  with (js) {
   sayHi();
   document.write("<br/>"+age);
  }
 </script>

效果截图:

javascript对象的相关操作小结

以上这篇javascript对象的相关操作小结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
详细讲解JS节点知识
Jan 31 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 #Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 #Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 #Javascript
Bootstrap所支持的表单控件实例详解
May 16 #Javascript
移动端横屏的JS代码(beta)
May 16 #Javascript
js实现带农历和八字等信息的日历特效
May 16 #Javascript
jQuery 常用代码集锦(必看篇)
May 16 #Javascript
You might like
PHP判断指定时间段的2个方法
2014/03/14 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
window.open的功能全解析
2006/10/10 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
react-native动态切换tab组件的方法
2018/07/07 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
业务员岗位职责
2013/11/16 职场文书
小学生新学期寄语
2014/01/19 职场文书
粗加工管理制度
2014/02/04 职场文书
写字楼租赁意向书
2014/07/30 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
怎么用Python识别手势数字
2021/06/07 Python
Golang 并发编程 SingleFlight模式
2022/04/26 Golang