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 相关文章推荐
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 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+javascript实现二级级联菜单的制作
2008/05/06 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
javascript入门·对象属性方法大总结
2007/10/01 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
python 运算符 供重载参考
2009/06/11 Python
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
pytorch数据预处理错误的解决
2020/02/20 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
给客户的感谢信
2015/01/21 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python