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
Nov 25 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
Javascript Promise用法详解
May 10 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
vue实现表格合并功能
Dec 01 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 日期加减的类,很不错
2009/10/10 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
linux下编译安装memcached服务
2014/08/03 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
Python中用于计算对数的log()方法
2015/05/15 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
答题辅助python代码实现
2018/01/16 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
python实现扫描ip地址的小程序
2019/04/16 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python自定义一个异常类的方法
2019/06/27 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
基于python调用psutil模块过程解析
2019/12/20 Python
pycharm的python_stubs问题
2020/04/08 Python
浅谈django channels 路由误导
2020/05/28 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
python3排序的实例方法
2020/10/20 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
文秘专业毕业生就业推荐信
2013/11/08 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
Ajax实现三级联动效果
2021/10/05 Javascript
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers