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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
js实现列表向上无限滚动
Jan 13 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/12/13 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
Python continue语句用法实例
2014/03/11 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
实例讲解Python3中abs()函数
2019/02/19 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
幼儿园植树节活动总结
2014/07/04 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
班主任工作总结范文
2015/08/13 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
JS高级程序设计之class继承重点详解
2022/07/07 Javascript