JS-1

零碎

a 标签

// 正常情况下，href中放的是一个网址 <a href = "http://www.xxx.com"></a> // 写一个 javascript: 的意思就是提示我这里面不是网址而是js，你需要把它执行了 <a href = "javascript: alert('a');"></a> // 但是一般情况下并不会往这个 javascript:; 中放js代码，而是让它空着。原因有两个： // 1 在 a 标签中放 js 代码不好，后面说 // 2 不用 # 号而写 javascript:; 是因为 # 号点完了之后会跳上去，而 javascript:; 不会 <a href = "javascript:;"></a>

style 和 className

元素.style.属性 = xxx 是修改行间样式修改完行间样式之后再修改 className 是没有效果的

💡 一般情况下，通过js来修改样式的时候，需要统一，不然就都修改class样式，不然就都修改行间样式

在JS中想给一个按钮或者别的什么加事件的时候，至少有两种方法

1 var oBtn = document.getElementById('btn1'); function 名字 (){ ... } oBtn.onclick = 名字; 2 匿名函数 var oBtn = document.getElementById('btn1'); oBtn.onclick = function 名字 (){ ... }

window.onload 当页面加载完成的时候发生

所以在< script>标签中运行js代码时，有时需要等html加载完成后再运行js代码，不然会报错的

这种时候就需要将js代码写在 window.onload 中了

window.onload = function(){ var oBtn = document.getElementById('btn1'); function 名字 (){ ... } }

行为(JS)、结构(HTML)、样式(CSS)三者分离

这句话的意思通俗理解就是：

别家行内样式别加行间的JS事件

通过html加进去的自定义属性，浏览器是不认的，会报错 但是通过js加进去的属性，是可以的

alert('abc' + 12 + 5 + 'ef'); // 'abc12' + 5 + 'ef' // 'abd125' + 'ef' // 'abd125ef' alert('abc' + (12 + 5) + 'ef'); // 'abc' + 17 + 'ef' // 'abc17' + 'ef' // 'abc17ef'

innerHTML

设置标签中的html内容，可以直接是文字，也可以是带标签的内容如：< h1>xxx< /h1>，这样出来的效果就是h1的样式

JS

JS组成

ECMAScript 几乎没有兼容问题DOM：document object model 有些操作不兼容BOM：br obrowser object model 没有兼容问题（完全不兼容）

ECMAScript 解释器（翻译 ）

0/1 <—> 翻译 <—> 能懂的语言

DOM：document object model （文档对象模型）

赋予js操作html的能力。其实在js里面，就是document，用来创建元素/改变元素/删除元素等

BOM：br obrowser object model（浏览器对象模型）

赋予操作浏览器本身的能力。其实在js里面，就是window。用来弹个窗口啊什么的

undefined类型：

不然是真的没有定义不然是虽然定义了，但是没有给值（是空的）

NaN 和 NaN 不相等 要判断是不是NaN，可以用 isNaN(xxx);

变量作用域 & 闭包

变量作用域

全局变量局部变量

闭包

通俗点说就是：子函数可以使用父函数的局部变量

function aaa() { // 父函数 var a = 12; function bbb (){ // 子函数 alert(a); } bbb(); } aaa();

这时的alert可以弹出来12。这就是闭包

命名规范

类型前缀首字母大写

循环中

break 中断 执行到它之后，整个循环就都结束了

continue 继续 执行到它之后，跳过本次，执行后面的

真：true/非零数字/非空字符串/非空对象

假：false/数字零/空字符串/空对象/null/undefined

Json

是什么 // var a = 1; // var b = 2; // var c = 3; var Json = {a: 1, b: 2, c: 3}; Json.b++; // 3 Json 和 数组 var Json = {a: 1, b: 2, c: 3}; var arr = [1, 2, 3]; alert(Json.a); // 1 // 区别1：json下标是字符串，数组下标是数字 alert(Json[a]); // 1 alert(arr[0]); // 1 // 区别2：用循环的方法不同 alert(Json.length); // undefined alert(arr.length); // 3 // json循环 // 第一种 for(var i = 0; i < arr.length; i++){ alert('第' + i + '个元素为' + arr[i])； } // 第二种 for(var i in arr){ alert('第' + i + '个元素为' + arr[i])； } // 数组循环 for(var i in Json){ alert('第' + i + '个元素为' + Json[i])； }

函数

可变参（不定参）：arguments

是一个数组存着所有的参数 function sum(){ var result = 0; // 这块的这个arguments，就是外面调用sum时括号里面不定的所有参数，也就是一个数组 for(var i = 0; i < arguments.length; i++){ result += arguments[i]; } return result; } alert( sum(2,4,6,8) );

CSS函数

// 这块的css函数的用法和jQuery中的css用法很像 css(oDiv, 'width'); // 获取样式 css(oDiv, 'width', '200px'); // 设置样式 // 可以通过 arguments[脚标] 的方式来获取或设置数据 function css () { if(arguments.length === 2){ // 获取 return arguments[0].style[arguments[1]]; }else{ // 设置 return arguments[0].style[arguments[1] = arguments[2]]; } } // 但是 arguments[脚标] 这样的方式写起来看着很繁琐，所以这里可以换成参数 function css (obj, name, value) { if(arguments.length === 2){ // 获取 return obj.style[name]); }else{ // 设置 return obj.name = value; } }

取非行间样式

就是取非行间样式（< style>< /style>标签里面的样式）

currentStyle()，但是这个方法只兼容IE

getComputedStyle(a, b)，这个方法兼容Chrome、FF

参数a：需要获取哪个物体的样式参数b ：这个参数随便往里面写啥都行，比如说null/false/数字啊啥的，随便。 getComputedStyle(oDiv, null).width

那怎样在所有浏览器下面都兼容呢？？

可以在外部封装一个函数，用来判断是浏览器是否含有这个属性

// IE var oDiv = document.getElementById('div1'); alert( oDiv.currentStyle.width); // Chrome、FF getComputedStyle(oDiv, null).width // 都兼容呢？ // 封装函数 function getStyle(obj, name){ if(obj.currentStyle){ // IE return obj.currentStyle[name] }else{ // Chrome、FF return getComputedStyle(obj, false)[name]; } } window.onload = function(){ var oDiv = document.getElementById('div1'); // ⚠️ 但是这块取的样式必须是单一样式（如：backgroundColor / borderWidth），而不能是复合样式（background / border） alert(getStyle(oDiv, 'width')); }

数组

数组方法

1

push(a)：从尾部添加unshift(a)：从头部添加pop()：从尾部弹出shift()：从头部弹出

2 splice

先删除，后插入

splice(开始，长度，元素)

删除

splice(开始，长度)

插入

splice(开始，0，元素) var arr = [1, 2, 3, 4, 5, 6] // 删除：splice(起点，长度) arr.splice(2, 3) // 1,2,6 // 插入：splice(起点，长度，元素) // 从第2个开始，删除0个，插入a,b arr.splice(2, 0, 'a', 'b'); // 1,2,a,b,3,4,5,6 // 从第2个开始，删除2个，插入a,b arr.splice(2, 2, 'a', 'b'); // 1,2,a,b,5,6

3 排序、替换

排序

sort var arr = ['float', 'width', 'alpha', 'zoom']; arr.sort(); // alpha, float, width, zoom var arr = [3,344,12,88,54,99,73]; arr.sort(); console.log(arr.sort());

可以看到上面的这个结果并不是按照数字从小到大的顺序排列的。是因为sort()排序只认字符。那如何帮助它认数字呢？？

var arr = [3, 344, 12, 88, 54, 99, 73]; arr.sort(function (n1, n2) { if (n1 < n2) { // 这块并不一定是-1，只要是个负数就可以 return -1; } else if (n1 > n2) { // 这块并不一定是1，只要是个正数就可以 return 1; } else { return 0; } }); console.log(arr); var arr = [3, 344, 12, 88, 54, 99, 73]; arr.sort(function (n1, n2) { // 其实这块这样简写也可以，因为是负数/正数/0都是由n1和n2来决定的 return n1 - n2; }); console.log(arr);

转换类

(数组).concat(数组) 数组连接join(分隔符) 用分隔符，组合数组元素，生成字符串字符串split

demo

concat var a = [1, 2]; var b = [3, 4, 5]; a.concat(b); // 1,2,3,4,5 join var arr = [3, 4, 5]; arr.join('-'); // 3-4-5

定时器

function show() { console.log('a'); } var timer = null; var timer2 = null; // 每隔1000ms执行一次 timer = setInterval(show, 1000); // 1000ms后执行show timer2 = setTimeout(show, 1000); // 关闭定时器 clearInterval(timer); clearTimeout(timer2);

charAt()：取字符串的某一位，是兼容的

元素视图属性

* offsetWidth 水平方向 width + 左右padding + 左右border-width * offsetHeight 垂直方向 height + 上下padding + 上下border-width * * clientWidth 水平方向 width + 左右padding * clientHeight 垂直方向 height + 上下padding * * offsetTop 获取当前元素到 定位父节点 的top方向的距离 * offsetLeft 获取当前元素到 定位父节点 的left方向的距离 * * scrollWidth 元素内容真实的宽度，内容不超出盒子高度时为盒子的clientWidth * scrollHeight 元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight

overflow: hidden

溢出隐藏 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位清除浮动 一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0

因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应

解决外边距塌陷 父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷

因此，给父级元素添加overflow:hidden，就可以解决这个问题了