Web APIs——环境对象this以及回调函数

一、环境对象

环境对象:指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境

作用:弄清楚this的指向,可以使代码更简洁

  • 函数的调用方式不同,this指代的对象也不同
  • [谁调用,this就是谁] 是判断this指向的粗略规则
  • 直接调用函数,其实相当于是window.函数,所以thi指代window

    
    

 二、回调函数

如果将函数A作为参数传递给函数B时,称函数A为回调函数

当一个函数当做参数来传递另外一个函数的时候,这个函数就是回调函数

把函数当做另外一个函数的参数传递,这个函数就叫回调函数

回调函数本质函数函数,只不过把它当成参数使用

使用匿名函数做为回调函数比较常见

常见的使用场景:

    
    

三、综合案例

Tab栏切换

需求:鼠标经过不同的选项卡,底部可以显示不同的内容

分析:

  1. 主要核心是类的切换,设定一个当前类,可以让当前元素高亮
  2. 鼠标经过当前选项卡,先移除其余元素身上的当前类,而只给当前元素添加类
  3. 注意,当前类只能有一个




  
  
  
  tab栏切换
  



  
  


四、全选文本框案例1

需求:用户点击全选,则下面复选框全部选择,取消全选则全部取消

分析:

  1. 全选复选框点击,可以得到当前按钮的checked
  2. 把下面所有的小复选框状态checked,改为和全选复选框一致





  
  
  



  
全选 商品 商家 价格
小米手机 小米 ¥1999
小米净水器 小米 ¥4999
小米电视 小米 ¥5999

五、全选文本框案例2

需求:用户点击全选,则下面复选框全部选择,取消全选则全部取消,文字对应变化

分析:

  1. 遍历下面的所有的checkbox,添加点击事件
  2. 检查小复选框选中的个数,是不是等于小复选框总的个数
  3. 把结果给全选按钮
  4. 利用css复选框选择器 input:checked





  
  
  



  
全选 商品 商家 价格
小米手机 小米 ¥1999
小米净水器 小米 ¥4999
小米电视 小米 ¥5999

你可能感兴趣的:(JavaScript,前端,javascript)