22 this、自定义属性、自定义索引、网站换肤、函数、封装复用、函数的参数

22 this、自定义属性、自定义索引、网站换肤、函数、封装复用、函数的参数

this

从属关系

整个页面document来获取 document是父级 祖宗： window 页面中所有的内容都属于window

声明的变量、函数都是window的一个属性

window = {

abc: 1,

aaa: function(){

console.log(2);

}

}

如果函数、变量直接挂在window身上，一般会省略不写

console.log(this);
console.log(window); // 对象
alert(1);
window.alert(1);
console.log(1);
window.console.log(1);
​
var abc = 123;
console.log(abc);
console.log(window.abc); // 对象的属性值： 对象.属性名 对象['属性名']
​
function aaa(){
    console.log(2);
    console.log(this);
}
console.log(window);
aaa();
window.aaa();

概念

this: 指代词, 这个

this在全页面中都存在, 任何位置, 在不同的位置有不同的含义

要么存在于函数中 要么存在于函数外

this的指向

函数属于谁 this就指谁

函数外面: this表示谁: window

普通函数: window

点击事件: 触发源 点谁就是谁

function aaa(){
   console.log(2);
   console.log(this); // window
}
console.log(window);
aaa();
window.aaa();
​
var div = document.getElementsByTagName('div')[0];
div.onclick = function(){
    console.log(this); // div
}

this的使用场景

场景一

for循环里面嵌套的事件中, 得不到点击元素下标的时候, 得不到正确的元素, 用this来代替当前元素;

var lis = document.getElementsByTagName('li');
console.log(lis);
// 点击每一个li  具体的li元素
// lis[0].onclick = function(){}
// lis[1].onclick = function(){}
// lis[2].onclick = function(){}
// lis[3].onclick = function(){}
for(var i = 0; i < lis.length; i++){
    // console.log(i); // 下标
    // console.log(lis[i]); // 获取到每一个li
    lis[i].onclick = function(){
        console.log(lis, i); // 集合 9
        console.log(lis[i]); // undefined
        // 报错后后面代码不执行  调试写在前面
        // 通过下标i得不到正确的元素  通过this来替代当前元素
        // lis[i].style.background = 'red'; // Cannot read property 'style' of undefined
        this.style.background = 'red';
    }
}

场景二

for循环嵌套的事件中，this代表父元素，通过this获取其中的子元素;

// 获取元素: li  p
var lis = document.getElementsByTagName('li');
var ps = document.getElementsByTagName('p');
console.log(ps, lis);
// 划上每一个li
for(var i = 0; i < lis.length; i++){
    // 每一个li添加上划上事件
    lis[i].onmouseenter = function(){
        // 让li中的p标签显示来  this-->li
        // li p  父子关系  
        // 一一对应一个li中有一个p 下标相等
        // 为什么这么写不可以? for循环瞬间执行结束, i得值是5
        // ps[i].style.display = 'block';
​
        // 用this替代当前对象
        // console.log(this); // 父元素 li  通过父元素找到子元素
        var p = this.getElementsByTagName('p')[0];
        console.log(p);
        p.style.display = 'block';
    }
​
    // 每一个li添加上划下事件
    lis[i].onmouseleave = function(){
        // 让li中的p标签显示来  this-->li
        // li p  父子关系  
        // 一一对应一个li中有一个p 下标相等
        // 为什么这么写不可以? for循环瞬间执行结束, i得值是5
        // ps[i].style.display = 'block';
​
        // 用this替代当前对象
        // console.log(this); // 父元素 li  通过父元素找到子元素
        var p = this.getElementsByTagName('p')[0];
        console.log(p);
        p.style.display = 'none';
    }
}

自定义属性

概念

属性: 写在起始标签上的 除了标签名以外的都是属性

js规定好的关键字表示的属性---固有属性

自己命名并且赋值的属性 --- 自定义属性

注意

  1. 直接写在标签身上的自定义属性 点和[]方式获取不到值

  2. 通过点和[]方式设置的自定义属性在标签上看不到

  3. 虽然看不到 但是可以获取和设置

// 获取元素
var div = document.getElementsByTagName('div')[0];
console.log(div);
// 获取元素的属性： 元素.属性名  元素['属性名']
console.log(div.id);
console.log(div.tag); // undefined  直接写在标签身上的自定义属性 点和[]方式获取不到值
​
// 设置元素的属性: 元素.属性名 = '值'  元素['属性名']  = '值'
div.id = 'abc';
div.flag = true; // 通过点和[]方式设置的自定义属性在标签上看不到
​
console.log(div.flag); // true  虽然看不到  但是可以获取和设置

使用场景一

当每一个元素都需要一个标识 显示自己的状态的时候 用自定义属性

通过for循环给每一个元素添加上自定义属性

eg：根据需要给每一个div添加上自己的自定义属性

// 批量
var divs = document.getElementsByTagName('div');
console.log(divs);
// 当不知道当前的状态是什么的时候 就假设状态
var tag = true; // 假设true  是30px  false  是100px
​
// 用一个人的工资表示了所有人的工资  8k  所有的人都是8k
// 每个人各自有一个数值来表示当前的状态
​
// 当每一个元素都需要一个标识 显示自己的状态的时候  用自定义属性
// 需要给每一个div添加上自己的自定义属性
​
// divs[0].flag = true;
// divs[1].flag = true;
// divs[2].flag = true;
// divs[3].flag = true;
​
// 通过循环给每一个div添加自己的自定义属性
// 点击每一个div  判断自己是30还是100
for(var i = 0; i < divs.length; i++){
    // 添加属性
    divs[i].flag = true;
    console.log(divs[i], divs[i].flag);
    // 添加点击事件
    divs[i].onclick = function(){
        // 判断自己是30还是100  flag  获取自己的flag
        // 获取自己
        console.log(this);
        // 获取自己的属性
        console.log(this.flag);
        // 判断
        if(this.flag){
            // 现在是30
            this.style.height = '100px';
            // 状态改变
            this.flag = false;
        } else {
            // 现在是100
            this.style.height = '30px';
            // 状态改变
            this.flag = true;
        }
    }
}

自定义索引

在for循环嵌套的事件中，得不到正确的下标i

需要在for循环中，将下标存到每一个元素上

用自定义属性将当前元素的下标存储下来 元素.属性名 = 值;

用来下标的属性名: index

存储和使用方式:

按钮的下标 和 数组的下标 一一对应

\1. 自定义索引 for中去存储下标

\2. 事件中如何获取自定义下标 this.index

var btns = document.getElementsByTagName('button');
// 每一个按钮
for(var i = 0; i < btns.length; i++){
    console.log(i); // 可以得到正确的下标
    // 需要将下标存到每一个元素上 
    // 用自定义属性将当前元素的下标存储下来  元素.属性名 = 值;
    // 用来下标的属性名: index
    btns[i].index = i;
    console.log(btns[i].index);
​
    // 添加点击事件
    btns[i].onclick = function(){
        // 获取当前元素的下标 ---> 获取元素的index属性
        alert(this.index);
    }
​
}

网站换肤

遇到只有自身需要做特殊样式处理的 其他都要回归初始值 排他思想

\1. 先所有的元素都设置成初始值

\2. 让按钮自己的颜色变成黑色 字体变成白色

// 数组和按钮  下标一一对应
var arr = ['pink', 'red', 'yellow'];
// 获取元素
var btns = document.getElementsByTagName('button');
console.log(btns);
// 每一个
for (var i = 0; i < btns.length; i++) {
    // 自定义属性
    btns[i].index = i;
​
    // 按钮添加点击事件
    btns[i].onclick = function () {
        // 让网站颜色变成对应的颜色 
        // 获取下标--按钮的
        console.log(this.index);
        document.body.style.background = arr[this.index];
​
        // 遇到只有自身需要做特殊样式处理的  其他都要回归初始值 排他思想
        // 1. 先所有的元素都设置成初始值 
        for (var j = 0; j < btns.length; j++) {
            btns[j].style.background = '';
            btns[j].style.color = '';
        }
​
        // 2. 让按钮自己的颜色变成黑色 字体变成白色
        this.style.background = 'black';
        this.style.color = '#fff';
    }
}

函数

函数概念

函数: 由事件驱动的或者是在有需要的时候可以被调用的代码块

用来保存一段代码在有需要的时候调用

声明函数

函数声明:

  1. 声明: function 函数名(){ // 代码块 }

  2. 调用: 函数名();

function sum(){
    console.log(1);
}
sum();

表达式声明

  1. 声明: var 变量名 = function(){ // 代码块 }

  2. 调用：变量名();

var sum1 = function(){
    console.log(1);
}
sum1();

区别

函数声明调用可以在前也可以在后, 表达式声明, 调用只能在声明之后

sum();
// sum1(); // 报错
function sum(){
    console.log(1);
}

var sum1 = function(){
    console.log(1);
}

适用范围

有目的的函数

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

用作事件处理函数

元素.事件 = function(){} 等号右边的function就是事件处理函数

document.onclick = function(){
    alert(1);
}

作为对象的方法

作为对象的方法 属性值是function的时候 这个function就叫做对象的方法

对象的方法中 this指向对象

var obj = {
    'name': '胡歌',
    'tip': function(){
        alert('长得帅');
        console.log(this); // obj
    }
};
console.log(obj.tip);
obj.tip();

封装复用

封装复用: 将重复的代码放在一个函数中 在有需要的时候直接调用

  1. 创建一个空函数

  2. 将重复代码放入

  3. 在源代码位置上调用 解决报错

// 不知道是第几张图的时候假设  下标是0
var n = 0;

// 点击事件
next.onclick = function () {
    // 具体做的事情:
    // 换图 1---2  实际上是将图片地址从 11 --- 22  改下标 0 -- 1
    n++;
    move();
}

// 点击左箭头, 让图片从4--3--2--1  如果当前是第一张，点击的时候返回最后一张
console.log(prev);
// 点击事件
prev.onclick = function () {
    // 具体做的事情:
    // 换图 2--1  实际上是将图片地址从 22 --- 11  改下标 1 -- 0
    n--;
    move();
}

// 1. 创建空函数
function move() {
    // 2. 将重复的代码放入
    console.log(n);
    // 获取对应下标的数据
    console.log(arr[n]);

    // 判断 判断下标是否已经变成数组的长度
    if (n == arr.length) {
        n = 0;
    }

    // 判断下标是不是已经到-1
    if (n == -1) {
        n = arr.length - 1; // 最后一张图片的下标 长度-1
    }

    // 赋值给img的src
    img.src = arr[n];
    // 更改p标签的文本
    p.innerHTML = (n + 1) + '/4';
    // 更改span的文本
    span.innerHTML = '图片' + (n + 1);
}

函数的参数

当函数中出现不确定得值的时候，将不确定的值抽取成形参

函数的参数：

  1. 形参: 形式参数，类似变量，接收实参传递过来的数据, function后面的()中

  2. 实参: 具体的数据，传递给形参的数据, 写在调用的()中

  3. arguments: 实参的集合

function sum(a){ // a--形参  a = 50
    // console.log(10 + 20);
    // console.log(10 + 40);
    console.log(10 + a); 
}
sum(50);
sum(22); // a = 22  32
function sum1(a, b){
    console.log(arguments);
    console.log(a + b);
}
sum1(30, 40);
sum1(20, 30);
sum1(55, 66);
多个参数

谁被抽取成了参数，在调用的时候就把谁传进去

多个参数:

多个形参: 用,进行分隔

多个实参: 用,进行分隔

多个形参和多个实参之间 是一一对应的

function sum1(a, b){
    console.log(arguments);
    console.log(a + b);
}
sum1(30, 40);
sum1(20, 30);
sum1(55, 66);

 

arguments

arguments: 实参的集合 每一个函数中都有实参的集合也就是都有arguments

当形参和实参个数不固定的时候, 干脆一个都不写 用arguments进行获取实参

arguments和形参的关系: 同一个 都是用来接收实参的

function sum2(){
    console.log(arguments);
    var a = 0;
    // 求和  将arguments中的每一个数值加起来
    for(var i = 0; i < arguments.length; i++){
        console.log(i, arguments[i]);
        a += arguments[i];
    }
    console.log(a);
}
sum2(60,90,88,77,12,33);
sum2(21,43,54);

 

 

 

 

 

posted @ 2021-01-09 17:06  一花一世界111  阅读(146)  评论(0)    收藏  举报