js函数封装以及this应用

1.函数的返回值2

• return 返回值; 想要给外界返回什么就return什么

• return本质：函数中一旦遇到return退出当前函数（函数到这里就结束了），return之后的代码就不再执行了

• return只能返回一个值 想要返回多个一般放到数组当中

• 返回值的数据类型：可以返回任意数据类型

2.函数的封装

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

只能获取不能设置，设置只能通过style属性

经过浏览器渲染的样式：行内 内部 外部

• 基本语法 ：getComputedStyle(元素对象).样式属性; (获取非行内样式)

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

兼容问题：IE8及以下

• IE下提供了独有的获取经过浏览器渲染样式的属性

基本语法：元素.currentStyle.样式属性

var width = div.currentStyle.width;
var height = div.currentStyle.height;   
var bgColor = div.currentStyle.backgroundColor;
console.log(width,height,bgColor);

// 其它浏览器 获取到的值是undefined 
// IE下：对应值得是一个对象
// 对于单个数据而言只有 0 NaN null undefined ""  是假

var width = null;
var height  = null;

// 获取样式值
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
        // 能用.语法的都能使用中括号语法  atrr相当于一个变量   只能用中括号语法
        return eleObj.currentStyle[attr];
    }else{ //除了IE以外其它浏览器
        return getComputedStyle(eleObj)[attr];
    }
}

.this：this表示当前行为执行的主体

this规律：

• 在全局作用域下直接输出this 是window

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

• 函数(调用)执行就看前边有没有点，有点点前面是谁就是谁，没有点就是window

  // - 在全局作用域下直接输出this 是window
  console.log(this); //window
  
  // - 在事件处理函数中（将一个函数赋值给某个事件）this是当前那个元素（当前事件在哪个元素触发的就是哪个）
  var div = document.getElementsByTagName("div")[0];
  div.onclick = function () {
      console.log(this);  //this就是div  事件是给div绑定的  div是当前事件执行的主体
  }
  
  // - 函数(调用)执行就看前边有没有点，有点点前面是谁就是谁，没有点就是window
  function fn() {
      console.log(this);
  }
  
  // fn();  // 在全局作用域下定义的变量和函数 都属于window的属性  window可以省略
  // window.fn();    window就是当前行为执行的主体  这个函数本质上是window去调用的 
  fn();
  
  var obj = { name: "哈哈", age: 100, hello: fn };
  console.log(obj.hello);
  obj.hello(); // {name:"哈哈",age:100,hello:fn};  obj去调用的这个函数 表示当前行为执行的主体

  元素的本质就是对象，天生自带很多属性和值，我们也可以自己给元素自定义属性和值

• 设置：元素.属性 = 值；

• 获取：元素.属性;

  // 获取元素
  var imgs = document.getElementsByTagName("img");
  
  // 绑定事件
  for (var i = 0; i < imgs.length; i++) {
      // 自定义标识 给当前图片自定义属性flag 默认值是true 关灯状态
      imgs[i].flag = true;
      // 给当前这个图片绑定事件
      imgs[i].onclick = function () {
          // 判断当前点击那个图片状态
          console.log(this.flag);
          if (this.flag) { //关灯状态
              // 开灯
              this.src = "./img/bright.jpg";
              // 重新给自定义标识赋值
              this.flag = false;
          } else {  //开灯状态
              // 关灯
              this.src = "./img/dark.jpg";
              // 重新给自定义标识赋值
              this.flag = true;
          }
          console.log(this);
          console.dir(this);
      }
  }

  自定义索引的本质就是自定义属性，只不过赋值的内容是数值

  // 获取元素
  var tab = document.getElementById("tab"),
      oLis = tab.getElementsByTagName("li"),
      oDivs = tab.getElementsByTagName("div");
  console.log(oLis, oDivs);
  
  
  
  /* 
      选项卡思想：
      先清空所有的激活样式（li没有文字颜色，div全部隐藏）
      让当前点击那个li有激活样式  并且让当前这个li对应那个div展示
  */
  
  
  // 绑定事件
  for (var i = 0; i < oLis.length; i++) {
      // 自定义索引
      oLis[i].index = i;
      // 给当前这个li绑定事件
      oLis[i].onclick = function () {
          // 先清空所有的激活样式（li没有文字颜色，div全部隐藏）
          for (var j = 0; j < oLis.length; j++) {
              oLis[j].className = "";
              oDivs[j].className = "";
          }
  
          //让当前点击那个li有激活样式  并且让当前这个li对应那个div展示
          this.className = "active";
  
          console.log(this.index);
          console.log(oDivs[this.index]);
          oDivs[this.index].className = "active";
      }
  }