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 DOM编程实例(智播客学习)
Nov 23 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
动态加载js、css的实例代码
May 26 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 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
ADODB类使用
2006/11/25 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
关于crontab的使用详解
2013/06/24 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
javascript中对对层的控制
2006/12/29 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
用python处理MS Word的实例讲解
2018/05/08 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
python编写简单端口扫描器
2019/09/04 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
开工仪式主持词
2014/03/20 职场文书
贷款担保书范文
2014/05/13 职场文书
冰峪沟导游词
2015/02/09 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书