JavaScript:
- 概念 :一门客户端脚本语言
- 运行在客户端浏览器中的,每一个浏览器都有一个JavaScript的解析引擎
- 脚本语言:不需要编译,直接就可以被浏览器解析执行了
- 功能:
- 可以用来增强用户和html页面的交互过程,用来控制html元素,让页面有一些动态效果,增强用户的体验
- JavaScrpit=ECMAScript+JavaScript(BOM+DOM);
- ECMAScript:客户端脚本语言的标准
- 基本语法:
- 与html结合方式
- 内部js:
- 定于
- 内部js:
- 与html结合方式
- 基本语法:
- DOM
- 概念:Document Object Model文档对象模型
- 将标记语言文档的各个组成部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作
- W3C DOM标准分为3个不同的部分:
- 核心DOM-针对任何结构化文档的标准模型
- Documnet:文档对象
- 创建:在html dom模型中可以使用window对象获取
- window.document
- document
- 方法:
- 获取Element对象
- getElenmetById():根据id属性获取元素对象,id值一般唯一
- getElenmetByTagName():根据元素名称获取元素对象们,返回值是一个数组
- getElenmetByClassName():根据ClassName():根据Class属性值获取元素对象们,返回值是一个数组
- getElenmetByName():根据name属性值获取元素对象们,返回值是一个数组
- 创建其他DOM对象
- 属性:
- 获取Element对象
- Element:元素对象
- 获取/创建:通过document来获取和创建
- 方法:
- removeAttribute():删除属性
- setAttribute():设置属性
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
- Node:节点对象,以上五个对象的父对象
- 特点:所有dom对象都可以被认为是一个节点
- 方法:
- CRUDdom树:
- appendChild():向节点列表的结尾添加一个新的子节点
- removeChild():删除(并返回当前节点的指定节点),由其父对象调用
- replaceChild():用新节点替换一个子节点
- 属性:
- parentNode:返回节点的父节点
- CRUDdom树:
- 创建:在html dom模型中可以使用window对象获取
- XML DOM:针对XML文档的标准模型
- HTML DOM:准对HTML文档的标准模型
- 标签体的设置和获取:innerHTML
- 使用html元素对象的属性
- 控制元素样式
- 使用元素的style属性来设置
<script> var div1 = document.getElementById("div1"); div1.onclick = function() { div1.style.color = "red"; div1.style.fontFamily = "微软雅黑"; div1.style.fontSize ="100px"; } </script>
- 使用className
<script> var div1 = document.getElementById("div1"); div1.onclick = function() { div1.className="d1"; } </script>
- 使用元素的style属性来设置
- 事件监听机制
- 概念:某些组件被执行了某些操作后,触发了某些代码的执行
- 事件:某些操作.如单击,双击,鼠标移动,键盘按下
- 事件源:组件,如按钮,文本输入框
- 监听器:代码
- 注册监听:将事件,事件源,监听器结合在一起,当事件源发生了某个事件,则触发执行某个监听器代码
- 常见事件:
- 点击事件:
- onclick当用户点击某个对象时调用的事件句柄。
- ondblclick当用户双击某个对象时调用的事件句柄。
- 焦点事件:表单校验
- onfocus元素获得焦点
- onblur元素失去焦点。
- 加载事件,window body
- onload一张页面或一幅图像完成加载
- 鼠标事件(定义方法时,定义一个形参,接受event对象,event对象的button属性可以获取鼠标按钮的键值)
- onmousedown鼠标按钮被按下
- onmousemove鼠标被移动。
- onmouseout鼠标从某元素移开。
- onmouseover鼠标移到某元素之上。
- onmouseup鼠标按键被松开。
- 键盘事件(定义方法时,定义一个形参,接受event对象,event对象的button属性可以获取鼠标按钮的键值)
- onkeydown某个键盘按键被按下。
- onkeypress某个键盘按键被按下并松开。
- onkeyup某个键盘按键被松开。
- 选择和改变:
- onselect文本被选中。
- onchange域的内容被改变。
- 表单事件
- onsubmit确认按钮被点击。
- 表单校验:判断表单是否提交
- return false;
- onreset重置按钮被点击。
- onsubmit确认按钮被点击。
- 点击事件:
- 概念:某些组件被执行了某些操作后,触发了某些代码的执行
- 概念:Document Object Model文档对象模型