JavaScript로 일반적인 BOM 작업을 구성하고 요약합니다.
- WBOY앞으로
- 2022-06-01 11:43:512534검색
이 글은 javascript에 대한 관련 지식을 제공합니다. 주로 창 개체의 일반적인 이벤트, JavaScript 실행 메커니즘 등을 포함하여 BOM 작업과 관련된 문제를 소개합니다. 모두에게 도움이 되기를 바랍니다.
【관련 권장사항: javascript 비디오 튜토리얼, web front-end】
윈도우 객체의 일반적인 이벤트
-
윈도우 로딩 이벤트:
- window.onload: 페이지 로딩 이벤트, 언제 문서 내용이 완료되었습니다. 로드가 완료되면 호출되는 핸들러 함수가 이벤트(이미지, 스크립트 파일, CSS 파일 등 포함)를 트리거합니다.
- document.addEventListener('DOMContentLoaded', function(){}): DOM 로딩이 완료된 경우에만, 스타일 시트, 그림, 플래시, 호환성은 제외
-
창 크기 조정 이벤트:
- 창. onresize: 창 크기 조정 로딩 이벤트
-
window.open() 메소드는 지정된 URL로 이동하거나 새 브라우저 창을 여는 데 사용할 수 있습니다.
- 이 메소드는 4개의 매개변수를 받습니다: 로드됨 URL, 대상 창, 속성 문자열 및 새 창이 브라우저 기록에 현재 로드된 페이지를 대체하는지 여부를 나타내는 부울 값
window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");
-
Timer:
- setInterval(handler: any, timeout?: long , 인수 …: 임의): 순환 호출
- clearInterval(handle?: long): 취소 setInterval
- setTimeout(handler: any, timeout?: long, 인수…: 임의): 일회성
- clearTimeout(handle?: long ) : setTimeout 취소
window.scroll(x, y)
window.scrollTo(x, y): 둘은 가로 및 세로 스크롤 막대의 위치를 변경하는 데 동일한 사용법입니다. 페이지에 스크롤바가 있습니다
window.scrollBy(x, y) : 스크롤바의 누적 스크롤, 양수는 아래로, 음수는 위로 window.scrollBy(0, 10) : 호출될 때 100밀리초마다 스크롤 막대가 10픽셀씩 이동합니다.
window.getCompulatedStyle(elem, pseudo class)
-
Dialog
- alert
- alert("프롬프트 문자열")
- 이 팝업되어 경고 상자를 표시합니다. 경고 상자의 프롬프트 문자열 텍스트
- confirm
- confirm("prompt string")
- 확인 상자를 표시하고 확인 상자에 프롬프트 문자열을 표시합니다
- 사용자가 "확인" 버튼을 클릭하면 true를 반환하고 "취소"를 클릭합니다. "false를 반환합니다.
- prompt
- prompt("프롬프트 문자열","기본값")
- 입력 상자 표시, 입력 상자에 프롬프트 문자열 표시, 사용자 입력 대기
- 사용자가 "확인" 버튼을 클릭하면 사용자 입력이 반환되고 "취소"를 클릭하면 null 값이 반환됩니다.
- alert
JavaScript 실행 메커니즘
js 스크립트를 실행하고 js 코드를 동기 실행의 실행 스택에 넣습니다. 모드 및 실행 스택 중에 비동기적으로 JS가 발생합니다. 코드(이벤트, 타이머, ajax, 리소스 로딩, 오류)는 웹 API(작업 대기열)에 저장됩니다. 실행 스택의 코드가 완료된 후 작업 대기열로 이동하여 가져옵니다. 실행 후 작업 대기열에서 하나를 가져와 실행하고 작업 대기열의 실행이 완료될 때까지 반복적으로 실행(이벤트 루프)합니다.
location object
window.history를 사용하여 가져옵니다. 현재 페이지의 주소 URL을 입력하고 브라우저를 새 페이지로 리디렉션
http://www.itcast.cn:80/index.html?name=andy&age=1#link http：通信协议 www.itcast.cn：域名80：端口 index.html：路径?name=andy&age=1：参数 #link 片段：锚点、链接
개체 속성:
- href*: 전체 URL 가져오기 또는 설정
- host: 호스트 이름(도메인 이름) 반환
- 호스트 이름: 현재 URL의 호스트 이름을 설정하거나 반환합니다.
- post: 포트 번호 반환
- pathname: 경로 반환
- search*: 매개 변수 반환
- hash: 조각(# 뒤 내용) 반환
- protocol: 설정 또는 현재 URL의 프로토콜을 반환합니다.
객체 메서드:
- 할당: href와 마찬가지로 페이지 리디렉션(리디렉션 페이지라고도 함)으로 이동할 수 있습니다.
- replace: 기록이 기록되지 않으므로 현재 페이지를 교체합니다.
- reload: 페이지를 다시 로드합니다. 새로 고침 기능과 동일합니다.
navigator 개체
navigator: 브라우저 구성 정보를 캡슐화하는 개체
- cookieEnabled 当前浏览器是否开启了cookie
- cookie:在客户端的存储空间，且容量较小根据不同的浏览器有不同的大小，可以做到永久保存 密匙
- 缺点：特别容易泄露个人信息
- plugins 封装了浏览器安装的所有插件信息
- userAgent 浏览器的名称，内核 版本号 等一些列的字符
- onLine 电脑是否处于脱机状态 电脑联网了吗？
- platform 返回运行浏览器的操作系统平台
- appCodeName 返回浏览器的代码名
- appName 返回浏览器的名称
- appVersion 返回浏览器的平台和版本信息
history对象
window.history 对象包括浏览器的历史（url）集合
- 浏览器的后退功能：history.back()
- 浏览器的向前功能：history.forward()
- 进入历史中的某一个页面：history.go()
screen对象
window.screen 对象包含有关用户的信息
// screen:获得显示设备的分辨率大小 // 完整的分辨率:screen.widht/height // 如何鉴别客户端的种类 兼容所有的客户端 宽度 // 大屏 中屏 小屏 超小屏 // lg md sm xs // TV pc pad phone //宽 >= 1200 >=992 >= 768
- 可用屏幕宽度：screen.availWidth
- 可用屏幕高度：screen.availHeight
- 屏幕高度：screen.Height
- 屏幕宽度：screen.Width
- 屏幕的颜色的位数：colorDepth
元素偏移量offset系列
可以动态得到该元素的位置（偏移）、大小等
- 获取元素距离定位父元素的位置
- 获取元素自身大大小
- ps：返回的数值不带单位
offset系列常用属性：
- element.offseParent：返回作为该元素带有定位的父级元素，如果父级元素都没有定位则返回body
- element.offsetTop*：返回元素相对带有定位父元素上方的偏移
- element.offsetLeft*：返回元素相对带有定位父元素左方的偏移
- element.offsetWidth：返回自身包括padding、边框、内容的宽度，不带单位
- element.offsetHeight：返回自身包括padding、边框、内容的高度，不带单位
元素可视区client系列
动态获取元素的边框大小、元素大小等
常用属性：
- element.clientTop：元素上边框的大小
- element.clientLeft：元素左边框的大小
- element.clientWidth*：返回自身包括padding、内容区的宽度，不含边框，不带单位
- element.clientHeight*：返回自身包括padding、内容区的高度，不含边框，不带单位
元素滚动scroll系列
动态获取元素的大小、滚动距离
常用属性
- element.srcollTop*：返回被卷去的上侧距离，不带单位
- element.srcollLeft*：返回被卷去的左侧距离，不带单位
- element.srcollWidth：返回自身实际的宽度，不含边框，不带单位
- element.srcollHeight：返回自身实际的高度，不含边框，不带单位
滚动条在滚动的时候会触发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 标准模式
查看元素的几何尺寸 ES5新增了解
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}
}}
属性
状态栏
- defaultStatus 改变浏览器状态栏的默认显示
- status 临时改变浏览器状态的显示
窗口位置
- IE
- screenLeft는 창 왼쪽 위 모서리의 x 좌표를 선언합니다.
- screenTop은 창 왼쪽 위 모서리의 y 좌표를 선언합니다.
- document.body.screenLeft
- document.documentElement.screenLeft는 숫자를 선언합니다. 현재 문서가 오른쪽으로 스크롤된 픽셀 수
- document.body.screenTop
- document.documentElement.screenTop은 현재 문서가 오른쪽으로 스크롤한 픽셀 수를 선언합니다
- !IE
- screenX는 x 좌표를 선언합니다.
- screenY는 창의 왼쪽 상단 모서리의 y를 선언합니다. 좌표
- pageXOffset은 현재 문서가 오른쪽으로 스크롤한 픽셀 수를 선언합니다.
- pageYOffset은 현재 문서의 픽셀 수를 선언합니다. 오른쪽으로 스크롤했습니다
- FF
- innerHeight는 창의 문서 표시 영역 높이를 반환합니다.
- innerWidth는 창의 문서 표시 영역의 너비를 반환합니다. 표시 영역의 너비
- outerWidth 창의 외부 너비를 반환합니다
- outerHeight 창의 외부 높이를 반환합니다
기타 속성
- opener는 동일한 도메인 이름 아래의 교차 양식 간 통신을 실현할 수 있습니다. 한 양식에는 다른 양식 오프너가 포함되어야 합니다.
- closed는 현재 창이 다음과 같은 경우 true를 반환합니다. Closed
- name은 창의 이름을 설정하거나 반환합니다.
- self는 현재 창에 대한 참조를 반환합니다
[관련 권장 사항: javascript 비디오 튜토리얼, 웹 프론트 엔드]
위 내용은 JavaScript로 일반적인 BOM 작업을 구성하고 요약합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!