变量
变量的特点-值是可变的,松散类型,同时定义多个,写入内存,前置访问undefined
var a = 5;
var b;
console.log(a, b, c)//5 undefined undefined
var c = 5;
console.log(d)//如果没有声明变量,会报错
数据类型
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
引用数据类型:对象(Object)、数组(Array)、函数(Function)
如何检测数据类型:typeof instanceof constructor toString(最好的)
常见运算符
复合的赋值运算符-- += %=
数学运算符:+ %
比较运算符:== (隐式转换, 值) === (没有隐式转换,值和类型) 面试
逻辑运算符:& || !–程序短路!结果一定是布尔值
一元运算符:++ –
显式转换和隐式转换
显示转换:强制转换,Number()/String()/Boolean()…
隐式转换:+ - * / % ++ – == !…
var str = '100';
console.log(typeof str);//string
console.log(typeof +str);//number
for循环
–常用
var a = [1, 2, 3, 4, 5, 6, 7, 8]
for (var i = 0; i < a.length; i++) {
console.log(i)//i是索引,也是下标
console.log(a[i])//取数组a的值
}
for…in
for…in是循环遍历索引
var a = [1, 2, 3, 4, 5, 6, 7, 8]
for (var b in a) {
console.log(b)
}
for…of
for…of是x’h遍历值
var a = [1, 2, 3, 4, 5, 6, 7, 8]
for (var b of a) {
console.log(b)
}
1.for循环中有一个break意思是跳出当前循环,一般用于判断条件
2.for循环-for循环的嵌套
3.循环的概念和意义–循环如果没有结束,不会出结果。
错误类型-debug一辈子的事情
断点调试 - 遍历里面使用断点调试进行代码执行顺序的查看。
函数
创建普通函数,函数表达式(自执行函数,事件处理函数)。
函数的参数和返回值
var fn = function () { } //函数表达式
function fn() { }//普通函数,声明式
!function () { }();//自执行函数,后面的分号不能省略。
(function () { })()//自执行函数
递归:
函数在执行过程中 嵌套自己
其使用时类似循环 也需要有临界值(函数在什么时候停止)
var i = 1; // 相当与循环的初始值
function fn(){
console.log("我是fn",i);
if(i>=100){ // 临界值
return "哈哈"; // 停止或跳出循环
}
i++; 循环
fn();
}
冒泡法
var b = [] // 定义空数组
for (var i = 0; i < 10; i++) { // 循环10次 就是随机取出10个数字
var a = Math.round(Math.random() * 100) // 随机100以内的数字
b[i] = a // 把随机数字放到b数组
}
console.log(b) // 页面打印
for (var n = 0; n < 10; n++) { // 循环10次
for (var j = 0; j < b.length - 1; j++) {
if (b[j] > b[j + 1]) { // 判断第一个数是不是大于第二数
var xm = b[j] // 定义一个变量把第一个数放到里面
b[j] = b[j + 1] // 在把第二个值赋给第一个
b[j + 1] = xm // 然后把定义xm值赋给第二个值 就是把b[ j ]和b[ j+1 ]交换值
}
}
}
console.log(b)
浏览器窗口的尺寸属性
这两个属性分别是用来获取浏览器窗口的宽度和高度(包含滚动条的)
console.log(window.innerHeight, window.innerWidth)
这两个属性分别是用来获取浏览器可视区的宽高(不包括滚动条)–重要
console.log(document.documentElement.clientWidth, document.documentElement.clientHeight)
浏览器事件
onload事件:页面内容加载完成(DOM结构,图片…)后触发
事件处理函数:将函数给事件。
等页面结构加载完成,执行函数里面的代码
有了这个事件,可以将js代码放在文档任意位置,因为我都是最后执行的。(等页面结构加载完成,包括结构里面的内容)
如果不使用此事件,可以将js代码写在body区域的最下面。
一个页面只能有一个这个事件,多个后面的覆盖前面。
onscroll事件: 拖动浏览器的滚动条触发此事件。
注意事件的触发频率。拖动时会触发多次。
onresize事件:浏览器窗口缩放所触发此事件。
滚动条
滚动条距离(某些浏览器下面做兼容–没有 DOCTYPE声明的时候)
document.documentElement.scrollTop 垂直滚动条,滚动条离顶部的距离
document.documentElement.scrollLeft 左边
定时器
setInterval(函数名称或者函数体,时间);间隔定时器(反复调用)
clearInterval( 定时器的返回值 ); 停止定时器
setTimeout(函数名称或者函数体,时间); 延时定时器,执行一次
clearTimeout( 定时器的返回值 ); 停止定时器,虽然延迟定时器是一次性的,也有需要关闭的情况
DOM元素获取
querySelector():获取一个, 通过选择器获取元素,如果获取多个只返回第一个。
querySelectorAll():获取多个, 通过选择器获取元素,可同时获取多个元素,类数组。
getElementsByClassName(): 获取相同类名的节点列表(IE8及以下不支持),返回类数组
getElementById(): 获取特定 ID 元素的节点–最优
getAttribute()获取特定元素节点属性的值,某些低版本浏览器不支持
setAttribute()设置特定元素节点属性的值,某些低版本浏览器不支持
removeAttribute()移除特定元素节点属性,某些低版本浏览器不支持
DOM属性-文本
innerHTML:读写元素节点里的内容,从节点的起始位置到终止位置的全部内容,包括内部的元素。
outerHTML:读写元素节点里的内容,除了包含innerHTML的全部内容外, 还包含元素节点本身。
innerText:读写某个元素节点的文本内容
DOM获取节点
childNodes:获取某一个节点下所有的子一级节点,包含空白节点(文本节点),类数组。
children :获取某一节点下所有的子一级 元素节点,不包含空白节点,类数组。
parentNode:获取某一个节点的 父节点
firstChild:获取某一节点下子一级的第一个节点,包含空白节点
firstElementChild:获取某一节点下子一级 第一个元素节点,不包含空白节点
nextSibling:获取某一个节点的下一个兄弟节点, 包含空白节点
nextElementSibling:获取某一个节点的 下一个元素节点, 不包含空白节点
attributes:获取某一个元素节点的所有属性节点
节点属性
节点:元素节点,属性节点,文本节点…
每一个节点又包含三个属性。
nodeType:获取节点的节点类型,用数字表示 1元素 2属性 3文本
nodeName:获取节点的节点名称
nodeValue: 获取节点的值
节点操作
创建元素-createElement(‘创建的标签名’)追加元素-appenChild()
insertBefore(新的节点, 存在的节点) 在box内,把新的节点节点插入到存在的节点的前面
removeChild(node) 删除box内部的子节点
cloneNode() 克隆obj节点,可以传一个布尔值为参数,如果参数为true,连同obj子元素一起克隆。
replaceChild(新添加的节点, 被替换的节点) 替换子节点
获取元素的非行间样式
getComputedStyle 和 currentStyle
这两个方法的作用是一样的,只不过一个在 非 IE 浏览器,一个在 IE 浏览器
兼容写法:
function getStyle(obj, attr) {//obj:元素对象,attr:css属性名
if (window.getComputedStyle) {//条件用属性做,不存在就是undefined,标准
return window.getComputedStyle(obj)[attr];
} else {//非标准
return obj.currentStyle[attr];//100px
}
}
console.log(getStyle(oBox, 'position'))
获取盒模型宽高
offsetWidth 和 offsetHeight 盒模块的宽高。没有单位。
事件类型
onkeydown 键盘的如何健都可以触发这个事件 (要加e)
***********keyCode 输出按键对应得数字编码。
***********which属性,获取按键对应得数字同时获取鼠标按键对应得值,新的属性,老版本的ie浏览器不支持。
***********表单
onfocus 当页面或者元素获得焦点时在 window 及相关元素上面触发。
onblur 当页面或元素失去焦点时在 window 及相关元素上触发。
onchange: 当文本框(input 或 textarea)内容改变且失去焦点后触发。
onsubmit: 当用户点击提交按钮在元素上触发。
onmousemove 鼠标在文档移动触发 (要加e)
onmousedown 鼠标点击
***********button属性:获取鼠标的键码–低版本浏览器有兼容问题。
***********which属性,获取按键对应得数字同时获取鼠标按键对应得值,新的属性,老版本的ie浏览器不支持。
onmouseover 鼠标移入事件
onmouseout 鼠标移出事件
鼠标按下(onmousedown)
鼠标松开(onmouseup)
获取鼠标坐标的属性
clientX clientY 原点位置,窗口可视区域左上角为原点
pageX pageY 原点位置,整个页面的左上角(带滚动高度)
screenX screenY 原点位置,整个屏幕的左上角
offsetX offsetY 获取当前操作的盒子离盒子左上角的距离
document.onclick = function (e) {
var e = e || window.event
console.log(e.clientX,e.clientY)
}
事件流
netscape-网景-事件捕获(从最不具体的元素到最具体的元素)
microsoft-微软-事件冒泡(从具体的元素到最不具体的元素)
事件冒泡
冒泡是一直存在的,如果你看不到,只是代表父级你没有添加对应得输出。
冒泡必须是事件类型相同。不相同直接跳过,继续上面存在的冒泡。
e.stopPropagation() 停止事件冒泡 最好的方法 标准
e.cancelBubble = true;//了解的 非标准
以上是我个人笔记,不是js全部