《使用jQuery快速高效制作网页交互特效》Lesson2 JavaScript操作BOM对象

原创 2018年04月16日 19:20:07

window 对象

浏览器对象模型(BOM)是JavaScript的组成之一,它提供了独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关的元素组织包装起来,提供给程序设计人员使用,从而降低开发人员的劳动量,提高设计Web页面的能力。

                                   BOM是一个分层结构

                                                 ↓


BOM通常可实现如下功能:

→弹出新的浏览器窗口。

→移动、关闭浏览器窗口及调整窗口的大小。

→在浏览器窗口中实现页面的前进、后退功能。


常用的属性

window对象的常用属性
名称说明
history有关客户访问过的URL的信息
location有关当前URL的信息
screen只读属性,包含有关客户端显示屏幕的信息

属性的语法格式:

window.属性名="属性值"


常用的方法

window对象的常用方法
名称说明
prompt()显示可提示用户输入的对话框
alert()显示一个带有提示信息和一个“确定”按钮的警示对话框
confirm()显示一个带有提示信息、“确定”和“取消”按钮的对话框
close()关闭浏览器窗口
open()打开一个新的浏览器窗口,加载给定URL所指定的文档
setTimeout()在指定的毫秒数后调用函数或计算表达式
setInterval()按照指定的周期(以毫秒计)来调用函数或表达式

方法的使用格式:

window.方法名();


1.confirm()

语法:

window.confirm("对话框中显示的纯文本");

示例:

var flag = confirm("确定要删除此条信息吗?");
    if (flag == true) {
        alert("删除成功!")
    } else {
        alert("取消删除!")
    }

alert()方法、prompt()方法、confirm()方法的不同:

→alert()只有一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何改变。

→prompt()有两个参数,是输入对话框,用来提示用户输入一些信息,单击“取消”按钮则返回null,单击“确定”按钮则返回用户输入的值,常用于用户关于特定问题而反馈的信息。

→confirm()只有一个参数,是确认对话框,显示提示对话框信息、“确定”按钮和“取消”按钮,单击“确定”按钮返回true,单击“取消”按钮返回false,因此与if-else语句搭配使用。


2.close()

语法:

window.close();


3.open()

语法:

window.open("弹出窗口的url","窗口名称","窗口特征");

窗口的特征属性
名称说明
height、width窗口文档显示区的高度、宽度,以像素计
left、top窗口的x坐标、y坐标,以像素计
toolbar=yes|no|1|0是否显示浏览器的工具栏,默认是yes
scrollbars=yes|no|1|0是否显示滚动条,默认是yes
location=yes|no|1|0是否显示地址栏,默认是yes
status=yes|no|1|0是否添加状态栏,默认是yes
menubar=yes|no|1|0是否显示菜单栏,默认是yes
resizable=yes|no|1|0窗口是否可调节尺寸,默认是yes
titlebar=yes|no|1|0是否显示标题栏,默认是yes
fullscreen=yes|no|1|0是否使用全屏模式显示浏览器,默认是no


history对象与location对象

history对象提供用户最近浏览过的URL列表。

history对象的方法
名称描述
back()加载history对象列表中的前一个URL
forward()加载history对象列表中的后一个URL
go()加载history对象列表中的某个具体URL

→history.back()方法等效于浏览器中的“后退”按钮。

→history.forward()等效于浏览器中的“前进”按钮。

→go(n)方法中的n是具体的数字。

history,go(1)等价于forward()方法。

history,go(-1)等价于back()方法。


location对象提供当前页面的URL信息

location对象的属性
名称说明
host设置或返回主机名和当前URL的端口号
hostname设置或返回当前URL的主机名
href设置或返回完整的URL
location对象的方法
名称说明
reload()重新加载当前文档
replace()用新的文档替换当前文档

location对象常用的属性是href,通过对此属性设置不同的网址,从而达到跳转功能。

例如:

<a href="javascript:location.href='flower.html'">查看详情</a>


document对象

document对象的常用属性
属性描述
referrer返回载入当前文档的URL
URL返回当前文档的URL

语法:

document.referrer;
document.URL;
document对象的常用方法
方法描述
getElementById()返回对拥有指定id的第一个对象的引用
getElementsByName()返回带有指定名称的对象集合
getElementByTagName()返回带有指定标签名的对象的集合
write()向文档写文本、HTML表达式或JavaScript代码


JavaScript内置对象

Date:用于操作日期和时间

Array:用于单独的变量名中存储一系列的值

String:用于支持对字符串的处理

Math:使我们有能力执行常用的数学任务,它包含了若干个数学常量和函数


Date对象

语法:

var 日期实例 = new Date(参数);
Date对象的常用方法
方法说明
getDate()返回Date对象的一个月中的每一天,其值为1~31
getDay()返回Date对象的星期中的每一天,其值为0~6
getHours()返回Date对象的小时数,其值为0~23
getMinutes()返回Date对象的分钟数,其值为0~59
getSeconds()返回Date对象的秒数,其值为0~59
getMonth()返回Date对象的月份,其值为0~11
getFullYear()返回Date对象的年份,其值为四位数
getTime()

返回自某一时刻(1970年1月1日)以来的毫秒数

示例:

<script type="text/javascript">
    function time() {
        var today = new Date();
        var hh = today.getHours();
        var mm = today.getMinutes();
        var ss = today.getSeconds();
        var yyyy = today.getFullYear();
        var m = today.getMonth();
        var dd = today.getDate();
        var d = today.getDay();
        var c;
        switch (d) {
            case d = 0:
                c = "星期日";
                break;
            case d = 1:
                c = "星期一";
                break;
            case d = 2:
                c = "星期二";
                break;
            case d = 3:
                c = "星期三";
                break;
            case d = 4:
                c = "星期四";
                break;
            case d = 5:
                c = "星期五";
                break
            case d = 6:
                c = "星期六";
                break;
        }
        var q;
        if (hh > 12) {
            q = "PM";
        } else {
            q = "AM";
        }
        document.getElementById("h1_time").innerHTML = yyyy + "年" + (m+1) + "月" + dd + "日" + "   " + hh + ":" + mm + ":" + ss + "   " + q + "   " + c;
    }
    var mytime = setInterval("time()", 1000);
</script>



Math对象

Math对象的常用方法
方法说明示例
ceil()对数进行上舍入

Math.ceil(25.5);返回26

Math.ceil(-25.5);返回-25

floor()对数进行下舍入

Math.floor(25.5);返回25

Math.floor(-25.5);返回-26

round()把数四舍五入为最接近的数

Math.round(25.5);返回26

Math.round(-25.5);返回-26

random()返回0~1中的随机数Math.random();例如,0.51516684

如果希望返回一个1~100中的整数(包括1和100):

var iNum=Math.floor(Math.random()*100+1);



定时函数

常用定时函数

1.setTImeout()

语法:

setTImeout("调用的函数名称",等待的毫秒数);

2.setInterval()

语法:

setInterval("调用的函数名称",周期性调用函数之间间隔的毫秒数);

3.clearTimeout()和clearInterval()

clearTimeout()函数用来清楚由setTime()函数设置的定时器。

语法:

clearTimeout(setTimeout()返回的ID值);

clearInterval()函数用来清楚由setInterval()函数设置的定时器。

语法:

clearInterval(setInterval()返回的ID值);

如何访问一个进程的内存空间

           如何访问一个进程的内存空间    在WIN32中,每个应用程序都可“看见”4GB的线性地址空间,其中最开始的4MB和最后的2GB由操作系统保留,剩下不足2GB的空间用于应用程序私...
  • ypyRock
  • ypyRock
  • 2001-09-27 11:29:00
  • 1756

《使用jQuery快速高效制作网页交互特效》Lesson3 JavaScript操作DOM对象

DOM操作操作dom时通常分为三类:1.DOM Core(核心)DOM Core不是JavaScript的专属品,任何一种支持DOM的编程语言都可以使用它,它的用途不仅限于处理一种使用标记语言编写出来...
  • weixin_40716583
  • weixin_40716583
  • 2018-04-19 21:55:05
  • 19

北大青鸟ACCP7.0使用jQuery快速高效制作网页交互特效全套案例及ppt资源

  • 2015年07月05日 11:59
  • 40.78MB
  • 下载

使用jQuery快速高效制作网页交互特效

  • 2015年05月20日 21:42
  • 43.76MB
  • 下载

北大青鸟 S2 7.0使用jQuery快速高效制作网页交互特效1

  • 2014年12月08日 15:32
  • 33.77MB
  • 下载

《使用jQuery快速高效制作网页交互特效》Lesson1 JavaScript基础

什么是JavaScript?——JavaScript 是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性能的脚本语言。JavaScript的特点J...
  • weixin_40716583
  • weixin_40716583
  • 2018-04-15 21:26:31
  • 20

北大青鸟accp7.0 使用jQuery快速高效制作网页交互特效课件+上级+课后作业答案

  • 2017年05月26日 01:15
  • 18.87MB
  • 下载

jQuery快速高效制作网页交互特效第五章课后4

shangji4.html * { margin: 0px; padding: 0px; font-size: 1...
  • qq_36074064
  • qq_36074064
  • 2017-04-26 17:06:34
  • 258

使用Jquery快速高效制作网页交互特效

1.DOM操作分为DOMCore、HTML-DOM和CSS-DOM3种操作类型。 2.对DOM元素节点的操作包括查找、创建、替换、复制和遍历。 3.在JQuery中,提供了append()等一系列...
  • qq_38176719
  • qq_38176719
  • 2017-06-03 09:37:25
  • 236

HTML第八章上机练习1

经济半小时专题报道页面 2009年春节期间,中央电视台财经频道《经济半小时》栏目重磅推出春节特别节目“2009民生报告”,通过小人物的真实故事回顾2009热点民生话题。在2010...
  • qq_36074064
  • qq_36074064
  • 2016-10-21 14:03:13
  • 264
收藏助手
不良信息举报
您举报文章:《使用jQuery快速高效制作网页交互特效》Lesson2 JavaScript操作BOM对象
举报原因:
原因补充:

(最多只允许输入30个字)