javascript话术!

JAVA ZMAS 43℃ 0评论

## BOM: Browser Object Model 浏览器对象模型

概念: 浏览器将各个组件封装成javascript对象,实现javascript和浏览器的交互

* window : 封装了浏览器窗口的对象
创建:
浏览器内置的对象, 使用时直接使用 window

方法:
1.弹窗类的方法:
alert(msg); 指定弹出一段文本信息的警告框
confirm(msg); 弹出一段文本信息的确认框,包含 确认和取消两个按钮, 返回boolean值 点击确认返回true 点击取消返回false
prompt() : 弹出个带输入框的弹窗,返回值为输入的值

2. 打开关闭弹窗方法
open(url); 打开网址为url的窗口, 返回对应的新window对象
close(); 关闭窗口 哪个window调用它 它就关闭谁

3. 定时器类方法
var 定时器返回值 = setInterval(参数1,参数2) 按照指定的周期(以毫秒计)来调用函数或计算表达式。
参数1 : 要执行的方法 参数2: 间隔时间
clearInterval(定时器返回值 ) 取消由 setInterval() 设置的 timeout。

setTimeout() 在指定的毫秒数后调用函数或计算表达式。

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

属性:
Navigator 浏览器对象
Screen 屏幕对象
Location 地址栏对象
创建:
通过 window.location 来调用 location

属性:
href属性
方法:
reload() 刷新页面

History 历史记录对象
创建
通过 window.history 来调用 history

属性:
length 当前窗口有多少历史记录

方法:

back();
forward();
go(num); 参数: 参数为正数 代表往后去几页 为负数代表往前去几页

document 文档对象

特点:
window的所有方法 和 属性 在调用的时候可以省略window

## DOM: Document Object Model 文档对象模型
* 当html文档被浏览器解析时,会被封装成一个document对象, 我们可以使用document对象对文档的所有元素进行 CRUD 操作html文档

## W3C DOM:
核心DOM对象:
Document: 文档对象
创建:
window.document 或者 直接 document

方法:
查找:
document.getElementById(); 根据ID查询 html上的元素, 返回一个 Element对象
document.getElementsByTagName(); // 根据标签名称 查找html上的元素, 返回一个 Element数组
document.getElementsByClassName(); // 根据class的值,查找符合的元素, 返回一个Element数组
document.getElementsByName(); // 根据name属性的值,查找符合的元素, 返回一个Element数组

做题思路:
先考虑使用查找方法,找到你所要操作的元素
操作元素属性,需要查看HTML DOM文档查看它有哪些属性
在进行对应修改操作

创建:
document.createElement() 创建元素节点。 创建元素 参数:元素标签
document.createTextNode() 创建文本节点。
document.createAttribute() 创建一个属性节点
document.createComment() createComment() 方法可创建注释节点。
Element: 元素对象
元素对象.appendChild(子元素); 在元素末尾追加一个子元素
元素对象.removeChild(子元素); 删除指定的子元素
setAttribute(“属性名”,”属性值”) 可以设置任何属性
removeAttribute(“属性名”); 可以移除属性
属性:
element.innerHTML 可以获得或设置 元素的html内容
element.parentNode 返回元素的父节点
element.style 设置样式
element.className 设置class

Attribute : 属性对象
Text: 文本对象
Commont : 注释对象

XML DOM对象:

HTML DOM对象:
## Event 事件
概念: 某些组件上面发生了某些操作,触发了某些代码的执行

事件源:发生事件的组件 (如: 一个按钮 文本框 )

事件: 具体发生操作 (如:鼠标单击 双击 键盘按下 )

监听器: 要执行代码

注册监听: 把事件和事件源还有监听器,绑定到一起。

绑定事件(注册监听):

1. 在事件源上 定义 on事件名属性 ,这个属性=的值就时要执行的代码
如: <input type=”button” onclick=”alert(‘haha’);” >

2. 通过element元素的 on事件名 = 方法函数对象 绑定事件(注册监听):
如: document.getElementById(“btn_add”).onclick = 方法函数;

3. 通过element元素的addEventListener方法 绑定事件, 参数1: 事件名称 参数2: 要执行的函数对象
如: document.getElementById(“btn_add”).addEventListener(“click”,addTrInnerHtml);

注意: 2的兼容性要比3好一些,3在IE9以下无法使用。
3可以在听一个事件上注册多个方法

常用事件:
鼠标事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。

onmouseup 鼠标按键被松开。

键盘事件
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 加载完成事件

表单事件
onblur 元素失去焦点 可以用来做表单校验
onfocus 元素获得焦点
onchange 域的内容被改变。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onreset 重置按钮被点击。

转载请注明:ZMAS‘S blog » javascript话术!

喜欢 (1)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址