窗口对象与操作

窗口对象与操作window是浏览器的全局对象代表当前浏览器窗口。所有全局变量和函数都是window对象的属性和方法。获取窗口尺寸console.log(window.innerWidth);// 视口宽度console.log(window.innerHeight);// 视口高度console.log(window.outerWidth);// 窗口整体宽度console.log(window.outerHeight);// 窗口整体高度打开和关闭窗口window.open(./0321.html);// 打开新窗口window.close();// 关闭当前窗口DOM 操作切换类名改变样式document.querySelector(.btn).onclickfunction(){document.querySelector(.box).classList.toggle(bg);};创建和添加元素document.querySelector(.add).onclickfunction(){varnewItemdocument.createElement(div);newItem.classList.add(listitem);varnewParagraphdocument.createElement(p);newParagraph.innerText评论5;newItem.appendChild(newParagraph);document.querySelector(.list).appendChild(newItem);};删除元素document.querySelector(.del).onclickfunction(){varitemsdocument.querySelectorAll(.listitem);if(items.length0){items[items.length-1].remove();}};AJAX 请求原生 AJAX 请求示例varxhrnewXMLHttpRequest();xhr.open(GET,http://localhost:3000/list);xhr.send();xhr.onreadystatechangefunction(){if(xhr.readyState4xhr.status200){vardataJSON.parse(xhr.responseText);console.log(data);}};其他浏览器对象history管理浏览器历史记录location获取或修改地址栏信息navigator检测浏览器信息screen获取屏幕分辨率document操作页面文档变量作用域函数内使用var声明的变量具有函数作用域会存在变量提升现象varfunfunction(){console.log(a);// undefinedvaraworld;console.log(a);// worldconsole.log(window.a);// undefined除非全局有定义};fun();jQuery 简化操作使用 jQuery 可以简化 DOM 操作和事件绑定$(.btn).click(function(){$(.box).toggleClass(bg);});