2018-01-05 this、自定义属性学习

原创 moxiao 随笔 个人笔记 122阅读 2018-01-05 19:40:18 举报

今天学了this和自定义属性,刚刚学了这些之后,还学了选项卡思维
纠错技巧
Uncaught TypeError: Cannot read property 'style' of undefined
捕获 类型错误
看到这个错误,说明style之前的对象是错的,是undefined

for循环
每循环一次,都要找到一个元素,声明函数给到这个元素的事件
每一次循环,函数都是新的
给每一个元素绑定事件,就用for循环

小例子
for(var i = 0; i < buttons.length; i++){
buttons[i].onclick = function (){
当点击任何一个按钮,for循环已经结束了,再找i的时候,i已经是最终值了
console.log(buttons[i],i); 是i出错了
//buttons[i].style.background = 'red';
}
}
for循环结束之后,i的值为是最终值了,是7
console.log(i);

this
在两个地方:

  1. 一对script标签任意一个地方
    this执行运行js环境的顶层对象,在浏览器中运行js,顶层对象是window
    this => window
  2. 在函数中
    this是在函数被调用的时候确定this的值
    直接调用:this => window
    事件调用:this => 触发事件的元素

    选项卡思维

     有一堆元素控制另一对元素,并且这些元素是一一对应的
    
     用处:轮播图,tab切换、整屏切换

属性
1、给元素自定义属性
buttons[0].amiaov = 10;
如果给这个元素的一个属性直接赋值,就是可以添加这个属性
这样可以用自定义属性找到集合里面的东西
2、元素上内置的属性

for循环结束后,i的值是最终值,所以再点击的时候不能使用i去找任意个元素
this的值跟调用函数有关系,在调用的时候确定this的值

  1. 直接调用 this => window
  2. 事件调用 this => 触发事件的元素

    模拟单选、模拟多选、选项卡思维
    核心点:找到要点击的那些元素的下标

    怎么找下标?
    把下标存在元素上,给元素自定义一个属性,存下标

今天手打了一遍选项卡思维练习
html 代码

周天还有做一点好玩的东西……
加油啊!

评论 ( 2 )
最新评论
moxiao 1F 2018-01-11 19:58:13 2F

现在刚刚学js,还不太明白闭包什么的,以后明白了用词会更加准确的

czp704571044 2018-01-11 14:43:07 1F

那个for循环小例子直接说闭包得了。