前端随心记---------Javascript系列(第八节.BOM)

BOM: browser object model 浏览器对象模型

window 对象的子对象,也是属性

window document:浏览器是代表html的文档对象.
history
location: url对象
screen
navigator

window对象的常见属性和方法:

三个弹出框(内置方法,特点: 都会阻塞浏览器代码执行);
alert( ); 弹出框
confirm( ); 确认框
prompt( ); 输入框

两个定时器;
setInterval( );
setTimeout( );

一个弹窗方法; (window.+)
open("路径","_blank","弹出窗口外观");外观:width height left top
返回值:弹出的子窗口
特点:子窗口和父窗口可以交互操作;
opener:根据子窗口查找父窗口.
close( ):   关闭窗口 focus( )获取焦点;
closed( ):   判断某个窗口是否被关闭,关闭返回true,否则返回false.
window.onscroll   滚动条事件
window.onunload
window.onresize   窗口重置

属性:所有的自定义全局变量都是window对象的属性
方法:所有的自定义全局变量函数都是window对象的方法
全局属性和方法都可以省略window,直接使用即可.

 location:url对象 页面跳转
location.href: href:属性可读写 获取或设置当前页面的url
location.replace("rul"): 替换页面,破坏了前进后退
loacation.assign("url");
页面刷新
location.reload( ); 页面刷新
decodeURI( ) 解码
encodeURI( ) 转码

history对象
history.go(1) /forward( ); 前进
history.go(-1) /backe( ); 后退
history.go(0) 刷新

 document 文档对象
document.write( ); 通过事件触发后,输出的内容会将页面原内容覆盖.
document.querySelector("css的选择器"); 新增方法,低版本ie7不支持,根据选择器查找一个节点.始终得到选择器的第一个元素。class用点 id用#连接
注意:后代选择器
上一级>下一级标签
document.querySelectorAll("css的选择器"):根据选择器查找元素,返回一个节点集合.考虑兼容性ie7不支持。
document.getElmentById( id的名称 ). 通过元素 id 来查找元素
document.getElenmentsByTagName( 节点名称 ) 集合类型 通过标签名(li 等标签)来查找元素
document.getElementByName( name名 ) :操作表单元素.行内属性
document.getElementsByClassName( name名 ); 通过类名class来查找元素 ie8不兼容

 页面元素操作
操作属性 obj.属性
操作样式 obj.style.样式=值
obj.style.cssText=" ";
obj.className="类名" ;
操作内容
innerHTML; 内容中如果有标签,可以被浏览器解析
innerText; 设置纯文本( 火狐不支持,textContent)
outerHTML;
value;

原文地址:https://www.cnblogs.com/hudunyu/p/11684070.html

时间: 2024-10-31 16:50:58

前端随心记---------Javascript系列(第八节.BOM)的相关文章

前端随心记---------Javascript系列(第九节.DOM)

DOM document object model 对象: 属性 .事件 .方法节点: html : 是dom模型的根节点 所有的html标签都叫 元素节点 nodeType=1 所有的标签的属性叫做 属性节点 nodeType=2 所有的标签内容叫做 文本节点 nodeType=3 注:: 8表示的注释节点 9表示的根节点 一切都是节点 tagName 标签名称 nodeName 节点名称 nodeType 节点类型 nodeValue 节点对象的文本内容,是一个字符串. 节点关系 obj.o

前端随心记---------Javascript系列(第十一节.事件event)

事件对象(event) 事件 : 对某个元素的某种操作 事件对象: 当触发某个事件,产生的对象.就是事件对象,event使用的前提,必须有事件操作 var e=e || event ; 坐标属性:pageX /pageY 相对于文档顶部和左侧的坐标 ie8为undefined;clientX /clientY 相对于document窗口的顶部和左侧的坐标,如果出现滚动条,pageY=clienY+页面滚动的距离offsetX /offsetY 相对于操作的元素内部偏移量 var disx=e.o

前端随心记---------RPA系列(一)

RPA Robotic Process Automation 机器流程自动化 简而言之:就是虚拟劳动力 概念: RPA是智能化软件,可以理解为自动化机器人.只要预先设计好使用规则,RPA就可以模拟人工,进行复制.粘贴.点击.输入等行为,协助人类完成大量“规则较为固定.重复性较高.附加值较低”的事情. RPA产品形态: 当下的市场上存在三种RPA产品形态: 第一种是企业定制化的独立RPA软件,打开电脑点击即可使用: 第二种是应用于财会.金融等行业场景的平台化RPA产品,客户端包括图形化设计器.执行

前端随心记---------HTML5+CSS系列3.0

表单 u 表单的作用:用来收集用户的信息的; 表单框 : 表单 ?表单的作用:用来收集用户的信息的; 表单框 : <form name="表单名称" method="post/get" action="提交地址"> </form> <input type="text" value="默认值"/> 文本框 <input type="password"

前端随心记---------HTML5+CSS系列2.0

超链接的应用: 语法:    <a href="连接地址" title="提示信息" target=”属性值”> 链接文本/图片</a> 属性(名):target:页面打开方式 默认属性值:_self. I当前窗口 属性值:_blank 新窗口打开  <a href="#">空链接</a>  HTML标记的语法是 1.双标记: <标记(签)名称 属性1名="属性1值" 属性

前端随心记---------HTML5+CSS系列4.0

盒模型 一. 盒模型的概念和组成 盒子模型是CSS的基石,指定标签如何显示以及元素间相互关系:  页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间,这个盒子由内容(content).内边距(补白,填充,padding).边框(border)和外边界(margin)组成: 1) padding内填充 padding区域在border与content之间: 背景色和背景图像会覆盖padding和content组成的区域: padding的使用方法 padding,在设定页面中一个元素内容到元

前端随心记---------vuejs流行的UI框架

一:Element element ui框架的按钮组件,这款由饿了么前端开源的UI框架,一经面世,就收获大量程序员的芳心.在github 上更是高达29.8k的star早已说明一切.用于开发PC端的页面还是绰绰有余的.如果说你是用vue开发者,却没用过element UI,那你肯定不是合格的vue开发者. 文档地址:http://element-ui.cn 二:iview iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品.使用单文件的 Vue 组件化

前端随心记---------React简介(1)

React 简介: React 是一个用于构建用户界面的 JAVASCRIPT 库. React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. React诞生的原因 主要是当时市面上的这些框架都无法满足 facebook 公司的业务需求 (1. 数据量很大,数据不好管理

前端随心记---------深拷贝与浅拷贝

深拷贝与浅拷贝 在前端js里面的数据类型分为两大类: 1.基本数据类型(数据传递:值拷贝) var a = 12; var b = a; // 赋值操作,是把 a 地址里面对应的值赋值给了 变量b 所对应的地址空间. b = 24; a; // 不会受到影响 数据传递:值拷贝 2.复合数据类型(引用数据类型) var obj = {id: 1, username: 'andy', todos: ['吃饭', '睡觉']}; // 复合数据类型 var xiaoming = obj; // 复合数