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 window对象的top、parent、opener含义介绍
Dec 03 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
js实现显示手机号码效果
Mar 09 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 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 在线翻译函数代码
2009/05/07 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
对Python3 序列解包详解
2019/02/16 Python
python argparser的具体使用
2019/11/10 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
C# .NET面试题
2015/11/28 面试题
介绍一下linux文件系统分配策略
2012/11/17 面试题
公益广告语集锦
2014/03/13 职场文书
项目工作说明书
2014/07/29 职场文书
植物生产学专业求职信
2014/08/08 职场文书
三年级学生评语大全
2014/12/26 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang