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 相关文章推荐
JS 控制CSS样式表
Aug 20 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
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+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
HTML颜色选择器实现代码
2010/11/23 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
在Python中定义和使用抽象类的方法
2016/06/30 Python
python中正则的使用指南
2016/12/04 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
利用python实现周期财务统计可视化
2019/08/25 Python
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
会计专业自我评价
2014/02/12 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
安全生产标语口号
2015/12/26 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
电频谱管理的原则是什么
2022/02/18 无线电
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers