02_JavaScript学习笔记整理-BOM浏览器对象模型

02_JavaScript学习笔记整理-BOM浏览器对象模型

BOM是browser object model的缩写,简称浏览器对象模型

Window对象的分类

02_JavaScript学习笔记整理-BOM浏览器对象模型

Window对象中的属性对象Document文档对象

wondow.onload事件:当页面加载完成做一些事情

//当文档加载完毕之后,再执行操作
window.onload=function(){
       TODO
};

Document文档对象

  • Document对象集合

    • links 链接对象
    • anchors 锚对象
    • forms 表单对象
    • images 图片对象
//返回当前文档的超链接集合,相当于数组
window.document.links[0];

//获取超链接标签里面的文本内容

window.document.links[0].innerHTML;
  • document对象:能反映当前页面的各种属性。
document对象的常用属性
      title:显示文章的标题。
	  body:获取body元素节点。
      bgColor:显示页面的背景色。
      fgColor:显示页面的前景色。
document对象的常用方法:
       write():在页面中输出文本。
       writeln():在页面中输出文本,并自动换行(多一个换行符,看不出来)。
  • 访问表单的方式
    • document.forms[索引]:获取当前页面中的第几个表单(索引从0开始).
    • document.表单名称:
    • document.getElementById(“表单或者其他元素的id值”);

消息框/输入框/确认框

alert(‘信息’):消息框
//alert("你好1");
prompt(‘提示信息’,默认值): 标准输入框
//var inputText = prompt("请输入你的名字","孙悟空");
confirm( )  : 确认框
//var ret = confirm("亲,你确定删除吗?");

<a href="#" onclick="return confir('你是否需要去次奥')">是否需要去</a>

打开新窗口/关闭窗口

window.open()方法:打开一个新窗口
调用示例:
window.open("http://www.520it.com/", "_blank","")
第一个参数:要打开的网页url,可以是相对路径;
第二个参数:打开窗口的目标;除了自定义名称以外,还包括_self, _parent, _top及_blank几个特殊值;
第三个参数:是一个使用,组成的字符串,用于描述打开窗口的特性,比如大小、是否有工具栏等。
function openWin() {
	open("newWin.html");
}
close( ):关闭窗口
function closeWin() {
	close();
}
//在非IE浏览器中,close方法,不能关闭非js代码打开的窗口.
在W3C规范的浏览器中(非IE):close方法只能关闭open方法打开的窗口.

访问历史 Window对象属性对象History

history.go(index)函数,在浏览器历史记录中跳转,正数为前跳,负数为后跳
history.back()函数,后跳;
history.forward()函数,前跳;
history.length属性,获得历史记录的长度;

//------------------------------------------
让按钮点击失效:onclick=”javascript:volid(0)”

02_JavaScript学习笔记整理-BOM浏览器对象模型

Navigator 属性对象

02_JavaScript学习笔记整理-BOM浏览器对象模型

navigator对象用于获得浏览器相关信息;使用console.dir(navigator)查看成员信息。
属性名称	       说明
appCodeName	       产品名称
appName	           应用名称
appVersion	       版本号
cookieEnabled	   是否允许使用cookie
language	       语言
oscpu	           操作系统名称
platform	      操作系统平台
product	           产品代号或名称,比如Gecko
productSub	       产品发布日期20100701
userAgent	      客户端详细信息,比如:Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.11) Gecko/20100701 Firefox/3.5.1
--------------------------------------------------------------------------------
判断操作系统:
var isWin = (navigator.platform == “Win32”) || (navigator.platform == “Windows”);
var isMac = (navigator.platform == “Mac68K”) || (navigator.platform == “MacPPC”)
|| (navigator.platform == “Macintosh”);

var isUnix = (navigator.platform == “X11”) && !isWin && !isMac;

Window对象 属性对象Location

02_JavaScript学习笔记整理-BOM浏览器对象模型

window对象的location属性,保护了该窗口所装载文档的地址:location包含的常用属性:
1.hostname:文档所在地址的主机名
2.href:文档所在地址的URL地址
3.host:wend所在地址的主机地址
4.port:文档所在地址的服务端端口
5.pathname:文档所在地址的文件地址
6.protocol:装载该文档使用的协议

----------------------------------------------------------
var loc = window.location;
for(var name in loc){
    console.debug(name,loc[name]);
}

02_JavaScript学习笔记整理-BOM浏览器对象模型

window.location.href="http://www.baidu.com"

定时器

定时器:
     1):在指定的时间之后,执行什么操作,只做一次.
     2):间隔多长时间,周期性执行什么操作.
--------------------------------------------------------------------------------
setTimeout(fn,time)函数,返回timer,用于指定一段时间后执行某函数
setInterval(fn,time)函数,返回timer,用于周期性执行某函数;
   参数fn可以是字符串组成的jascript代码,也可以是一个函数名称;
   参数time表示时间,毫秒为单位;
clearTimeout(timer)函数,清除由setTimeout创建的定时器;
clearInterval(timer)函数,清除由setInterval指定的定时器;

电子时钟:

设置一个定时器的时候,他会有一个返回值.通过这个返回值,可以设置在取消定时器中从而取消定时器.

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/100786.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • html超级链接生成器,超链接地址生成器

    html超级链接生成器,超链接地址生成器超链接生成器是一款快速方便,简单易用的超链接地址生成器。它可以把以纯文本形式存在的超链接地址转换成真正的超级链接,方便你点击超链接来打开网址,或者打开IE快捷菜单等。软件特点:①界面简介,操作方便,速度快;②可以从浏览器拖放链接到窗口生成URL,或从资源管理器拖放文件到窗口生成URL;③可以批量导入文件路径来生成URL;④可以扫描某个目录下的所有文件生成URL。⑤在IE右键快捷菜单中增加生成超链…

  • datagrip 激活码 2021(最新序列号破解)

    datagrip 激活码 2021(最新序列号破解),https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • git需要安装吗(git与gitlab的区别)

    git需要安装吗(git与gitlab的区别)git和github的区别及安装1.什么是Git,与Github的关系(1)Git的定义(2)Github是什么(3)Git和Github的关系2.Git的安装(1)Windows系统上的安装(2)Linux系统上的安装(部分,参考[git官网](https://git-scm.com/download/linux”DownloadforLinu…

  • Linux终止进程的工具kill/killall/pkill/xkill/skill用法区别(转)

    Linux终止进程的工具kill/killall/pkill/xkill/skill用法区别(转)

  • python人机交互式编程_python运行的两种方式交互式

    python人机交互式编程_python运行的两种方式交互式在PyCharm下使用ipython交互式编程的方法目的:方便调试,查看中间结果,因为觉得设断点调试相对麻烦。【运行环境:macOS10.13.3,PyCharm2017.2.4】老手:选中代码行,Alt+Shift+E。或选中,鼠标右键-ExecuteLineinConsole。新手:1、安装ipython之后,查看PyCharm设置,确保Console的通用设置Us…

  • BS架构和CS架构的优缺点

    BS架构和CS架构的优缺点1、CS、BS架构定义  CS(Client/Server):客户端—-服务器结构。C/S结构在技术上很成熟,它的主要特点是交互性强、具有安全的存取模式、网络通信量低、响应速度快、利于处理大量数据。因为客户端要负责绝大多数的业务逻辑和UI展示,又称为胖客户端。它充分利用两端硬件,将任务分配到Client和Server两端,降低了系统的通讯开销。C/S结构的软件需要针对不同的操作系

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号