遍历对象
语法: for(var key in obj){ // 循环体}
obj —> 要遍历的对象
for(var key in obj){ // key --> 变量 console.log(key); // 键值对中的键 console.log(obj[key]); // 对象变量名[key]: 对应键的值 if(key == 'name'){ alert(obj[key]); } // 对象的取值: 对象变量名.key 对象变量名['key'] 对象变量名[变量] }结构
1. 初始化变量: var i = 0;
while(2 循环结束的条件){
3 循环体;
4 变量更新;
}
执行顺序: 12342342
for和while区别： for循环能做的while都能做, while能做的for也可以;
for: 循环次数已知
while: 循环次数未知
var sum = 0; var i = 1; while(i < 101){ sum += i; i++; } console.log(sum); var arr = []; // 循环给数组中添加数据 arr.push(要添加的数据); for(var i = 0; i <= 20; i++){ if(i % 5 == 0 ){ arr.push(i); } } // 如果数组长度到了20, 停止循环 var i = 0; while(arr.length <= 20){ if(i % 5 == 0 ){ arr.push(i); } i++; } console.log(arr);结构：
1. 初始化变量;
do{
2. 循环体;
3. 变量更新;
}while(4. 循环结束的条件);
执行顺序: 1234234234
var i = 0; do{ console.log(i); i++; } while( i < 5); while与do while的区别：第一次执行判断条件就不符合的时候, while循环一次都不会执行, do while会先执行一次 var i = 10; // i < 10的时候输出i while(i < 10){ console.log(i); i++; } do{ console.log(i); i++; }while(i < 10);break: 防止穿透; 退出整个循环, 终止循环
continue: 退出本次循环, 下一次循环还要继续执行, 单次排除情况
for(var i = 0; i < 10; i++){ if(i == 5){ // break; // 结束整个循环 continue; // 结束本次循环 } console.log(i); }this存在于全页面, 在不同的地方有不同的含义; 虽然body属于html中的，但是window是祖宗, 直接在全页面中能直接使用的方法，都属于window, 把window省略掉
普通函数中: this —> window
事件函数中: this指向触发源(事件绑定对象)—> 点谁就是谁
// 点击每个li让他背景色改变, 变成红色 // 1. 获取元素 var lis = document.getElementsByTagName('li'); // 2. 添加事件：每一个li添加一个点击事件 for(var i = 0; i < lis.length; i++){ // 执行非常快, i最后保持成循环结束的条件 console.log(lis[i]); lis[i].onclick = function(){ console.log(i); // 点击事件中得不到正确的i console.log(this); // li // 3. 做具体的事情 this.style.background = 'red'; } } // 普通函数 function sum(){ console.log(this); // window } sum();自定义属性: 自己定义的写给标签的属性
属性: 写在标签上的不是标签名的, src, value, className, id, style…
获取： 元素.属性名
设置： 元素.属性名 = 值;
注意:
拿不到写在标签上的自定义的属性的值 <div class="box" tag="1"></div> console.log(div.tag); // undefined 设置的自定义属性在标签上看不到, 但是可以正常获取到通过js设置的自定义属性 div.flag = 1; console.log(div.flag); // 1概念: 函数是由事件驱动的或者当他被调用时可以重复执行的代码块
作用: 用来保存代码, 在需要的时候调用
声明方式
函数声明: function 函数名(){ // 代码块 } getTip(); function getTip(){ console.log('学的是函数'); } 表达式声明: var 变量名 = function (){ // 代码块} var getNewTip = function(){ console.log('这是新的提示'); } getNewTip(); 区别: 函数声明的方式，调用可以在函数之前也可以在函数之后, 表达式声明的方式, 调用只能在函数之后 函数使用: 1. 声明 2. 调用: 函数名();存储重复性的代码
创建一个空函数
放入重复代码
将函数调用放在原代码处, 验证是否可用
<body> <div class="box"> <div class="main"> <div class="center"> <div class="left"> <</div> <img src="./img/1.jpg" alt=""> <div class="right">></div> </div> </div> </div> <script> // 点击右箭头 1 - 2 - 3 - 4 - 1 // 点击左箭头 4 - 3 - 2 - 1 - 4 // 1. 获取 var leftBtn = document.getElementsByClassName('left')[0]; var rightBtn = document.getElementsByClassName('right')[0]; var img = document.getElementsByTagName('img')[0]; var n = 1; // console.log(leftBtn, rightBtn, img); // 右箭头点击切换图片 rightBtn.onclick = function () { // 3. 具体的代码 n++; imgTab(); } leftBtn.onclick = function () { // 3. 具体的代码 n--; imgTab(); } // 重复代码封装 // 1. 创建一个空函数 // 2. 放入重复代码 // 3. 将函数调用放在原代码处, 验证是否可用 // 判断图片是否赋值 function imgTab() { if (n < 1) { n = 4; } if (n > 4) { n = 1; } img.src = './img/' + n + '.jpg'; } </script> </body>什么时候用参数:函数中出现了不确定的值, 就用参数
分类
形参: 形式参数, 用来占位的, 函数声明时, 函数名后面的()里, 形参接收实参传递过来的值, a,b就是形参
实参: 实际的参数, 函数调用时, 函数名后面的()里,sum(1, 101), 1\101就是实参
arguments: 每一函数中都存在arguments, 是实参的集合, 类数组
// 1-100的和 50-80 100-1000 function sum(a, b){ // a--起始值 b----结束值 console.log(a, b); var s = 0; for(var i = a; i < b; i++){ s += i; } console.log(s); } sum(1, 101); sum(50, 81); function sum(){ // 实际参数的长度不确定 // arguments: 每一函数中都存在arguments, 是实参的集合, 类数组 console.log(arguments); var s = 0; for(var i = 0; i < arguments.length; i++){ // console.log(arguments[i]); s += arguments[i]; } console.log(s); } sum(10,20,30,40); sum(1,2); sum(5); sum(1000000, 10000000);形参和arguments: 是同一个东西, 形参和实参要一一对应, arguments存储所有的实参,是一个集合
函数的参数类型: js中所有的数据类型, null与undefined 没有实际意义，所以一般情况下不用做参数
function getData(a){ // a---形参 console.log(a); } getData(10); // 10 ---- 实参 var str = 'a1234567'; getData(str); // 写一个函数, 得到字符串的第一个字符 var str1 = '今天是高兴的一天呀'; getFirst(str1); var nu = 'mnbvfghklqywuie'; getFirst(nu); // 1. 空函数 // 2. 重复代码放入 // 3. 在原来代码位置上调用调试 // 4. 抽取形参 // 5. 传参再次调用 function getFirst(a){ // a--->传入的字符 console.log(a.charAt(0)); } var bo = false; function hasWork(a){ if(a){ console.log('原来真的有作业'); } else { console.log('原来还是有作业的'); } } hasWork(bo); // null与undefined 没有实际意义，所以一般情况下不用做参数 getData(null); getData(undefined); hasWork(null); // object var obj = { 'name': '彭于晏', 'money': function(){ console.log('挣钱'); } }; getData(obj); // arr var arr = [10, 'true', true]; getData(arr); // function function b(){ alert(1); } function c(){ alert(2); } // getData(b); function getFun(a) { //a=b||a=c||a=函数名 console.log(a); a(); //用a调用 传过来的实参函数 --用形参名调用 // b();不用 } getFun(b); //实参为一个函数 getFun(c);函数名和函数名重复时, 后面的会覆盖前面
函数名和变量名重复时, 变量会覆盖函数
形参个数多余实参个数时, 多余的形参会赋值为undefined
形参个数小于实参个数时, 多余的实参没法通过形参来获取, 实参可以通过arguments来获取
function fun(a, b){ console.log(a, b); } fun(10, 20); //10 20 fun(10); //10 undefined ---->形参个数多余实参时,多余的形参会赋值为undefined fun(10, 20, 30); //多余实参可以通过arguments来获取--Arguments(3) [10, 20, 30, callee: ƒ, Symbol(Symbol.iterator): ƒ] // console.log(arguments[2]);获取多余的实参函数和变量可以被读写的区域(函数和变量的有效作用范围)
区域, 指变量或者函数作用范围
作用: 读、写
作用域表示变量或者函数他们可以再什么样的上下文中去执行
作用域的划分由function(函数)划分出来的
js作用域：
局部作用域: function (){ // 局部作用域 }
全局作用域: 在script双标签里
局部变量\函数: 在局部作用域中声明的函数或变量只在局部作用域中去起作用, 出了{}就会被销毁
全局变量\函数: 在全页面中(函数外面声明的变量或者是函数)的任何位置去读写
作用域链: js中的一种查找机制;先查找自身所在的局部作用域, 找不到的时候, 往外一层作用域去查找,直到去全局作用域中去查找, 再找不到返回is not defined; 如果在任何一个层级找到，那就结束查找。
var m = 20; function a(){ m = 10; function c(){ console.log(m); } c(); } a(); console.log(m);找: 找var和function, 用var声明的变量, 只声明不赋值(变量存储的就是undefined), 用function声明的函数, 将整个函数直接存在内存中
逐行解析: 从上到下一行行的解析代码
变量只有在逐行解析中遇到+\-\*\/\++\--\=等操作之后才会去改变变量的值, 函数遇到调用的时候再去执行 console.log(a); var a = 10; b(); function b() { a = 20;//没有var ,是全局变量 console.log(a); } console.log(a); // --------解析步骤-------- var a; function b() { a = 20; console.log(a); } console.log(a); // 找距离当前代码最近的变量 a ,声明未赋值;undefined a = 10; b(); // a = 20; console.log(a); 20 console.log(a); // 20每个函数在调用以后本身就有一个返回值;
如果没有指定返回值, 返回undefined;
如果要设置返回值, 用return来设置;
作用: 可以将函数内部变量或函数在函数外面也可以使用;
语法: return 值;注意:
return 一次只能返回一个值, 写了多个也只返回第一个;
return 结束函数的执行; 函数中只要遇到return, 函数就会直接结束, 后面代码都不执行;
return 一次性返回多个值, 只会返回最后一个
只能获取到行内：元素.style.属性名 — 得到对应的样式
获取非行间样式:
标准: getComputedStyle(要获取的元素).属性名
ie678: 要获取的元素.currentStyle.属性名
var w = getStyle(div, 'width'); //字符不加''就是变量，属性名都是字符串 console.log(w); // 获取非行间样式的封装 function getStyle(elem, attr) { //形参一定意义上属于变量不能用.方式获取用[] // elem: element, 元素 // attr: attribute, 属性 if (window.getComputedStyle) { // 标准浏览器 return window.getComputedStyle(elem)[attr]; } else { // ie678 return elem.currentStyle[attr]; } }定时器: 定时或者是延时去执行一些代码
用途: 广告\咨询\轮播图\倒计时
注意: 定时器一旦开启，不会自动关闭, 需要手动清除定时器
定时器开启之后, 会返回唯一标识
清除定时器:
延迟定时器: clearTimeout(timerId); timerId----定时器的唯一标识
间隔定时器: clearInterval(timerId); timerId----定时器的唯一标识
// 打开页面2秒之后，弹出1 var t1 = setTimeout(function(){ alert(1); }, 2000); clearTimeout(t1); //每隔1s打印1 var t = setInterval(function(){ console.log(1); clearInterval(t); }, 1000); console.log(t, 'asd------'); 定时器传参: setTimeout(函数, 时间, 参数1, 参数2, …, 参数n); setInterval(函数, 时间, 参数1, 参数2, …, 参数n); function sum(a, b){ console.log(a, b); console.log(a + b); } // sum(10, 20); // 定时器: setTimeout(函数, 时间, 参数1, 参数2, ...., 参数n); setTimeout(sum, 2000, 30, 40);