函数封装

代码复用

结构一致，功能一样

封装：将实现同样功能的代码段，放到一个函数中，用到了调用即可，提高代码效率或复用性

   /* 
          代码复用：结构一致，功能一样
          封装：将实现同样功能的代码段，放到一个函数中，用到了调用即可，提高代码效率或复用性
        */

        // 获取元素
        var oPs = document.getElementsByTagName("p");
        console.log(oPs);


        function sum(parent) {
            console.log(parent);
            // 获取元素
            var input = parent.getElementsByTagName("input")[0];
            var oSpans = parent.getElementsByTagName("span");


            // 绑定事件
            input.onclick = function () {
                // 获取 单价  和 数量
                var price = parseFloat(oSpans[0].innerText);
                var numVal = input.value;

                // 计算小计 单价 * 数量
                var total = price * numVal;

                // 赋值
                oSpans[1].innerText = total.toFixed(2);

            }

        }


        for (var i = 0; i < oPs.length; i++) {
            sum(oPs[i]);
        }

修改标签内容（代码复用）

// 获取元素
var oLis = document.getElementsByTagName("li");

// parent:父级元素
function edit(parent) {
    console.log(parent);
    // 获取当前这个li下的子元素
    var oPs = parent.getElementsByTagName("p");
    var oAs = parent.getElementsByTagName("a");
    var oSpan = parent.getElementsByTagName("span")[0];
    var oInput = parent.getElementsByTagName("input")[0];
    console.log(oPs, oAs, oSpan, oInput);

    // 绑定事件
    // 编辑
    oAs[0].onclick = function () {
        // 显示第二个p标签，隐藏第一个p标签
        oPs[1].style.display = "block";
        oPs[0].style.display = "none";
        // 将第一p标签下span的内容赋值给第二个p标签下输入框
        oInput.value = oSpan.innerText;
    }


    //保存
    oAs[1].onclick = function () {
        // 隐藏第二个p标签，显示第一个p标签 
        oPs[1].style.display = "none";
        oPs[0].style.display = "block";

        // 将输入框的值展示到span
        oSpan.innerText = oInput.value;
    }

    oAs[2].onclick = function () {
        // 隐藏第二个p标签，显示第一个p标签 
        oPs[1].style.display = "none";
        oPs[0].style.display = "block";
    }
}

// edit(oLis[0]);
// edit(oLis[1]);
// edit(oLis[2]);
// ...
for(var i = 0;i<oLis.length;i++){
    edit(oLis[i]);
}

获取经过浏览器渲染的样式

// 元素的.style.样式属性 = 值;/元素的.style.样式属性;

// 通过style属性既可以设置，也可以获取，操作的都是元素的行内样式

// console.log(div.style.backgroundColor); //red

// console.log(div.style.width); //""

// console.log("--------------------------------------");

基本语法:getComputedStyle(具体元素).样式属性;
- 注意点：
  - 只能做获取，不能设置
  - 不兼容，IE8及以下没有这个属性

var width = getComputedStyle(div).width;
console.log(width);
var bgColor = getComputedStyle(div).backgroundColor;
console.log(bgColor);

IE下提供了独有的获取经过浏览器渲染样式的属性
- 基本语法：元素.currentStyle.样式属性;

var height = div.currentStyle.height;
var color = div.currentStyle.color;
console.log(height,color);

   // 元素的本质就是对象(符合对象的操作)
        // 输出详细信息 console.dir(数据); 
         console.dir(div);

兼容处理


        var width = null;
        var height = null;
        // 对于单个数据而言只有0 NaN null undefined "" 是假的其它的都是真的
        if (div.currentStyle) { //IE下
            width = div.currentStyle.width;
            height = div.currentStyle.height;
        } else { //IE以外其它的浏览器
            width = getComputedStyle(div).width;
            height = getComputedStyle(div).height;
        }
        console.log(width, height);

函数封装获取经过浏览器渲染的样式值

/* 
    作用:获取经过浏览器渲染的样式值
    参数：
         eleObj:元素对象
         attr:样式属性
         返回值：样式值
    */

function getStyle(eleObj, attr) {
    // 判断兼容
    if (eleObj.currentStyle) { //IE浏览器下
        // 将获取到的样式值返回给外界
        return eleObj.currentStyle[attr]; // attr相当于一个变量需要使用中括号语法
    } else { //除了IE以外其它的浏览器
        // 将获取到的样式值返回给外界
        return getComputedStyle(eleObj)[attr]; // attr相当于一个变量需要使用中括号语法
    }
}

this

表示当前行为执行的主体

使用 JavaScript 开发的时候，很多开发者多多少少会被 this 的指向搞蒙圈，但是实际上，关于 this 的指向，记住最核心的一句话：哪个对象调用函数，函数里面的this指向哪个对象。

/* 
            this表示当前行为执行的主体

                ```
                王世豪     沙县小吃    蛋炒饭多加两个蛋  
                吃饭行为的主体：王世豪
                吃的地点：沙县小吃
                吃的东西： 蛋炒饭多加两个蛋  
                ```

                javaScript中this不是函数独有的，我们主要研究的是函数中的this
        */


        // 补充
        // 在全局作用域下所有的变量或函数都是window的属性或方法,window可以省略
        // window:浏览器对象模型中的顶层对象（浏览器中window最大）换一句话去理解（所有代码最后运行到window中）

        var a = 10;
        var b = 20;

        function fn1() {
            console.log("哈哈");
        }

        function fn2() {
            console.log("呵呵");
        }

        console.log(a, b);
        fn1();
        fn2();
         console.log("--------------------------------");
        console.log(window);
        console.log(window.a, window.b);

        window.fn1();
        window.fn2();


        // javaScript中this不是函数独有的，我们主要研究的是函数中的this(函数调用才能确定this)
        // 1.直接在全局作用域下输出this,this就是window
        console.log(this);
        // 2.在事件处理函数中（将函数当做值赋值给某个事件），this表示当前触发那个元素
        // 3.当前函数调用就看前边有没有点，有点点前面是谁就是谁，没有点就是window

        console.log("--------------------------------");

        function test1() {
            console.log(this);
        }

        test1();
        window.test1();

         console.log("----------------------------------");
        function test2() {
            console.log(this);
        }


        var obj = {
            name: "哈哈",
            hello: test2
        };

        console.log(obj);
        console.log(obj.hello);
        obj.hello();

九宫格抽奖案例

  <ul>
        <li>蔡徐坤</li>
        <li>王力宏</li>
        <li>周杰伦</li>
        <li>林俊杰</li>
        <li>李宇春</li>
        <li>王菲</li>
        <li>赵丽颖</li>
        <li>刘亦菲</li>
        <li>随便</li>
    </ul>
    <script>
        //2.在事件处理函数中（将函数当做值赋值给某个事件），this表示当前触发那个元素(在那个元素触发的，this就是那个元素)

        // 点击li控制台输出当前点击那个li的内容
        // var oLis = document.getElementsByTagName("li");
        // for(var i = 0;i<oLis.length;i++){
        //     // 给当前这个li绑定事件
        //     oLis[i].onclick = function(){ //事件处理函数：将函数当做值赋值给某个事件
        //         console.log(this);
        //         console.log(this.innerText);
        //     }
        // }


        var oLis = document.getElementsByTagName("li");
        for (var i = 0; i < oLis.length; i++) {
            // 给当前这个li绑定事件
            oLis[i].onclick = function () { //事件处理函数：将函数当做值赋值给某个事件
                // this->表是当前点击的那个具体的元素

                // 先让所有的li文字颜色都为白色
                for (var j = 0; j < oLis.length; j++) {
                    oLis[j].style.color = "#fff";
                }

                // 让当前点击的这个li文字颜色变为黑色
                this.style.color = "#000";
            }
        }
    </script>

开关灯案例

  <img src="./img/dark.jpg" />
    <img src="./img/dark.jpg" />
    <img src="./img/dark.jpg" />
    <script>
        //单个
        // var imgs = document.getElementsByTagName("img")[0];
        // console.log(imgs);
        // var flag = false;//暗
        // imgs.onclick = function(){
        //     if(flag == false){
        //         this.src = "./img/bright.jpg";//点击变亮
        //         flag = true;

        //     }else{
        //         this.src = "./img/dark.jpg";//再次点击变暗
        //         flag = false;//暗
        //     }
        // }

        //多个
        var imgs = document.getElementsByTagName('img');
        // console.log(imgs);
        for (var i = 0; i < imgs.length; i++) {
            // 自定义标识
            imgs[i].aflag = false; //暗    
            imgs[i].onclick = function () {
                if (this.aflag == false) {
                    this.src = "./img/bright.jpg"; //点击变亮
                    this.aflag = true;
                } else {
                    this.src = "./img/dark.jpg"; //再次点击变暗
                    this.aflag = false;
                }
            }
        }
    </script>

函数function封装及this指向

函数封装

代码复用

修改标签内容（代码复用）

获取经过浏览器渲染的样式

兼容处理

函数封装获取经过浏览器渲染的样式值

this

九宫格抽奖案例

开关灯案例

猜你喜欢