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 相关文章推荐
jquery 插件学习(二)
Aug 06 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
angular.bind使用心得
Oct 26 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 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网上调查系统
2006/10/09 PHP
第四节--构造函数和析构函数
2006/11/16 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
详解php协程知识点
2018/09/21 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
Pycharm调试程序技巧小结
2020/08/08 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
法制宣传标语集锦
2014/06/25 职场文书
2015年教研员工作总结
2015/05/26 职场文书
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL