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 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
Date对象格式化函数代码
Jul 17 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
javascript操作referer详细解析
Mar 10 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
基python实现多线程网页爬虫
2015/09/06 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
python 字符串格式化的示例
2020/09/21 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
抽象类和接口的区别
2012/09/19 面试题
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
商务英语应届生自我鉴定
2013/12/08 职场文书
初中班主任寄语
2014/04/04 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
python实现网络五子棋
2021/04/11 Python
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫