Cet article vous apporte des connaissances pertinentes sur javascript. Il présente principalement des problèmes liés aux opérations de nomenclature, y compris les événements courants des objets de fenêtre, les mécanismes d'exécution JavaScript, etc.
【Recommandations associées : Tutoriel vidéo javascript, front-end web】
Événement de chargement de fenêtre :
Evénements de redimensionnement de la fenêtre :
La méthode window.open() peut être utilisée pour naviguer vers l'URL spécifiée, ou peut être utilisée pour ouvrir une nouvelle fenêtre de navigateur
window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");Timer:
window.scroll(x, y)
window.scrollTo(x, y) : Les deux sont la même utilisation pour changer la position des barres de défilement horizontale et verticale, à condition qu'il y ait be La barre de défilement est sur la page
window.scrollBy(x, y) : Le défilement cumulé de la barre de défilement, les nombres positifs descendent, les nombres négatifs montent window.scrollBy(0, 10) : Lorsqu'il est appelé tous les 100 millisecondes, la barre de défilement Déplacer 10 pixels
window.getComputedStyle(elem, pseudo class)
Dialog
Exécutez le script js et placez le code js dans la pile d'exécution dans un mode d'exécution synchrone . JS asynchrone est rencontré lors de la pile d'exécution. Le code (événements, minuteries, ajax, chargement des ressources, erreur) est placé dans les API Web (file d'attente des tâches). Lorsque le code dans la pile d'exécution est terminé, accédez à la file d'attente des tâches pour le prendre. le premier pour l'exécution. Après l'exécution, allez dans La file d'attente des tâches en prend une et l'exécute, et l'exécute à plusieurs reprises (boucle d'événement) jusqu'à ce que l'exécution dans la file d'attente des tâches soit terminée
window.history est utilisé pour obtenir l'adresse URL de la page actuelle et redirige le navigateur vers une nouvelle page
http://www.itcast.cn:80/index.html?name=andy&age=1#link http：通信协议 www.itcast.cn：域名80：端口 index.html：路径?name=andy&age=1：参数 #link 片段：锚点、链接
Propriétés de l'objet :
Méthode Object :
navigator : un objet qui encapsule les informations de configuration du navigateur
window.history 对象包括浏览器的历史（url）集合
window.screen 对象包含有关用户的信息
// screen:获得显示设备的分辨率大小 // 完整的分辨率:screen.widht/height // 如何鉴别客户端的种类 兼容所有的客户端 宽度 // 大屏 中屏 小屏 超小屏 // lg md sm xs // TV pc pad phone //宽 >= 1200 >=992 >= 768
可以动态得到该元素的位置（偏移）、大小等
offset系列常用属性：
动态获取元素的边框大小、元素大小等
常用属性：
动态获取元素的大小、滚动距离
常用属性
滚动条在滚动的时候会触发onscroll事件
window.pageXOffset/pageYOffset IE8 及IE8以下不兼容 document.body/documentElement.scrollLeft/scrollTop兼容性比较混乱，用时取两个值相加，因为不可能存在两个值同时有值 封装兼容性方法，求滚动条滚轮滚动距离getScrollOffet()
/*
封装一个获取滚动条的滚动距离
返回：x:水平滚动条滚动的距离 y:垂直滚动条滚动的距离
*/function getScrollOffet(){
if(window.pageXOffset){
return {//对象的{}一定要在关键字后，否则系统会自动加上; 则返回值会是undefined
x : window.pageXOffset,
y : window.pageYOffset }
}else{//兼容IE8以及以下
return {
x : document.body.scrollLeft + document.documentElement.scrollLeft,
y : document.body.scrollTop + document.documentElement.scrollTop }
}}window.innerWidth/innerHeightIE8及IE8以下不兼容(注意：这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度) document.documentElement.clientWidth/clientHeight标准模式下，任意浏览器都兼容 document.body.clientWidth/clientHeight适用于怪异某事下的浏览器 封装兼容性方法，返回浏览器视口尺寸getViewportOffset()
/*封装返回浏览器视口尺寸
返回值：
w ：视口的宽度
h : 视口的高度
*/function getViewportOffset(){
if(window.innerWidth){
return {
w : window.innerWidth,
h : window.innerHeight }
}else{ //兼容IE8以及以下的浏览器
if(document.compatMode == 'BackCompat'){
//怪异渲染模式下
return {
w : document.body.clientWidth,
h : document.body.clientHeight }
}else{
// 标准模式
return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight }
}
}}console.log(document.compatMode);// BackCompat 怪异模式// CSS1Compat 标准模式domElement.getBoundingClientRect() 兼容性很好；返回一个对象，该对象中有left、top、right、bottom等属性，left、top代表元素左上角的X和Y坐标， right和bottom表示元素右下角的X和Y坐标height 和 width属性老版本IE未实现 返回的结果并不是’实时的’
// 获取元素在文档中的位置function getElementPosition(target){
// 支持 BoundingClientRect()方法
if(0 && target.getBoundingClientRect){
var pos = target.getBoundingClientRect();
return { // 涉及到滚动条有移动的情况下 加上滚动条的位置
x : pos.left + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft),
y : pos.top + Math.max(document.body.scrollTop, document.documentElement.scrollTop)
}
} else {
var pos = {
left : 0,
top : 0
}
var _elm = target;
while(target.offsetParent){
if(_elm == target){//首次累加left 和 top
pos.left += target.offsetLeft;
pos.top += target.offsetTop;
}else{
pos.left += target.offsetLeft + target.clientLeft;
pos.top += target.offsetTop + target.clientTop;
}
// target 重新赋值
target = target.offsetParent;
}
return { x : pos.left, y : pos.top}
}}状态栏
窗口位置
Autres propriétés
[Recommandations associées : tutoriel vidéo javascript, front-end web]
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
