【jQuery】第二课：JavaScript对象的使用，掌握BOM和DOM对象的使用

迈不过友情╰ 2024-04-17 18:44 63阅读 0赞

**知识点：**理解JavaScript中的对象、使用window对象的open()方法制作广告窗口、使用getElementById()方法访问DOM元素、使用getElementByName()方法访问DOM元素、使用getElementByIdTagName()方法访问DOM元素、使用定时函数和Date对象制作时钟特效。

# **1、  理解JavaScript中的对象** #

## **1.1  什么是对象？** ##

世间万物皆是对象。在JavaScript程序语言中，**对象是带有属性和方法的特殊数据类型**。在JavaScript中是没有类的概念的，只有对象。无论是字符串，数值，数组还是函数，其本质都是对象。

JavaScript是一个基于对象(没有类的概念)的语言，在 JavaScript 中提供了非常丰富的内部方法和属性，从而减轻了编程人员的工作，提高编程效率。在这些对象系统中，文档对象属于非常重要的，它位于最低层，但对于我们实现 Web 页面信息交互起作关键作用，浏览器对象模型提供了与浏览器窗口进行交互的对象。因而它们是对象系统的核心部分。

**javaScript包含多种对象有：**内置对象、外部对象、自定义对象。

*  常用内置对象：String对象、Number对象、Boolean对象、Array对象、Math对象、Date对象、RegExp对象、Function对象。
 *  外部对象：window对象、dom对象
 *  自定义对象：用户在开发中自己定义的对象

## 1.2  如何使用对象？ ##

对象包含属性和方法。

访问对象属性：**对象.属性**

调用对象方法：**对象.方法()**

# 2、  BOM常见对象操作 #

## 2.1  理解BOM（浏览器对象模型） ##

**（1）什么是BOM?**

BOM是浏览器对象模型（Browser Object Model），BOM提供了独立于内容而与浏览器窗口进行交互的对象结构，BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。由于BOM主要用于管理窗口与窗口之间的通讯，因此其**核心对象是window**。

**（2）BOM模型图**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70][]

window 对象是整个 BOM 的核心，在浏览器中打开网页后，首先看到的是浏览器窗口， 即顶层的 window 对象；其次是网页文档内容，即 document(文档)。它的内容包括一些超链接（link)、表单（form)、锚（anchor)等，表单由文本框（text)、单选按钮（radio)、按钮（button)等表单元素组成。在浏览器对象结构中，除了 document 对象外，window 对象之下还有两个对象：地址对象(location)和历史对象(history)，它们对应于 IE 中的地址栏和前进/后退按钮，我们可以利用这些对象的方法，实现类似的功能。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 1][]

**（3）BOM的作用？**

**用来获取或设置浏览器的属性、行为**，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。使用 BOM 通常可实现如下功能：

*  弹出新的浏览器窗口。 
 *  移动、关闭浏览器窗口及调整窗口的大小。 
 *  在浏览器窗口中实现页面的前进、后退功能。

## 2.2   window对象 ##

### 2.2.1   什么是window对象？ ###

window 对象也称为浏览器对象。当浏览器打开 HTML 文档时，通常会创建一个 window对象。如果文档定义了一个或多个框架，浏览器将为原始文档创建一个 window 对象，同时为每一个框架另外创建一个 window 对象。

*  window对象表示浏览器窗口，所有浏览器都支持window对象。
 *  所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。
 *  全局变量是window对象的属性，全局函数是window对象的方法。

### 2.2.1   window对象的常用方法 ###

<table> 
 <tbody> 
  <tr> 
   <td> <p><strong>方法名称</strong></p> </td> 
   <td style="width:544px;"> <p><strong>说&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;明</strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p>prompt(&nbsp;)</p> </td> 
   <td style="width:544px;"> <p>显示可提示用户输入的对话框</p> </td> 
  </tr> 
  <tr> 
   <td> <p>alert(&nbsp;)</p> </td> 
   <td style="width:544px;"> <p>显示带有一个提示信息和一个确定按钮的警示框&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>confirm(&nbsp;)</p> </td> 
   <td style="width:544px;"> <p>显示一个带有提示信息、确定和取消按钮的对话框&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>close(&nbsp;)</p> </td> 
   <td style="width:544px;"> <p>关闭浏览器窗口</p> </td> 
  </tr> 
  <tr> 
   <td> <p>open(&nbsp;)</p> </td> 
   <td style="width:544px;"> <p>打开一个新的浏览器窗口，加载给定&nbsp;URL&nbsp;所指定的文档</p> </td> 
  </tr> 
  <tr> 
   <td> <p>setTimeout(&nbsp;)</p> </td> 
   <td style="width:544px;"> <p>在指定的毫秒数后调用函数或计算表达式（延迟）</p> </td> 
  </tr> 
  <tr> 
   <td> <p>setInterval(&nbsp;)</p> </td> 
   <td style="width:544px;"> <p>按照指定的周期（以毫秒计）来调用函数或表达式（循环调用）</p> </td> 
  </tr> 
 </tbody> 
</table>

在 JavaScript 中，window对象调用方法的格式：**window.方法名();**

**注意：**window 对象是全局对象，所以在使用 window 对象的属性和方法时，window 可以省略。 例如，之前直接使用的 alert()，而不会写成 window.alert()。

**（1）confirm()方法的使用**

confirm()将弹出一个确认对话框，语法格式：**Window.confirm("对话框中显示的纯文本");**

![20190830163518984.png][]

在confirm()弹出的确认对话框中，有一条提示信息、一个“确定”按钮和一个“取消”按钮。如果用户单击“确定”按钮，则 Confirm()返回 true，如果单击“取消”按钮，则 confirm() 返 回 false 。

**注意：**在用户单击“确定”按钮或“取消”按钮将对话框关闭之前，它将阻止用户对浏览器的所有操作。也就是说，当调用 confirm()时，在用户做出应答（单击按钮或关闭对话框）之前，不会执行下一条语句。

**（2）对比prompt()方法、alert()方法和confirm()方法的区别**

*   alert()只有一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变。 
 *   prompt()有两个参数，是输入对话框，用来提示用户输入一些信息，单击“取消” 按钮则返回 null,单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息。 
 *   confirm()只有一个参数，是确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回 true，单击“取消”按钮返回 false，因此常用于 if-else 语句。

**（3）案例练习：问答小练习（prompt()方法、alert()方法和confirm()方法的使用）**

![20190830165244393.gif][]

**（4）open()方法和close()方法的使用**

**  open() 方法**在页面上弹出一个新的浏览器窗口，弹出窗口的语法格式：**Window.open("弹出窗口的 url","窗口名称"，"窗口特征”);**

<table> 
 <tbody> 
  <tr> 
   <td> <p><strong>窗口特征属性名称</strong></p> </td> 
   <td> <p><strong>说&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;明</strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p>height、width</p> </td> 
   <td> <p>窗口文档显示区的高度、宽度。以像素计。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>left、top</p> </td> 
   <td> <p>窗口的x坐标、y坐标。以像素计</p> </td> 
  </tr> 
  <tr> 
   <td> <p>toolbar=yes&nbsp;|&nbsp;no&nbsp;&nbsp;|1&nbsp;|&nbsp;0</p> </td> 
   <td> <p>是否显示浏览器的工具栏。黙认是yes。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>scrollbars=yes&nbsp;|&nbsp;no&nbsp;&nbsp;|1&nbsp;|&nbsp;0</p> </td> 
   <td> <p>是否显示滚动条。黙认是yes。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>location=yes&nbsp;|&nbsp;no&nbsp;&nbsp;|1&nbsp;|&nbsp;0</p> </td> 
   <td> <p>是否显示地址地段。黙认是yes。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>status=yes&nbsp;|&nbsp;no&nbsp;&nbsp;|1&nbsp;|&nbsp;0</p> </td> 
   <td> <p>是否添加状态栏。黙认是yes。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>menubar=yes&nbsp;|&nbsp;no&nbsp;&nbsp;|1&nbsp;|&nbsp;0</p> </td> 
   <td> <p>是否显示菜单栏。黙认是yes。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>resizable=yes&nbsp;|&nbsp;no&nbsp;&nbsp;|1&nbsp;|&nbsp;0</p> </td> 
   <td> <p>窗口是否可调节尺寸。黙认是yes。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>titlebar=yes&nbsp;|&nbsp;no&nbsp;&nbsp;|1&nbsp;|&nbsp;0</p> </td> 
   <td> <p>是否显示标题栏。黙认是yes。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>fullscreen=yes&nbsp;|&nbsp;no&nbsp;&nbsp;|1&nbsp;|&nbsp;0</p> </td> 
   <td> <p>是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式。</p> </td> 
  </tr> 
 </tbody> 
</table>

**close()方法**用于关闭浏览器窗口，语法格式：**window.close();**

**案例练习：窗口打开/关闭的练习（****open()方法和close()方法的以及**setTimeout( )方法的使用**）**

![20190831102929718.gif][]

### 2.2.2   window对象的常用事件 ###

**什么是事件？**事件是可以被JavaScript侦测到的行为。网页中的每个HTML元素都可以产生某些可以触发JavaScript函数的事件。事件可以是浏览器行为（比如：HTML 页面完成加载），也可以是用户行为（比如：HTML input 字段改变时、HTML 按钮被点击等）。常见的事件列表：

<table> 
 <tbody> 
  <tr> 
   <td> <p><strong>名称</strong></p> </td> 
   <td style="width:298px;"> <p><strong>说&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;明</strong></p> </td> 
   <td style="width:480px;"><strong>&nbsp; &nbsp; &nbsp; 注 &nbsp; &nbsp;意</strong></td> 
  </tr> 
  <tr> 
   <td> <p>onload</p> </td> 
   <td style="width:298px;"> <p>一个页面或一幅图像完成加载</p> </td> 
   <td style="width:480px;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#f33b45;"><strong>onmouseover</strong></span></p> </td> 
   <td style="width:298px;"> <p><span style="color:#f33b45;"><strong>鼠标移到某元素之上，触发事件调用函数</strong></span></p> </td> 
   <td style="width:480px;">在同一个区域中，无论怎样移动都只触发一次函数。</td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#f33b45;"><strong>onlick</strong></span></p> </td> 
   <td style="width:298px;"> <p><span style="color:#f33b45;"><strong>当用户单击某个对象时调用的事件句柄</strong></span></p> </td> 
   <td style="width:480px;"> <p>onclick通常在下列基本对象中产生：</p> <p>button(按钮对象)、checkbox(复选框)、radio(单选框)、</p> <p>reset buttons(重置按钮)、submit buttons(提交按钮)</p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#3399ea;">onkeydown</span></p> </td> 
   <td style="width:298px;"> <p><span style="color:#3399ea;">某个键盘按键被按下（打飞机游戏用到）</span></p> </td> 
   <td style="width:480px;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td> <p>onchange</p> </td> 
   <td style="width:298px;"> <p>域的内容被改变，可用于文本框、列表框等元素</p> </td> 
   <td style="width:480px;">当用户向一个文本框中输入文本时，不会触发onchange事件，只有用户输入结束后，单击文本框以外的区域，使文本框失去焦点时才触发该事件。如果是下拉框，则选择结束后即触发。</td> 
  </tr> 
 </tbody> 
</table>

*  **HTML 事件属性可以直接执行 JavaScript 代码，**
    
     *  如：<input type="button" value="点击我，出现弹窗" οnclick="javascript:alert('这里是提示内容')" />
 *  **HTML 事件属性可以调用 JavaScript 函数，**
    
     *  如：<input type="button" value="点击我，关闭当前窗口" οnclick="close\_window()" />

**案例练习：window对象常用方法、事件的综合案例**

![20190831123508258.gif][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>案例练习：window对象常用事件和方法-王迪</title>
    		<script type="text/javascript">
    			//我们会在同一个网页中，调用不同的方法，来实现各自的功能，因此需要提前定义好方法
    			//定义一个方法，用来打开一个新窗口
    			function open_new(){
    				window.open("http://www.baidu.com","new" , "width=300, height=300");
    			}
    			//打开窗口在固定位置
    			function open_fix(){
    				window.open("http://www.baidu.com","" ,"left=300,top=300,width=300, height=300");
    			}
    			//全屏打开窗体
    			function open_full(){
    				window.open("http://www.baidu.com","" ,"fullscreen=yes");
    			}
    			//弹出消息框
    			function confirm_msg(){
    				var flag = confirm("我萌吗？");
    				if(flag == true){
    					alert("你也很萌！");
    				}
    				else{
    					alert("哼，没有比我更萌的了！");
    				}
    			}
    			//关闭窗口
    			function close_window(){
    				window.close();
    			}
    			</script>
    	</head>
    	<body>
    		<form method="post" action="">
    			<input type="button" value="点击我，弹出新窗口" onclick="open_new()" /><br  /><br />
    			<input type="button" value="点击我，弹出固定位置窗口" onclick="open_fix()" /><br  /><br />
    			<input type="button" value="点击我，弹出全屏窗口" onclick="open_full()" /><br  /><br />		
    			<input type="text" value="更改文本内容时，将弹出新窗口" onchange="open_new()" /><br  /><br />
    			<input type="button" value="点击我，出现弹窗" onclick="javascript:alert('这里是提示内容')" /><br  /><br />
    			<input type="button" value="点击我，关闭当前窗口" onclick="close_window()" /><br  /><br /><br  /><br />		
    		</form>
    		<img src="cat.gif"  onmouseover="confirm_msg()" />
    	</body>
    </html>

**注意：** javascript中window.close()函数用来关闭窗体，而且IE、google、firefox浏览均支持，但由于firefox浏览器dom.allow\_scripts\_to\_close\_windows参数默认值为false，故close不起作用。

**解决办法：**①在Firefox地址栏里输入 about:config，②在配置列表中找到 dom.allow\_scripts\_to\_close\_windows，③点右键的选切换把上面的false修改为true即可。

## 2.3   history对象 ##

history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。History对象相当于一个容器，它**存储了客户端最近访问网页URL的列表信息**。由于安全方面的考虑，开发人员无法得到用户浏览器的URL，但通过history对象借由用户访问过的页面列表，可以在不知道实际URL的情况下实现后退和前进。

<table> 
 <tbody> 
  <tr> 
   <td> <p><strong>名称</strong></p> </td> 
   <td> <p><strong>说&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;明</strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p>back()</p> </td> 
   <td> <p>加载&nbsp;history&nbsp;对象列表中的前一个URL</p> </td> 
  </tr> 
  <tr> 
   <td> <p>forward()</p> </td> 
   <td> <p>加载&nbsp;history&nbsp;对象列表中的下一个URL&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>go()</p> </td> 
   <td> <p>加载&nbsp;history&nbsp;对象列表中的某个具体URL</p> </td> 
  </tr> 
 </tbody> 
</table>

window.history.back();
    window.history.forward();
    
    window.history.go(-1);//相当于back()
    window.history.go(1);//相当于forwar()
    window.history.go(0);//相当于刷新
    window.history.length;//查看历史记录栈中一共有多少个记录

**案例练习：histroy对象前进后退、刷新页面**

![2019083114533959.gif][]

**实现代码：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>案例练习：history对象模拟前进、后退、刷新页面效果-王迪</title>
    	</head>
    	<body>
    		<h1>这是测试用的history页面</h1>
    		<a href="index.html">点击，跳转到index页面</a>
    	</body>
    </html>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>index页面</title>
    		<script type="text/javascript">
    			//声明一个函数，实现后退			
    			function url_back(){
    				history.back();
    			}
    			function url_forward(){
    				history.forward();
    			}
    			function url_go(){
    				history.go(0);
    			}
    
    			</script>
    	</head>
    	<body>
    		<h1>这是index页面</h1>
    		<a href="http://www.baidu.com">去往百度页面</a><br  /><br />
    		<form method="post" action="">
    			<input type="button" value="点击我，调用back方法，后退" onclick="url_back()" /><br  /><br />
    			<input type="button" value="点击我，调用forwar方法，加载后一个url" onclick="url_forward()" /><br  /><br />
    			<input type="button" value="点击我，调用go方法，刷新页面" onclick="url_go()" /><br  /><br />			
    		</form>
    	</body>
    </html>

## 2.4   location对象 ##

location 对象提供当前页面的 URL 信息，并且可以重新装载当前页面或装入新页面。location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

**location对象属性:**

<table> 
 <tbody> 
  <tr> 
   <td> <p><strong>名称</strong></p> </td> 
   <td> <p><strong>说&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;明</strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p><strong>host</strong></p> </td> 
   <td> <p><strong>设置或返回主机名和当前URL的端口号</strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p><strong>hostname</strong></p> </td> 
   <td> <p><strong>设置或返回当前URL的主机名</strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p><strong>href</strong></p> </td> 
   <td> <p><strong>设置或返回完整的URL</strong></p> </td> 
  </tr> 
  <tr> 
   <td>pathname</td> 
   <td>设置或返回当前 URL 的路径部分。</td> 
  </tr> 
  <tr> 
   <td>port</td> 
   <td>设置或返回当前 URL 的端口号。</td> 
  </tr> 
  <tr> 
   <td>protocol</td> 
   <td>设置或返回当前 URL 的协议。</td> 
  </tr> 
  <tr> 
   <td>harch</td> 
   <td>设置或返回从井号 (#) 开始的 URL（锚）。</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>设置或返回从问号 (?) 开始的 URL（查询部分）。</td> 
  </tr> 
 </tbody> 
</table>

**用一张图，来理解location对象属性。（网址相关信息对应的location属性）**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 2][]

**location对象的常用方法：**

<table> 
 <tbody> 
  <tr> 
   <td> <p><strong>名称</strong></p> </td> 
   <td> <p><strong>说&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;明</strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p>reload()</p> </td> 
   <td> <p>重新加载当前文档，也即是刷新当前页面</p> </td> 
  </tr> 
  <tr> 
   <td> <p>replace()</p> </td> 
   <td> <p>用新的文档替换当前文档，没有历史记录，不能返回</p> </td> 
  </tr> 
  <tr> 
   <td>assign()</td> 
   <td>载入一个新的文档</td> 
  </tr> 
 </tbody> 
</table>

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

**案例练习：location对象的常用属性和方法**

![20190831200213303.gif][]

**思考：**最后一个按钮，打开菜鸟教程以后，无法后退到上一个页面，这是什么原因？

**案例代码：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>案例练习：location对象的常用属性和方法-王迪</title>
    		<script type="text/javascript">
    			var a = location.hostname;
    			var b = location.host;
    			var c = location.port;
    			var d = location.protocol;
    			document.write('当前域名是：'+a+'，当前URL是：'+b+'，当前端口号是：'+c+'，当前协议是：'+d);
    			function loc_new(){
    				location.href="http://www.baidu.com";
    			}
    			function loc_reload(){
    				console.log("123")
    				location.reload();
    			}
    			function loc_replace(){
    				location.replace("http://www.runoob.com");
    			}
    		</script>
    	</head>
    	<body>
    		<h1>这是index页面</h1>
    		<form method="post" action="">
    			<input type="button" value="点击我，打开百度" onclick="javascript:location.href='http://www.baidu.com'" /><br  /><br />
    			<input type="button" value="点击我，刷新本页面" onclick="loc_reload()" /><br  /><br />
    			<input type="button" value="点击我，打开百度"  onclick="loc_new()" /><br  /><br />
    			<input type="button" value="点击我，打开菜鸟教程" onclick="loc_replace()" /><br  /><br />	
    		</form>
    	</body>
    </html>

# 3、   document对象 #

document 对象既是 window 对象的一部分，又代表了整个 HTML 文档 ，可用来访问页面中的所有元素。所以在使用 document 对象时，除了要适用于各浏览器外，也要符合 W3C(万维网联盟）的标准。

当浏览器载入 HTML 文档，它就会成为 Document 对象。Document 对象是 HTML 文档的根节点。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

## 3.1    document对象的常用属性 ##

<table> 
 <tbody> 
  <tr> 
   <td> <p><strong>名称</strong></p> </td> 
   <td style="width:228px;"> <p><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;说&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;明</strong></p> </td> 
   <td style="width:484px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;注 &nbsp; 意</strong></td> 
  </tr> 
  <tr> 
   <td> <p>referrer</p> </td> 
   <td style="width:228px;"> <p>返回载入当前文档的文档的URL</p> </td> 
   <td style="width:484px;"> <p><strong><span style="color:#000000;">当前文档如果不是通过超链接访问的，则 document.referrer 的值为 null</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p>URL</p> </td> 
   <td style="width:228px;"> <p>返回当前文档的URL</p> </td> 
   <td style="width:484px;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td style="width:228px;">返回当前文档的标题</td> 
   <td style="width:484px;">&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**案例练习：利用document对象的referrer属性进行页面判断**

**实现效果：**当用户从指定的“领奖提示页面”点击链接，进入“抽奖页面”时，可以正常抽奖。但是当用户直接进入“抽奖页面”时，则提示用户非法进入，并给予提示后自动跳转到“领奖提示页面”。

![20190831210402609.gif][]

**领奖提示页面代码：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>领奖提示页面</title>
    	</head>
    	<body>
    		<h1><a href="choujiang.html">点击我，马上去领奖啦</a></h1>
    	</body>
    </html>

**抽奖页面代码：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>抽奖页面</title>
    		<script type="text/javascript">
    			var url_pre = document.referrer;//获取上一个页面url，并存在变量里
    			if(url_pre == "")
    			{
    				document.write("<h2>您不是从领奖页面进入，5秒后将自动跳转到领奖页面!</h2>");
    				setTimeout(function(){
    					location.href = "lingjiang.html";
    				},5000)
    			}
    		</script>
    	</head>
    	<body>
    		<h1>来抽取大奖啦！笔记本！数码相机</h1>
    	</body>
    </html>

**注意：**如果上述页面直接在本地运行，则无论是否从其他页面进入，referrer 获取的地址都将是一个空字符串。因此，需要模拟网站服务器端运行并查看效果。

## 3.1    document对象的常用方法 ##

document对象为对网页内部文档的操作，它基本上所有的东西都可以操作，一般用来操作一些标签。而要想操作这个标签里面的元素，首先要找到该元素。JS里面找元素的方式类似于CSS样式表的选择器找元素的方式，同时为元素定义一个变量。

<table> 
 <tbody> 
  <tr> 
   <td> <p><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;名 &nbsp; &nbsp; &nbsp;称</strong></p> </td> 
   <td style="width:280px;"> <p><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 说&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;明</strong></p> </td> 
   <td style="width:371px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<strong> &nbsp;注 &nbsp; &nbsp; &nbsp; &nbsp;意</strong></td> 
  </tr> 
  <tr> 
   <td> <p><strong>getElementById()</strong></p> </td> 
   <td style="width:280px;"> <p>返回对拥有指定id的第一个对象的引用</p> </td> 
   <td style="width:371px;"><span style="color:#000000;">它</span>是根据元素的ID获取这个元素对象，因为ID唯一，<span style="color:#f33b45;"><strong>返回的是一个对象。</strong></span></td> 
  </tr> 
  <tr> 
   <td> <p><strong>getElementsByName()</strong></p> </td> 
   <td style="width:280px;"> <p>返回带有指定名称的对象的集合</p> </td> 
   <td style="width:371px;">这种查找方式适用于表单元素，括号内为表单元素的名字（name），<span style="color:#f33b45;"><strong>返回的是一个对象数组。</strong></span></td> 
  </tr> 
  <tr> 
   <td> <p><strong>getElementsByTagName()</strong></p> </td> 
   <td style="width:280px;"> <p>返回带有指定标签名的对象的集合</p> </td> 
   <td style="width:371px;">括号内为标签名，是根据控件TAG获取这个控件对象，<span style="color:#f33b45;"><strong>返回的是一个对象数组。</strong></span></td> 
  </tr> 
  <tr> 
   <td> <p><strong>write()</strong></p> </td> 
   <td style="width:280px;"> <p>向文档写文本、HTML表达式或JavaScript代码</p> </td> 
   <td style="width:371px;">&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

*   getElementByld()方法一般用于访问 DIV、图片、表单元素、网页标签等，但要求访问对象的 id 是唯一的。
 *   getElementsByName()方法与 getElementById()方法相似，但它访问元素的name 属 性 ， 由 于 一 个 文 档 中 的 name 属 性 可 能 不 唯 一 ， 因 此getElementsByName()方法一般用于访问一组相同 name 属性的元素，如具有相同 name 属性的单选按钮、复选框等。
 *   getElementsByTagName()方法是按标签来访问页面元素的，一般用于访问一组相同的元素，如一组<input>、一组图片等。

**案例练习：**

![20190831220441689.gif][]

实现代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>案例练习：document对象的常用方法-王迪</title>
    		<script type="text/javascript">
                function getValue(){
                	 var x=document.getElementById("t1");//通过id获取元素内容，并存放在变量里
                     alert(x.innerHTML);//通过innerHTML属性，获取元素内容
                }
            </script>
            </head>
            <body>
                <h1 id="t1" onclick="getValue()">点击我，试试看</h1>
            </body>
    </html>

**注意：**其中innerHTML是几乎所有html元素的属性，用来设置或获取当前对象的开始和结束标签之间的html。

**案例延伸：**试着使用 getElementsByName()方法和getElementsByTagName()方法，实现该案例。（注意，这两个方法返回的都是对象数组，因此在使用innerHTML属性时，注意添加下标。）

**常见错误总结：**使用getElementsByTagName()和getElementsByName()获取不到元素。主要就是忽略了这两个方法返回的是数组对象。

**案例延伸：**如何获取表单元素的值？（可以使用value属性获取）

*  value取的是客户端输入的值，通常由input输入；
 *  innerHTML取的是原本HTML中有的值。
 *  另：使用element.innerHTML = \*\*\* 可以改变页面的值。

# 4、   Date对象 #

在 JavaScript 中，系统的内置对象有 Date 对象、Array 对象、String 对象和 Math 对象等。

*   Array：用于在单独的变量名中存储一系列的值。 
 *   String：用于支持对字符串的处理。 
 *   Math：使我们有能力执行常用的数学任务，它包含了若干个数字常量和函数。 
 *   Date：用于操作日期和时间。

## 4.1   创建一个Date对象 ##

JavaScript 中需要使用“new 对象名（）”的方法创建 一个实例，语法格式：**var 日期实例=new Date(参数)；**

*   日期实例是存储 Date 对象的变量。可以省略参数，如果没有参数，则表示当前日期和时间，
    
     *  例如： var today=new Date(); //将当前日期和时间存储在变量 today 中 
 *   参数是字符串格式“MMDD,YYYY，hh:mm:ss”，表示日期和时间，
    
     *  例如： var tdate=new Date("July15,2013,16:34:28");

Date 对象有大量用于设置、获取和操作日期的方法，从而实现在页面中显示不同类型的日期时间。其中常用的是获取日期的方法。

<table> 
 <tbody> 
  <tr> 
   <td> <p><strong>&nbsp; &nbsp; &nbsp; &nbsp; 方 &nbsp; &nbsp; 法</strong></p> </td> 
   <td> <p><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;说 &nbsp; &nbsp;明&nbsp;</strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p>getDate()</p> </td> 
   <td> <p>返回&nbsp;Date&nbsp;对象的一个月中的每一天，其值介于<span style="color:#f33b45;"><strong>1～31</strong></span>之间</p> </td> 
  </tr> 
  <tr> 
   <td> <p>getDay()</p> </td> 
   <td> <p>返回&nbsp;Date&nbsp;对象的星期中的每一天，其值介于<span style="color:#f33b45;"><strong>0～6</strong></span>之间</p> </td> 
  </tr> 
  <tr> 
   <td> <p>getHours()</p> </td> 
   <td> <p>返回&nbsp;Date&nbsp;对象的小时数，其值介于<span style="color:#f33b45;"><strong>0～23</strong></span>之间</p> </td> 
  </tr> 
  <tr> 
   <td> <p>getMinutes()</p> </td> 
   <td> <p>返回&nbsp;Date&nbsp;对象的分钟数，其值介于<span style="color:#f33b45;"><strong>0～59</strong></span>之间</p> </td> 
  </tr> 
  <tr> 
   <td> <p>getSeconds()</p> </td> 
   <td> <p>返回&nbsp;Date&nbsp;对象的秒数，其值介于<span style="color:#f33b45;"><strong>0～59</strong></span>之间</p> </td> 
  </tr> 
  <tr> 
   <td> <p>getMonth()</p> </td> 
   <td> <p>返回&nbsp;Date&nbsp;对象的月份，其值介于<span style="color:#f33b45;"><strong>0～11</strong></span>之间</p> </td> 
  </tr> 
  <tr> 
   <td> <p>getFullYear()</p> </td> 
   <td> <p>返回&nbsp;Date&nbsp;对象的年份，其值为<span style="color:#f33b45;"><strong>4位数</strong></span></p> </td> 
  </tr> 
  <tr> 
   <td>getYear()</td> 
   <td>返回2位或4位的年份，常用getFullYear()获取年份</td> 
  </tr> 
  <tr> 
   <td> <p>getTime()</p> </td> 
   <td> <p>返回自某一时刻（1970年1月1日）以来的毫秒数</p> </td> 
  </tr> 
 </tbody> 
</table>

**举例：**创建一个Date对象、输出当前系统时间等信息

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 3][]

## **4.2   案例练习：制作时钟效果，动态显示时间** ##

**实现思路：**利用Date对象的方法获取系统时间，再利用window对象的setInterval()方法，让时间动起来

![20190901102159339.gif][]

代码：JavaScript制作时钟特效

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>案例练习：利用date对象方法制作时钟效果-王迪</title>
    		<script type="text/javascript">
    		    function currTime(){
    		    	    //创建一个时间对象，将当前日期和时间存储在变量today中
    				var today=new Date();
    				//获取小时、分钟、秒
    				var hour=today.getHours();
    				var minute=today.getMinutes();
    				var ss=today.getSeconds();
    				//设置innerHTML属性，将时间显示在id为clock的元素中，注意：此时的时间是静止的
    				document.getElementById("clock").innerHTML="<h3>北京时间:"+hour+":"+minute+":"+ss+"</h3>";
    			}
    		    //利用setInterval()方法，让时钟动态显示
    			setInterval("currTime()",1000);//每隔1000毫秒，调用一次函数currTime(),此时才能实现动态实时展示时间效果
    	    </script>
            </head>
            <body onload="currTime()">
    	            <div id="clock"></div>
            </body>
    </html>

# 5、   Math对象 #

Math 对象提供了许多与数学相关的功能，它是 JavaScript 的一个全局对象，**不需要创建，直接作为对象使用**就可以调用其属性和方法。Math 对象常用方法：

<table> 
 <tbody> 
  <tr> 
   <td> <p><strong>&nbsp; &nbsp; 方 &nbsp; 法</strong></p> </td> 
   <td> <p><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;说 &nbsp; &nbsp; 明&nbsp;</strong></p> </td> 
   <td> <p><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;示 &nbsp; &nbsp; &nbsp;例</strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p>ceil(x)</p> </td> 
   <td> <p>对数进行上舍入</p> </td> 
   <td> <p>Math.ceil(25.5);返回26</p> <p>Math.ceil(-25.5);返回-25</p> </td> 
  </tr> 
  <tr> 
   <td> <p>floor(x)</p> </td> 
   <td> <p>对数进行下舍入</p> </td> 
   <td> <p>Math.floor(25.5);返回25</p> <p>Math.floor(-25.5);返回-26</p> </td> 
  </tr> 
  <tr> 
   <td> <p>round(x)</p> </td> 
   <td> <p>把数四舍五入为最接近的数</p> </td> 
   <td> <p>Math.round(25.5);返回26</p> <p>Math.round(-25.5);返回-26</p> </td> 
  </tr> 
  <tr> 
   <td> <p><strong>random()</strong></p> </td> 
   <td> <p><strong>返回0~1之间的随机数</strong></p> </td> 
   <td> <p><strong>Math.random();例如：0.6273608814137365</strong></p> </td> 
  </tr> 
  <tr> 
   <td>max(x,y)</td> 
   <td>返回 x 和 y 中的最高值</td> 
   <td>可以有多个参数，Math.max(2,8,9);输出9</td> 
  </tr> 
  <tr> 
   <td>min(x,y)</td> 
   <td>返回 x 和 y 中的最低值</td> 
   <td>可以有多个参数，Math.min(2,8,9);输出2</td> 
  </tr> 
  <tr> 
   <td>pow(x,y)</td> 
   <td>返回 x 的 y 次幂</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**思考：**以下代码的输出结果将是多少？测试输出，和你猜想的是否一致？为什么？

### 常用技巧：利用random()方法输出1~100之间的整数 ###

random()方法返回的随机数不包括 0 和 1，且都是小数，如果想选择一个 1~100 中的整数（包括 1 和 100)，则代码：**variNum=Math.floor(Math.random()\*100+1);**

### 案例练习：制作随机点名 ###

**实现思路：**①将名单存放在数组里。②通过随机数来获得整数，作为数组索引，获取数组元素。

![20190901113052643.gif][]

代码：JS随机点名案例

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>JS案例练习：制作随机点名-王迪</title>
    		<script type="text/javascript">
    			//声明一个数组，将名单存放在数组里
                var names = ["吴一","陆二","张三","李四","王五","赵六","田七","钱八","孙九","郭十","双十一","猫十二"];
                var myName;//声明一个全局变量，用来存放
                function startName(){
    	 	      var i = Math.floor(Math.random()*names.length);//产生随机数
    		      var name = names[i];//将随机数作为数组索引，调用数组元素
    		      document.getElementById("stuName").innerHTML = "<h1>"+name+"</h1>";//设置id为stuName的元素内容
    		      myName = setTimeout("startName()",200);//200毫秒后调用函数，并将结果存在全局变量myName里
    	      }
                function stopName(){
    	 	      clearTimeout(myName);//clearTimeout()方法可取消由 setTimeout()方法，调用的函数。
    	      }
          </script>
          </head>
          <body>
    	      <center>
    		    	<div id="stuName" style="width: 200px; height: 80px; border: 1px solid black; margin-bottom: 20px;"></div>
    	            <form method="post" action="">
    		            <input type="button" value="开始" onclick="startName();"/>
    		            <input type="button" value="停止" onclick="stopName();"/>	            	
    	            </form>
    
    	      </center>
          </body>
    </html>

=============这里是结束分割线=================

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b9055c718f1e47a3a3f3955cdd741ca0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/8f7342ffb10e42bfb79066d080a997b6.png
[20190830163518984.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0b85ed3596424cabbf594b3f5917b636.png
[20190830165244393.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e525aa71d35c4d9c8b6c30372a21b422.gif
[20190831102929718.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/7a1e213b4477432a8bd17115ea3ff2bc.gif
[20190831123508258.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/26a3101f40cb4f788ee5e3d1906a354f.gif
[2019083114533959.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6d4318f249284dc893794d58594c100f.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d24db0dfcf444e439cab9f8c08bafcf0.png
[20190831200213303.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5a758b31b793463ea13697834024de00.gif
[20190831210402609.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/79a13908ff194664a90c8d73764c824b.gif
[20190831220441689.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/f12a58b99f174230b7258b72555dab90.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9b657f058f0b47f593b27ef9474200ce.png
[20190901102159339.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/250a3eb756cc4893a8e7616e36c068a4.gif
[20190901113052643.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/1928a10356e8429f8c76237b3bcdc0f4.gif