零碎
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，就可以解决这个问题了
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
