JavaScript

最新推荐文章于 2024-11-08 14:35:14 发布

dayiqiao8331

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量246

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Cristen/p/3252996.html

版权

1.JavaScript：对事件作出反应 ---onclick 事件

<button type="button" οnclick="alert('Welcome!')">点击这里</button>

alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

onclick 事件是众多事件之一。

2.JavaScript：改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

x=document.getElementById("demo")  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。

DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标准。

示例代码：（改变图片改变样式用法类似）

<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>

</body>
</html>

3.JavaScript：验证输入

if isNaN(x) {alert("Not Numeric")};

注：isNaN() 函数用于检查其参数是否是非数字值。

如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。返回值

isNaN() 函数可用于判断其参数是否是 NaN，该值表示一个非法的数字（比如被 0 除后得到的结果）。

如果把 NaN 与任何值（包括其自身）相比得到的结果均是 false，所以要判断某个值是否是 NaN，不能使用 == 或 === 运算符。正因为如此，isNaN() 函数是必需的。

实现：

4.<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

<body> 中的 JavaScript

在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：

实例

<!DOCTYPE html>
<html>
<body>

<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>

</body>
</html>

5.<head> 或 <body> 中的 JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

6.外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

实例

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

7.操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素：

例子

通过指定的 id 来访问 HTML 元素，并改变其内容：

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>

<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>

</body>
</html>

一、输出：

8.写到文档输出

下面的例子直接把 <p> 元素写到 HTML 文档输出中：

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
document.write("<p>My First JavaScript</p>");
</script>

</body>
</html>

但是使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：

实例

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button οnclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>

</body>
</html>

点击按钮后运行结果：糟糕！文档消失了。

二、语句：

1.JavaScript 语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "Hello World"：

document.getElementById("demo").innerHTML="Hello World";
1）同样用分号来结束语句
2) 对大小写敏感
3）添加空格提高可读性
4）您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
    document.write("Hello
      \World!");
  不过，您不能像这样折行：
    document.write \
    ("Hello World!");
5）JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

2.JavaScript 代码

JavaScript 代码（或者只有 JavaScript）是 JavaScript 语句的序列。

浏览器会按照编写顺序来执行每条语句。

本例将操作两个 HTML 元素：

document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";

三、JavaScript 变量

1.JavaScript 数据类型

JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。

当您向变量分配文本值时，应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

例子

var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!';
1）我们使用 var 关键词来声明变量，变量声明之后，该变量是空的（它没有值）。
2）一条语句，多个变量---您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

    var name="Gates", age=56, job="CEO";

声明也可横跨多行：

　　var name="Gates",
　　age=56,
　　job="CEO";

3）Value = undefined 在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined
   在执行过以下语句后，变量 carname 的值将是 undefined： var carname;但是：如果重新声明 JavaScript 变    量，该变量的值不会丢失：在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：

　　var carname="Volvo";
　　var carname;

2.JavaScript 数据类型--字符串、数字、布尔、数组、对象、Null、Undefined

 1）JavaScript 拥有动态类型
     这意味着相同的变量可用作不同的类型：

　　var x                // x 为 undefined
　　var x = 6;           // x 为数字
　　var x = "Bill";      // x 为字符串

 2）JavaScript 字符串

字符串可以是引号中的任意文本。您可以使用单引号或双引号：

　　实例

　　var carname="Bill Gates";
　　var carname='Bill Gates';

　　您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：

　　实例

　　var answer="Nice to meet you!";
　　var answer="He is called 'Bill'";
　　var answer='He is called "Bill"';

3）JavaScript 数字

　　JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

　　var x1=34.00;      //使用小数点来写
　　var x2=34;         //不使用小数点来写

　　极大或极小的数字可以通过科学（指数）计数法来书写：

　　var y=123e5;      // 12300000
　　var z=123e-5;     // 0.00123

4）JavaScript 布尔  布尔（逻辑）只能有两个值：true 或 false

5）JavaScript 数组

　 下面的代码创建名为 cars 的数组：

　　var cars=new Array();
　　cars[0]="Audi";
　　cars[1]="BMW";
　　cars[2]="Volvo";

　　或者 (condensed array):

　　var cars=new Array("Audi","BMW","Volvo");

　　或者 (literal array):
　　var cars=["Audi","BMW","Volvo"];
6)JavaScript 对象
　　
　　对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号    分隔：

　　var person={firstname:"Bill", lastname:"Gates", id:5566};

　　上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

　　空格和折行无关紧要。声明可横跨多行：

　　var person={
　　firstname : "Bill",
　　lastname  : "Gates",
　　id        :  5566
　　};

　　对象属性有两种寻址方式：

　　name=person.lastname;
　　name=person["lastname"];

7）Undefined 和 Null

　Undefined 这个值表示变量不含有值。

　可以通过将变量的值设置为 null 来清空变量。

　cars=null;
　person=null;

8）声明变量类型

当您声明新变量时，可以使用关键词 "new" 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

3.属性和方法

1）举例：汽车就是现实生活中的对象。

　　汽车的属性：

　　car.name=Fiat

　　car.model=500

　　汽车的方法：

　　car.start()

　　car.drive()

  对象创建实例：

　　<!DOCTYPE html>
　　<html>
　　<body>

　　<script>
　　person=new Object();
　　person.firstname="Bill";
　　person.lastname="Gates";
　　person.age=56;
　　person.eyecolor="blue";
　　document.write(person.firstname + " is " + person.age + " years old.");
　　</script>

　　</body>
　　</html>

2）访问对象的属性

访问对象属性的语法是：

objectName.propertyName

本例使用 String 对象的 length 属性来查找字符串的长度：

var message="Hello World!";
var x=message.length;

在以上代码执行后，x 的值是：

12

3）访问对象的方法

您可以通过下面的语法调用方法：

objectName.methodName()

这个例子使用 String 对象的 toUpperCase() 方法来把文本转换为大写：

var message="Hello world!";
var x=message.toUpperCase();

在以上代码执行后，x 的值是：

HELLO WORLD!

4）javaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
这里是要执行的代码
}

当调用该函数时，会执行函数内的代码。

5）JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

6）向未声明的 JavaScript 变量来分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

这条语句：

carname="Volvo";

将声明一个全局变量 carname，即使它在函数内执行

四、JavaScript 运算符

1.用于字符串的 + 运算符

+ 运算符用于把文本值或字符串变量加起来（连接起来）。

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

对字符串和数字进行加法运算--如果把数字与字符串相加，结果将成为字符串

例子：

　　<html>

　　<body>

　　<script type="text/javascript">
　　x=5+5;
　　document.write(x);
　　document.write("<br />");
　　x="5"+"5";
　　document.write(x);
　　document.write("<br />");
　　x=5+"5";
　　document.write(x);
　　document.write("<br />");
　　x="5"+5;
　　document.write(x);
　　document.write("<br />");
　　</script>

　　<p><strong>如果把数字与字符串相加，结果将成为字符串。</strong></p>

　　</body>
　　</html>

2.比较和逻辑运算符用于测试 true 或 false。（无特别之处）

3.if else while for 用法不再赘述。

五、JavaScript 错误 - Throw、Try 和 Catch

1.JavaScript 测试和捕捉

1）

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

语法

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

实例

在下面的例子中，我们故意在 try 块的代码中写了一个错字。

catch 块会捕捉到 try 块中的错误，并执行代码来处理它。

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" οnclick="message()">
</body>

</html>

2）Throw 语句

throw 语句允许我们创建自定义错误。

正确的技术术语是：创建或抛出异常（exception）。

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

语法

throw exception

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

实例

本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息：

<script>
function myFunction()
{
try
  {
  var x=document.getElementById("demo").value;
  if(x=="")    throw "empty";
  if(isNaN(x)) throw "not a number";
  if(x>10)     throw "too high";
  if(x<5)      throw "too low";
  }
catch(err)
  {
  var y=document.getElementById("mess");
  y.innerHTML="Error: " + err + ".";
  }
}
</script>

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" οnclick="myFunction()">Test Input</button>
<p id="mess"></p>

六、JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有：

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？

1）必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

2）E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

function validate_email(field,alerttxt)
{
with (field)//索引“@” 与 “.”的位置
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".") 
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

七、JavaScript HTML DOM

1.HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

DOM HTML 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

1.查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

1）通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id="intro" 元素：

结果：id="intro" 的段落中的文本是：Hello World!

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

如果未找到该元素，则 x 将包含 null。

2）通过标签名查找 HTML 元素

实例

本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);

2.JavaScript HTML DOM - 改变 HTML

1）改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：

今天的日期是： Thu Aug 15 2013 14:47:02 GMT+0800 (CST)

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

实例

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

2）改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

本例改变了 <h1> 元素的内容：

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

例子解释：

上面的 HTML 文档含有 id="header" 的 <h1> 元素
我们使用 HTML DOM 来获得 id="header" 的元素
JavaScript 更改此元素的内容 (innerHTML)

3）改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

本例改变了 <img> 元素的 src 属性：

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

例子解释：

上面的 HTML 文档含有 id="image" 的 <img> 元素
我们使用 HTML DOM 来获得 id="image" 的元素
JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"

3.JavaScript HTML DOM - 改变 CSS

1）改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style

例子

本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：

<h1 id="id1">My Heading 1</h1>

<button type="button" οnclick="document.getElementById('id1').style.color='red'">
点击这里
</button>

2）HTML DOM Style 对象参考手册 http://www.w3school.com.cn/htmldom/dom_obj_style.asp

4.JavaScript HTML DOM - 事件

1)对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

οnclick=JavaScript

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

例子 1

在本例中，当用户在 <h1> 元素上点击时，会改变其内容：

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

例子 2

本例从事件处理器调用一个函数：

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>

2）HTML 事件属性

如需向 HTML 元素分配事件，您可以使用事件属性。

向 button 元素分配 onclick 事件：

<button οnclick="displayDate()">点击这里</button>

点击按钮就可以执行 displayDate() 函数。

3）使用 HTML DOM 来分配事件

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：

实例

向 button 元素分配 onclick 事件：

<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
</script>

在上面的例子中，名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。

4）onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

<body οnlοad="checkCookies()">

实例：

　　<!DOCTYPE html>
　　<html>
　　<body οnlοad="checkCookies()">

　　<script>
　　function checkCookies()
　　{
　　if (navigator.cookieEnabled==true)
　　{
　　alert("已启用 cookie")
　　}
　　else
　　{
　　alert("未启用 cookie")
　　}
　　}
　　</script>

　　<p>提示框会告诉你，浏览器是否已启用 cookie。</p>
　　</body>
　　</html>

5）onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<input type="text" id="fname" οnchange="upperCase()">

实例：

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<script>
　　function myFunction()
　　{
　　var x=document.getElementById("fname");
　　x.value=x.value.toUpperCase();
　　}
　　</script>
　　</head>
　　<body>

　　请输入英文字符：<input type="text" id="fname" οnchange="myFunction()">
　　<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>

　　</body>
　　</html>

6）onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

实例：

　　<!DOCTYPE html>
　　<html>
　　<body>

　　<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-　　color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

　　<script>
　　function mOver(obj)
　　{
　　obj.innerHTML="谢谢"
　　}

　　function mOut(obj)
　　{
　　obj.innerHTML="把鼠标移到上面"
　　}
　　</script>

　　</body>
　　</html>

7）onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

八、JavaScript HTML DOM 元素（节点）

1.创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

实例

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

例子解释：

这段代码创建新的 <p> 元素：

var para=document.createElement("p");

如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是新段落。");

然后您必须向 <p> 元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素：

var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素：

element.appendChild(para);

2.删除已有的 HTML 元素

如需删除 HTML 元素，您必须首先获得该元素的父元素：

实例

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

例子解释：

这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

找到 id="div1" 的元素：

var parent=document.getElementById("div1");

找到 id="p1" 的 <p> 元素：

var child=document.getElementById("p1");

从父元素中删除子元素：

parent.removeChild(child);

提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。

不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

运行结果： 这是另一个段落。

九、JavaScript Window - 浏览器对象模型

1.Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

1）Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

实例

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

2）其他 Window 方法

一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

2.JavaScript Window Screen

window.screen 对象在编写时可以不使用 window 这个前缀。

一些属性：

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

1）Window Screen 可用高度

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

实例

返回您的屏幕的可用高度：

<script>
document.write("可用高度：" + screen.availHeight);
</script>

以上代码输出为：

可用高度：1058

转载于:https://www.cnblogs.com/Cristen/p/3252996.html

dayiqiao8331

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫