1.this

this在js中表示当前行为执行的主体

this在js中不是函数独有的，但是我们主要研究的是函数中的this

  • 在事件处理函数中（将函数当做值赋值给某个事件）this是当前触发的那个元素

  • 在函数外，this指向window

    在函数内，this指向调用者

    在事件函数内，this事件触发者

var oLis = document.getElementsByTagName("li");
​
for (var i = 0; i < oLis.length; i++) {
    // 给当前这个li绑定事件
    oLis[i].onclick = function () {
        console.log(this);//触发那个元素
        console.log(this.innerHTML);
    }
}

 

 

2.自定义属性

js中一切皆对象

元素天生自带很多属性 ， 原来没有的属性我们去增加就是自定义属性；

设置

  • 对象.属性 = 值；

获取

  • 对象.属性；

// 自定义属性的方式
// 点击当前这个li先变为蓝色 再次点击变为绿色 (依次类推)
var oLis = document.getElementsByTagName("li");
​
for(var i = 0;i<oLis.length;i++){
    // 自定义属性
    oLis[i].flag = true;
    oLis[i].onclick = function(){
        // 判断 (当前这个li上自定义属性的值)
        if(this.flag){//true
            this.style.backgroundColor = "blue";
            // 给自定义属性重新赋值
            this.flag =false;
        }else{
            this.style.backgroundColor = "green";
            // 给自定义属性重新赋值
            this.flag =true;
        }
    }
}
// 获取元素
var oLis = document.getElementsByTagName("li");
​
for(var i = 0;i<oLis.length;i++){
    // 自定义索引
    oLis[i].index = i;
    oLis[i].onclick =function(){
        console.dir(this);
        alert(this.index);
    }
}

 

 

练习

选项卡

// 获取元素
var tab = document.getElementById("tab"),
    oLis = tab.getElementsByTagName("li"),
    oDivs = tab.getElementsByTagName("div");
console.log(oLis, oDivs);
​
// 点击当前li，先让所有的li和div没有激活样式，然后再让当前这个li和对应的那个div有激活样式
​
// 绑定事件
for (var i = 0; i < oLis.length; i++) {
    // 自定义索引
    oLis[i].index = i;
    // 给当前那个li绑定事件
    oLis[i].onmouseover = function () {
        // 先让所有的li和div没有激活样式  将active类名清空
        for (var j = 0; j < oLis.length; j++) {
            oLis[j].className = "";
            oDivs[j].className = "";
        }
​
        // 然后再让当前这个(点击的那个)li和对应的那个div有激活样式
        console.log(this.index);
​
        this.className = "active";
        oDivs[this.index].className = "active";
    }
}

qq列表

// 获取元素
var list = document.getElementById("list"),
    oPs = list.getElementsByTagName("p"),
    oImgs = list.getElementsByTagName("img"),
    oUls = list.getElementsByTagName("ul");
console.log(oPs, oImgs, oUls);
​
// 绑定事件
for (var i = 0; i < oPs.length; i++) {
    // 给当前这个p标签绑定事件
    // 自定义属性
    oPs[i].flag = true; //默认收起  
    // 自定义索引
    oPs[i].index = i;
    // 绑定事件
    oPs[i].onclick = function () {
        console.dir(this);
        // 判断
        if (this.flag) { //展开
            // 让当前这个p标签对应的那个ul显示
            oUls[this.index].style.display = "block";
            // 修改自定义属性的值
            this.flag = false;
        } else {
            // 让当前这个p标签对应的那个ul隐藏
            oUls[this.index].style.display = "none";
            // 修改自定义属性的值
            this.flag = true;
        }
    }
}

 

 

3.函数的声明及调用

在js中函数就是具有特定功能的代码段，可以分为两部分 声明 + 调用

声明一个函数可以调用无数次（每次调用都是相互独立的）

函数名表示当前函数本身

//语法   function关键字声明  （实名函数->有名字的函数）：定义顺序与调用顺序无关
function 函数名(){
    函数体;
}
​
//语法2   表达式声明(将一个匿名函数赋值给某个变量) ：只能先定义，再调用**
var fn=function(){
    函数体;
};

 

4.函数的简单使用

// 求1-100的和
function sum(){
    var total = 0;
    for(var i = 1;i<101;i++){
        total+= i;
    }
    console.log(total);
}
​
sum();

 

5.函数的参数

当函数定义时，可以在函数的()位置声明参数

  • 形参 函数定义时的参数

  • 实参 函数调用时的参数

理论上函数可以有无限多个参数，多个参数之间使用逗号隔开

函数的参数可以是任意的数据类型，例如：string、number、boolean、对象类型、函数等....

function 函数名(形参1，形参2,...){
    函数体
}
​
函数名(实参1,实参2,...);

注意：若函数调用时，未传递实参，则形参的值为：undefined

6.函数的arguments

arguments是函数独有的 （实参的一个类数组集合）
// 求任意数字之和
function sum2() {
    var total = 0;
    // 将arguments集合中的每一项取出来相加
    for(var i = 0;i<arguments.length;i++){
        // console.log(arguments[i]);
        total += arguments[i];
    }
    console.log(total);
}
​
sum2(100, 200, 300, 10, 20, 30, 50);
sum2(100, 200, 300, 10, 20, 30, 50, 200, 300, 1000);
sum2(100, 200, 300);
sum2(100, 200);

 

arguments注意问题

形参与函数内定义的变量一样时，会导致此形参等于此变量

function test2(a, b) {
    // arguments这个集合 和  a,b是一一对应的 （一个改变另一个也改变）
    console.log(arguments);
    console.log(arguments[0]);
    // 修改实参的值
    // 利用arguments修改了实参的值 形参的值也就变了
    arguments[0] = "哈哈";
    console.log(a);
​
    var b = "你好啊"; //变量b将形参b的值覆盖了
    console.log(b); //你好啊    
    console.log(arguments[1]); //你好啊
}
​
test2(100, 200);

 

函数注意问题

  1. 函数的重复命名 ，后边的覆盖前边的

  2. 函数的参数个数

    • 实参个数等于形参个数 一一对应进行赋值

    • 实参个数小于形参个数 一一对应进行赋值，没有赋值的形参默认值是undefined

    • 实参个数大于形参个数 一一对应进行赋值，超出实参没影响（没有形参接收）

  3. 参数类型

    • 函数的实参可以任意数据类型

  4. 函数中的this （this表示当前行为执行的主体）

    1. 在事件处理函数中this是触发的那个元素

    2. 函数调用就看前边有没有点,没有点this就是window,有点点前面是谁就是谁

 

在全局作用域下定义的变量或方法都是window的属性或方法,window可以省略