JavaScript
js能干什么？
- 数据验证
- ajax
- 动态的获取改变页面内容
- 增加页面动画效果
- 操作DOM
- cookie
- 添加事件
- ...
语法特点：基于对象和事件驱动的松散型的解释性语言
JavaScript组成部分
ECMA规范
数据类型 运算符 函数 流程控制 面向对象。
BOM浏览器对象模型（Browser Object Model）
DOM文档对象模型（document Object Model）
命名规范
- 严格区分大小写
- 驼峰命名法
- 首字母以$ _ 字母开头，不能用数字、
- 命名要有意义
- ;代表换行
声明变量会遇到的问题
- 如果没有声明，直接对变量赋值，变量是一个全局变量
- 如果在赋值之前调用，会返回undefined
- 如果没有声明，也没有赋值，会报错，代码不会继续执行
- 在代码的声明赋值之后再次赋值，会覆盖掉之前的值
- 在代码声明赋值之后再次声明同样的变量，会生成新的变量，覆盖掉之前的。
JavaScript数据类型
- 初始数据类型
- number
- null
- undefined
- string
- Boolean
- 引用数据类型
- object
typeof 操作符，是一个检测数据类型的一元运算符，并且返回的结果始终是一个字符串。
运算符
- 算数运算符
- — * / % var++ ++var --var var--
- 关系运算符
-
< = >= <= == === !=
-
- 赋值运算符
- += -= %= /= *= =
- 逻辑运算符
- && || ! 返回布尔值
- 一元运算符
- typeof
- +正号
- 负号
- delete
- new创建一个新对象
- ++ --
- 三元运算符
- var 变量名=表达式 ? 真值:假值;
- 特殊运算符
- ',' 用来一次声明多个变量
- （） 调用函数；增加运算优先级
流程控制
- 流程:就是代码执行的顺次
- 流程控制：通过规定的语句让代码按照一定的顺序去执行
- 顺序结构：按照从上到下，代码书写的顺序进行执行
- 选择结构（分支结构，条件结构）：通过一定的条件让代码按照特定的方式执行
- if...else
- 单路分支，多路分支，嵌套分支
- switch case分支
- break 条件满足后跳出并终止循环，如果后面有代码，会继续往下执行；
- continue 跳出并且终止当前的循环，如果下个值仍满足循环条件，则继续循环。
- default case分支条件都不满足时执行的代码；
- 循环结构：在指定的条件下重复的执行某一段代码
- for循环
- while（表达式）{循环体}先判断条件是否满足，才会执行循环
- do{}while() 会先执行一次，然后在判断是否满足；
函数
函数重载：根据同一个函数参数的类型或者数量不同，来实现不同的函数体。
函数作用域
指一段代码的作用范围
- 根据运行的环境来划分作用域
- 全局作用域
- 函数作用域
代码的运行环境
- 宿主环境
- 执行环境
- 全局环境
- 函数环境 局部环境
回调函数
把一个函数的指针作为另一个函数的参数，调用这个参数的时候，这个函数就是回调函数
闭包函数
在一个函数的内部再次声明一个函数，使其能够调用外部函数的变量和方法；在函数外部调用外部函数的时候，就形成了闭包
递归函数
在函数内部直接或者间接的调用自己
类名的添加删除
obj.classList.add('hot')添加hot类
obj.classList.remove('hot')删除hot类
obj.classList.toggle('hot')如果本来有hot类，会删除，如果没有会添加一个hot类
节点属性
box.style.cssText="width:200px;height:33px"
1.节点属性能用来干什么?
通过节点的属性，能够获取到每个节点之间的关系，并且可
以通过这种关系，准确快速的获取到相应节点的对象。
获得节点关系的属性
对象.parentNode 获得父节点的引用
对象.childNodes 获得子节点的集合
对象.firstChild 获得第一个子节点的引用
对象.lastChild 获得最后一个子节点的引用
对象.nextSibling 获得下一个兄弟节点的引用
对象.previousSibling 获得上一个兄弟节点的引用
会识别空格
2.通过节点属性我们能获得每个节点的详细信息(包
括节点类型、节点名字、节点值)
获得节点信息的属性
节点类型 节点名字 节点值
nodeType(数值) nodeName nodeValue
元素节点 1 标签名 null
属性节点 2 属性名 属性值
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null
节点的方法
一、创建节点
1. 创建元素节点
document.createElement("元素标签名")
2. 创建属性节点
A.对象.属性="属性值“ 标准属性
B. 对象.setAttribute(属性名,属性值)设置
对象.getAttribute(属性名) 获取
C. arrt=document.createAttribute(“属性名”);
arrt.nodeValue=“属性值”
obj.setAttributeNode(arrt);
-
创建文本节点
对象.innerHTML= '';
document.createTextNode("文本");
二、追加到页面当中
父对象.appendChild(追加的对象) 插入到最后
父对象.insertBefore(要插入的对象,之前的对象) 插入到某个对象之前
三、删除节点
父对象.removeChild(删除的对象)
如果确定要删除节点，最好也清空内存 对象=null;
、修改(替换)节点
父对象.replaceChild(新节点,被修改的节点);
四、复制节点
newobj=obj.cloneNode() 方法创建指定节点的副本。
父对象.appendChild(newobj)
该方法有一个参数（true 或 false）。如果设置为true,所
有的子节点也会克隆，否则只会克隆本节点。
五。克隆节点
var newbox=box.clone();
var newbox=box.cloneNode(true);
元素尺寸的属性
获得元素实际的高度和宽度(加上边框的宽度)
offsetWidth
, offsetHeight(数值类型)
获得浏览器窗口的高度和宽度
document.documentElement.clientHeightu
document.documentElement.clientWidth
obj.style 属性
getComputedStyle(obj,null).属性
offsetTop offsetLeft
返回元素相对于具有定属性的父元素的坐标(left top 值)
1.自身和父元素都没有定位属性
自身的外间距+父元素的内边距+父元素边框+父元素外边距
2.自身没有定位属性，父辈元素定位（爷元素）
自身外边距+父元素内边距+父元素边框+父元素的外边距
3.自身定位 父辈元素定位
自身外边距+自身left
获取具有滚动条元素的位置属性
scrollTop
scrollLeft
具有滚动条的元素在滚动的时候，他的内部元素超出该元
素顶部或是左边的距离。
document.body.scrollTop 谷歌
document.documentElement.scrollTop 火狐
JavaScript事件分类
补充事件:
onscroll
onresize
重点讲解事件:
onmousewheel 鼠标滚动;IE
addEventListener("DOMMouseScroll",scrollfun,false) W3C
mouseout 鼠标离开
mouseover 鼠标悬停
事件绑定
1.一般绑定事件
在脚本中绑定
直接在HTML元素绑定
2.同一个事件绑定多个事件处理程序
IE:
对象.attachEvent("事件(on)",move) 添加
对象. detachEvent("事件(on)","处理程序") 删除
FF:
对象.addEventListener("事件","处理程序",布尔值) 添加
对象.removeEventListener("事件","处理程序",布尔值) 删除
内容
obj.innerHTML
设置或者获取html元素的内容（识别标签对）
JavaScript事件分类
补充事件:
onscroll
onresize
重点讲解事件:
onmousewheel 鼠标滚动;IE
addEventListener("DOMMouseScroll",scrollfun,false) W3C
mouseout 鼠标离开
mouseover 鼠标悬停
事件对象的属性
1.关于鼠标事件
相对于浏览器位置的
clientX 当鼠标事件发生的时候，鼠标相对于浏览器X轴的位置
clientY 当鼠标事件发生的时候，鼠标相对于浏览器Y轴的位置
相对于屏幕位置的
screenX 当鼠标事件发生的时候，鼠标相对于屏幕X轴的位置
screenY 当鼠标事件发生的时候，鼠标相对于屏幕Y轴的位置
相对于事件源的位置
offsetX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置
offsetY 当鼠标事件发生的时候，鼠标相对于事件源Y轴的位置
滚轮事件
谷歌 上120 下-120
document。addEventListener('mousewheel',function(e){
e.wheelDelta
},false)
IE 上120 下-120
document.attachEvent('onmousewheel',funcrtion(e){
window.event.wheelDelta
})
火狐 上-3 下3
document.addEventListener('DOMMouseScroll',function(e){
e.detail
})
事件对象阻止浏览器默认行为
if (ev.preventDefault )
ev.preventDefault(); //阻止默认浏览器动作(W3C)
else
ev.returnValue = false;//IE中阻止函数器默认动作的方式
if(e.preventDefault){
// 阻止默认浏览器动作
e.preventDefault();
}else{
e.returnValue=false
}
事件对象的属性
关于鼠标移入移出的
mouseout mouseover
事件对象属性
事件对象.fromElement 鼠标从哪来 IE
事件对象.toElement 鼠标到哪去 IE
事件对象.relatedTarget FF
在mouseover事件中代表IE中的fromElement
在mouseout事件中代表IE中的toElement
键盘事件
keydown keyup keypress
键盘码 e.keyCode
a A(65) 回车(13) 空格(32) shift(16) Ctrl(17)
alt(18) 左上右下(37 38 39 40)
弹出键盘码
document.onkeydown=function(e){
alert(e.keyCode)
}
判断键盘码
document.onkeydown=function(e){
if(e.keyCode==16)
alert(true)
}
或者
document.onkeydown=function(e){
if(e.shiftKey)
alert(true)
}
altKey 判断alt键是否被按下 按下是true 反之是false 布尔值
ctrlKey
shiftKey
type 用来检测事件的类型 主要是用于多个事件通用一个事件处理程序
的时候
事件流
当页面元素触发事件的时候，该元素的容器以及整个页面都
会按照特定顺序响应该元素的触发事件，事件传播的顺序叫
做事件流程。
事件流的分类
1.冒泡型事件 (所有的浏览器都支持)
由明确的事件源到最不确定的事件源依次向上触发。
addEventListener(事件，处理函数，false)
on+事件类型
attachEvent(type,fn)------IE
2.捕获型事件 (IE不支持 w3c标准 火狐)
不明确的事件源到明确的事件源依次向下触发。
addEventListener(事件，处理函数，true)
var box=$('.box')[0];
var son=$('.son')[0];
var son1=$('.son1')[0];
son.addEventListener('click',function(e){
alert(1)
},false);
son1.addEventListener('click',function(e){
alert(2)
},false);
box.addEventListener('click',function(e){
alert(3)
},false);
或者
son.onclick=function(e){
e.stopPropagation();
alert(1)
}
box.onclick=function(e){
alert(2)
}
阻止事件流(事件对象)
IE: e.cancelBubble=true;
FF: e.stopPropagation();
获得目标事件源的对象(就是找出这是在哪个标签上发生的事件)
IE： e.srcElement
FF: e.target
事件委派（通过给父元素添加事件达到给子元素变换的作用）
节点
- box.children 所有的元素节点
- childElementCound 所有元素节点的个数
csstext
let box=$('.box')[0];
let aa=$('<div>')
aa.style.cssText="width:200px;height:200px;background:green";
注意书写规范；
我叫洱月，我愿意陪你到洱海风花雪月，你，看到我了吗？
码字不易，点个赞呗
网友评论