jQuery窗口

127 阅读6分钟

jQuery window

jQuery window的定义

jQuery的window对象代表浏览器中的一个开放窗口。窗口对象是由浏览器自动创建的。假设我们的文档包含多个框架,那么浏览器就会为HTML文档创建一个窗口对象,并为每个框架创建额外的窗口对象。窗口对象不是jQuery或JavaScript的对象,它是浏览器的对象。几乎所有的浏览器都支持一个窗口对象,但没有适用于窗口对象的公共标准。

jQuery窗口的属性

窗口对象的属性有。

  • **closed -**这个属性代表一个窗口是否被关闭,它返回一个布尔值。
  • **console -**这个属性返回Console对象,用于记录到浏览器的控制台。
  • **defaultStatus -**该属性用于设置或获取窗口状态栏的默认文本。
  • **document -**此属性用于获取窗口的Document对象。
  • **frameElement -**该属性用于获取当前窗口中的元素。
  • **frames -**此属性用于获取当前窗口中所有的元素。
  • **history -**这个属性用来获取窗口的历史对象。
  • **innerHeight -**这个属性用来获取有滚动条的窗口的内容区域的高度。
  • **innerWidth -**此属性用于获取带滚动条的窗口内容区域的宽度。
  • **length -**这个属性用来获取当前窗口中元素的数量。
  • **localStorage -**这个属性允许在网络浏览器中存储键/值对,没有过期日期。
  • **location -**此属性用于获取窗口的位置对象。
  • **name -**该属性用于设置或获取窗口的名称。
  • **navigator -**此属性用于获取窗口的导航器对象。
  • **opener -**这个属性用来获取创建窗口的引用。
  • **outerHeight -**这个属性用来获取浏览器窗口的高度,包括滚动条或工具条。
  • **outerWidth -**这个属性用来获取浏览器窗口的宽度,包括滚动条或工具条。
  • **pageXOffset -**这个属性用来获取当前文档在窗口左上角(水平方向)的滚动的像素数。
  • **pageYOffset -**这个属性用来获取当前文档从窗口左上角(垂直方向)滚动的像素。
  • **parent -**这个属性用来获取当前窗口的父级。
  • **screen -**该属性用于获取窗口的屏幕对象。
  • **screenLeft -**此属性用于获取窗口相对于屏幕的水平坐标。
  • **screenTop -**此属性用于获取窗口相对于屏幕的垂直坐标。
  • **screenX -**此属性用于获取窗口相对于屏幕的水平坐标。
  • **screenY -**这个属性用来获取窗口相对于屏幕的垂直坐标。
  • **sessionStorage -**这个属性允许在一个网页浏览器中存储一个会话的键/值对数据。
  • **scrollX -**这是pageXOffset的一个别名。
  • scrollY- 这是pageYOffset的一个别名。
  • **self -**该属性用于获取当前窗口。
  • **status -**这个属性用来获取或设置一个窗口的状态栏文本。
  • **top -**这个属性用来获得最上面的浏览器窗口。

jQuery窗口的方法

  • **alert -**这个方法用来显示一个警报框,其中包含一些信息和一个OK按钮。
  • **confirm -**这个方法用来显示一个对话框,其中包含一些信息,一个确定和一个取消按钮。
  • **atob -**该方法用于解码一个使用Base64编码的数据字符串。
  • **btoa -**该方法用于对一个使用base-64编码的数据字符串进行编码。
  • **blur -**该方法用于移除当前窗口的焦点。
  • focus - 该方法用于设置当前窗口的焦点。
  • **clearInterval -**该方法用于取消由set setInterval()设置的定时器。
  • **clearTimeout -**这个方法用来取消由setTimeout()设置的定时器。
  • **open -**这个方法用来打开新的浏览器窗口。
  • **close -**该方法用于关闭当前窗口。
  • **getComputedStyle -**这个方法用来获取一个元素当前应用的CSS样式。
  • getSelection - 这个方法用来获取Selection对象,该对象指定了用户选择的文本,像一个范围。
  • **matchMedia -**这个方法用来获得MediaQueryList对象,它指定了一些方法和属性,其中最常用的是matches属性。
  • **moveBy -**该方法用于移动窗口相对于当前位置的位置。
  • **moveTo -**该方法用于将窗口移动到特定的位置。
  • **print -**该方法用于打印当前窗口的内容。
  • **prompt -**这个方法用来给用户输入的提示。
  • **requestAnimationFrame -**这个方法用来请求浏览器进行动画更新,以便在下次重绘之前调用一个函数。
  • **resizeTo -**这个方法用来调整一个窗口的大小到给定的宽度和高度。
  • **resizeBy -**这个方法用来调整一个窗口的大小到给定的像素。
  • **scrollTo -**该方法用于将文档滚动到给定的坐标。这是被废弃的roll()方法的替代方法。
  • **scrollBy -**这个方法用来将文档滚动到给定的像素数。
  • **setTimeout -**该方法用于在给定的毫秒数之后评估一个表达式或调用一个函数。
  • **setInterval -**这个方法用来评估一个表达式或调用一个函数或在给定的间隔时间内(以毫秒为单位)。
  • **stop -**这个方法用来停止窗口的加载。

例子

jQuery窗口对象使用属性和方法的例子。接下来,我们编写HTML代码,通过下面的例子更清楚地了解jQuery窗口对象,我们使用窗口对象的属性和方法,如下所示

代码。

<!doctype html> <html lang = "en"> <head> <meta charset="utf-8"> <title> This is an example for jQuery window object </title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> </head> <script> var nwindow; function fun_open() { nwindow = window.open("", "newWindow", "width=500, height=500"); nwindow.document.write("<h3>This is a new window.</h3>"); } function property_apply() { if (!nwindow) { document.getElementById("text").innerHTML = "Not opened 'newWindow'."; } else { if (nwindow.closed) { document.getElementById("text").innerHTML = "Closed 'newWindow'."; } else { document.getElementById("text").innerHTML = " Not closed 'newWindow'.."; } } } function get_parent_window() { nwindow.opener.document.write("<p>This is the window which create the new window.</p>"); } function fun_close() { if (nwindow) { nwindow.close(); } } </script> </head> <body> <p> Example for the jQuery window properties and methods</p> <ul> <li> <button onclick="fun_open()">Call function to create window</button></li> <br><br> <li><button onclick="property_apply()"> Call function to check wethere window open or close</button></li> <br><br> <div id="text"></div> <br><br> <li><button onclick="fun_close">Call function to close window</button></li> <br><br> <li> <button onclick="get_parent_window()">Call function to get parent window</button></li> <br><br> </body> </html>

输出。

Output

一旦我们点击 "Call function to create window "按钮,输出结果是。

jQuery window 2

一旦我们点击 "调用函数关闭窗口 "按钮,新创建的窗口就会关闭。

jQuery window 3

接下来,当我们点击 "调用函数检查窗口是否打开或关闭 "按钮时,输出结果是----。

jQuery window 4

接下来,当我们点击 "调用函数获取父窗口 "按钮时,打开了一个新的窗口,显示为-。

5

上面的程序它演示了一些窗口属性和方法的使用。如上面的代码,它使用了document和opener属性以及open(), close()函数。

总结

jQuery窗口对象是一个浏览器对象,它是由浏览器自动创建的。

推荐文章

这是一个关于jQuery窗口的指南。这里我们讨论了描述,属性,方法,例子和代码实现。你也可以看看下面的文章来了解更多----。

  1. jQuery承诺
  2. jQuery zindex
  3. jQuery when
  4. jQuery off