自定义索引
<body>
<ul>
<li>这是第1个li标签</li>
<li>这是第2个li标签</li>
<li>这是第3个li标签</li>
<li>这是第4个li标签</li>
<li>这是第5个li标签</li>
<li>这是第6个li标签</li>
<li>这是第7个li标签</li>
<li>这是第8个li标签</li>
<li>这是第9个li标签</li>
<li>这是第10个li标签</li>
</ul>
<script>
/*
把下标存在自定义属性index中
*/
var oLi = document.getElementsByTagName("li");
// // 添加自定义属性
// oLi[0].index = 0;
// oLi[1].index = 1;
// oLi[2].index = 2;
// oLi[3].index = 3;
// oLi[4].index = 4;
// oLi[5].index = 5;
// oLi[6].index = 6;
// oLi[7].index = 7;
// oLi[8].index = 7;
// oLi[9].index = 9;
// for (var i = 0; i < oLi.length; i++) {
// oLi[i].index = i;
// }
for (var i = 0; i < oLi.length; i++) {
oLi[i].index = i;//自定义索引 就是自定义属性的一种
oLi[i].onclick = function () {
console.log(this.index)
}
}
</script>
</body>
3.函数
3.1基础概念
-
函数funtion:函数就是将具有独立功能的代码块 整合在一起并命名，什么时候需要什么时候调用
-
作用：可以提高代码的重复率
rightBtn.onclick = function(){ change() }
leftBtn.onclick = function() { chagne() }
dots.onclick = function() { change() }
//切换图片功能
function change(){
切换图片
}
-
使用场景
-
1.作为事件处理函数使用
1.作为事件处理函数使用 button.onclick = function(){ }-
2.==代码复用函数封装==
rightBtn.onclick = function(){ change() } leftBtn.onclick = function() { chagne() } dots.onclick = function() { change() } //切换图片功能 function change(){ 切换图片 }-
3.对象中的方法
var obj = { "name":"Zs", "skill":function(){ //对象中的函数不叫函数 叫方法 } } //使用 obj.skill() -
3.2函数声明及使用
-
普通声明
声明：funtion 函数名(){ 代码块 } 使用：函数名()//1.普通声明 function home() { //代码块 console.log("做作业"); console.log("打游戏"); console.log("睡觉"); console.log("看美女"); console.log("吃法"); } function home() { console.log(1); } // 使用 函数名() home(); home(); home(); -
表达式声明
声明：var 变量名 = function(){ 代码块 } 使用：变量名()// 2.表达式声明 var 变量名 = function(){ 代码块 } var home1 = function () { console.log("中午吃饭睡午觉"); } // 使用 变量名() home1(); home1(); home1(); home1();
3.3函数参数
-
什么时候使用参数
-
当函数中出现不确定的值的时候,传递不同的参数 实现不同的功能
-
-
参数
-
形参：function 函数名(形参1,形参2,.......){ 代码块 } 形参之间用逗号隔开
-
实参：函数名(实参1,实参2......)实参之间用逗号隔开 实参就是赋值给形参的值
-
-
参数个数问题
// 1.形参和实参个数一样 function fun1(a, b) {//a 和 b都是形参 var a; var b; a=10 b=20 console.log(a, b);// 10 20 } fun1(10, 20); // 2.形参比实参个数多 从左往右一一赋值 function fun2(a, b, c) {//var a=10 var b=20 var c console.log(a, b, c);// 10 20 undefined } fun2(10, 20); // 3.形参比实参个数少 从左往右一一赋值 多余的并不用管 function fun3(a, b, c) { console.log(a, b, c);// 10 20 30 } fun3(10, 20, 30, 40); // 4.参数个数不确定 arguments 参数的集合 arguments可以和形参一起使用 function fun4(a, b) { console.log(a);// 10 console.log(arguments);//集合 console.log(arguments[0]); console.log(arguments.length);// 2 3 4 var s = 0; for (var i = 0; i < arguments.length; i++) { s += arguments[i]; } console.log(s); } fun4(10, 20); fun4(10, 20, 30); fun4(10, 20, 30, 40); -
参数的数据类型
==所有的js数据类型都可以作为函数的参数 null和undefined不要作为参数 没有意义==
// 5.参数的类型
// 所有的js数据类型都可以作为函数的参数 null和undefined不要作为参数 没有意义
function auto(a) {
console.log(a);
}
auto("文字");
auto([1, 3, 4, 5]);
auto(true);
auto({ "name": "zs", "age": 123 });
auto(function () { });
-
==函数的注意事项==
-
重名会被覆盖 后面的会覆盖前面的
-
当形参和实参参数不一致的时候 未被赋值的形参是undefined
-
<script>
// 1.重名会被覆盖 后面的会覆盖前面的
function auto() {
console.log(1);
}
function auto() {
console.log(2);
}
auto();
// 2.当形参和实参参数不一致的时候
function fun1(a, b, c) {//形参var a var b var c a = 10 b=20
console.log(a, b, c);//10 20 undefined
}
fun1(10, 20);
</script>
3.4作用域
-
概念：变量或者函数的有效使用范围
-
分类：局部作用域 全局作用域
-
名词
-
全局变量/全局函数:在函数外面声明的变量/函数，可以在任意地方访问和修改，会一直存储在计算机的内存中，直到页面关闭
-
局部变量/局部函数：在函数里面声明的变量/函数，只有在函数内部可以使用，出了函数就会被销毁，不能使用
-
3.4.1全局变量/函数
-
全局变量/全局函数:在函数外面声明的变量/函数，可以在任意地方访问和修改，会一直存储在计算机的内存中，直到页面关闭
var a = 10;//a 全局变量
function fun1() {// fun1 全局函数
var b = 20;// b 局部变量
console.log(a);//10
console.log(b);// 20
function fun2() {
console.log("这是局部函数fun2");
};
fun2();
}
fun1();
console.log(a);//10
// console.log(b);//报错 b is not defined
3.4.2局部变量/函数
-
局部变量/局部函数：在函数里面声明的变量/函数，只有在函数内部可以使用，出了函数就会被销毁，不能使用
var a = 10;//a 全局变量
function fun1() {// fun1 全局函数
var b = 20;// b 局部变量
console.log(a);//10
console.log(b);// 20
function fun2() {
console.log("这是局部函数fun2");
};
fun2();
}
fun1();
console.log(a);//10
// console.log(b);//报错 b is not defined
==注意事项：==
-
注意1：只有函数{}内声明的都是局部 其他都是全局
-
注意2：声明变量没有var 这是一个全局变量
// 注意1：只有函数{}内声明的都是局部 其他都是全局
if (1) {
var n = 30;//全局
}
console.log(n);//30
//注意2：声明变量没有var 这是一个全局变量
function fun3() {
a = 100;
}
fun3();
console.log(a);
3.4.2作用域链
-
作用域链：js的一种查找机制，先找自身作用域范围内的，依次父级作用域查找，一直到全局(window),如果全局也不到，则是返回报错信息 xxx is not defined
var a = 100;// a 全局变量
function fun1() {//fun1 局部变量
var a = 20;// a 局部变量
console.log(a);//20
}
fun1();
var b = 100;
function fun2() {
b = 10;
function fun2() {
var b = 20;
}
console.log(b);//全局变量的b 10
console.log(c);// c is not defined
}
fun2();
-
练习
<script>
//练习题1：
var a = 10;//全局变量
function fun() {
var b = 20;//局部变量
console.log(a, b);//10 20
a = 30;//修改的是全局变量a
b = 40;//修改的是局部变量b
c = 50;//声明全局变量c
}
fun();
console.log(c);// 50
console.log(a);// 30
// console.log(b);// b is not defined
//练习题2：
var x = 0;//全局变量
var y = 10;
function fun2() {
var x = 20;//局部变量
console.log(x, y);// 20 10
x = 30;// 修改的是局部x
}
fun2();
console.log(x, y);// 0 10
// //练习3：
var n = 10;
var m = 100;//全局变量m
function fun3() {
var m = 20;//局部变量m
console.log(n, m);// 10 20
n = 40;//修改全局的n
}
fun3();
console.log(n, m);// 40 100
</script>
3.5预解析
-
浏览器在解析js代码的时候 遵循从上往下执行，中间会经历很多步骤 但是至少掌握朱两步
-
1.预解析(变量提升)
-
a:先找var关键字 提前声明变量（只看等号左边的，如果变量重名，只声明一次)
-
b:再找function，提前声明整个函数,如果函数重名，会多次声明
-
-
2.逐行执行
-
逐行执行的时候不会在看var,只看赋值 函数只看调用 不看声明
-
-
<script>
console.log(a);//undefined
var a = 10;
console.log(a);//10
//1.找var关键字
var a = 100;
var a = 10;
console.log(a);//10
// 2.找function
var a = 100;
function fun1() {
console.log("函数1");
}
function fun1() {
console.log("函数2")
}
fun1();//函数2
console.log(a);//100
// 3.普通函数和表达式函数有什么区别 普通函数可以提前调用 表达式函数不能提前调用
auto();
function auto() {
console.log("普通函数")
}
// b();//undefined();报错
var b = function () {
console.log('表达式函数')
}
// 4.只要是作用域(全局作用域和局部作用域) 就一定会有预解析
function fun2() {
console.log(a);//undefined
var a = 10;
}
fun2();
//预解析+作用域链
var x = 10;
function fun3() {
console.log(x);//undefined
var x = 20;
console.log(x);//20
}
fun3();
console.log(x);//10
//5.如果变量和函数重名 变量覆盖函数
var a = 10;
function a() {
console.log("函数1")
}
console.log(a);//10
a();// 10() a is not a function
</script>
351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
