. this
3.1 为什么用this
<body> <div>盒子1</div> <div>盒子2</div> <div>盒子3</div> <div>盒子4</div> <div>盒子5</div> <script> var oDiv = document.getElementsByTagName("div"); oDiv[0].onclick = function(){ console.log(oDiv[0].innerHTML) } oDiv[1].onclick = function(){ console.log(oDiv[1].innerHTML) } console.log(oDiv.length);//5 // 通过for循环添加点击事件 for(var i = 0;i<oDiv.length;i++){ // 循环添加事件 事件不会立马执行 但是for循环执行完毕 // 点击盒子的时候 才会执行事件里面的代码 此时i的值是5 oDiv[i].onclick = function(){ console.log(i);//5 console.log(oDiv[i]);//undefined } } // i = 5 </script> </body>
3.2 this指向
-
this 这个的意思
-
在不同的地方 this指向的内容不同 取决于当前函数被调用时所处的环境
-
事件处理函数 : 标签.事件类型 = function() { 要做的事}
-
==在事件处理函数中 ------ this指向触发事件的对象----点谁指向谁==
-
-
基础使用
<button>按钮1</button> <script> var btn = document.getElementsByTagName("button")[0]; // 事件处理函数this的指向----指当前触发事件的对象----点谁指向谁 btn.onclick = function(){ console.log(this)//指向button标签 } </script>
-
this的指向---练习
<body> <div>盒子1</div> <div>盒子2</div> <div>盒子3</div> <div>盒子4</div> <div>盒子5</div> <script> var oDiv = document.getElementsByTagName("div"); oDiv[0].onclick = function(){ console.log(oDiv[0].innerHTML) } oDiv[1].onclick = function(){ console.log(oDiv[1].innerHTML) } console.log(oDiv.length);//5 // 通过for循环添加点击事件 for(var i = 0;i<oDiv.length;i++){ // 循环添加事件 事件不会立马执行 但是for循环执行完毕 // 点击盒子的时候 才会执行事件里面的代码 此时i的值是5 oDiv[i].onclick = function(){ // console.log(i);//5 // console.log(oDiv[i]);//undefined // 利用this解决这个问题 // 标签.innerHTML // this---当前触发事件的对象 console.log(this) console.log(this.innerHTML) } } // i = 5 </script>
3.3 开关效果
3.1.1 单组开发效果
-
现象:一个事件里面有两种状态
-
解决
-
定义一个变量 用于标识当前的状态
-
通过判断不同变量的状态 选择执行不同的逻辑
-
当状态发生改变的时候 变量的值需要做改变
-
<div></div> <script> var oDiv = document.getElementsByTagName("div")[0]; var tag = true;//true---200px false-50px oDiv.onclick = function(){ // oDiv.style.height = "200px"; if(tag){ //开 200px oDiv.style.height = "200px"; tag = false; }else{//关 50px oDiv.style.height = "50px"; tag = true; } } </script>
3.1.2 多组开发效果(问题版)
<body> <div>盒子1</div> <div>盒子2</div> <div>盒子3</div> <div>盒子4</div> <div>盒子5</div> <script> var oDiv = document.getElementsByTagName("div"); var tag = true;//true----200px false--50px // 利用for循环添加点击事件 for(var i = 0;i<oDiv.length;i++){ oDiv[i].onclick = function(){ // 通过for循环添加点击事件 在点击事件中无法拿到i的值 拿的永远是i最后一次值 if(tag){ this.style.height = "200px"; tag = false; }else{ this.style.height = "50px"; tag = true } } } /* 问题:公用了一个tag 交叉点击的时候 就出现了混乱 解决:每个盒子都定义一个属于自己的tag值 */ </script> </body>
3.4自定义属性
3.4.1什么是属性
-
什么是属性:存在开始标签上 属性名=属性值 例如class="box" id="wrap"
-
固有属性:系统给定的属性 例如 class id style href src
-
自定义属性:程序员自己定义的属性
-
3.4.2设置和获取自定义属性
-
如何设置和获取自定义属性
<body> <!-- class和id叫固有属性 a和b叫自定义属性 --> <div class="box" id="wrap" a="123" b="这是一个div标签"></div> <script> var oDiv = document.getElementsByTagName("div")[0]; /*--------------如何获取自定义属性 标签.属性名----------------------*/ //1.如果直接在标签上定义 可以在结构上看到 但是无法获取 console.log(oDiv.a);//undefined console.log(oDiv.b);//undefined // 2.通过js添加属性:结构上看不到 但是可以在js中获取 // 通过js设置自定义属性 标签.属性名 = 值 oDiv.c = "456"; console.log(oDiv.c);//456 </script> </body>
3.4.3自定义属性解决多组展开收起
-
多组展开收起(解决)
<body> <div >盒子1</div> <div>盒子2</div> <div>盒子3</div> <div>盒子4</div> <div>盒子5</div> <script> var oDiv = document.getElementsByTagName("div"); // var tag = true;//true----200px false--50px // 利用for循环添加点击事件 for (var i = 0; i < oDiv.length; i++) { oDiv[i].tag = true;//给每个盒子设置自定义属性tag=true oDiv[i].onclick = function () { console.log(this.tag)//点击谁 就获取谁的tag属性 // 通过for循环添加点击事件 在点击事件中无法拿到i的值 拿的永远是i最后一次值 if (this.tag) { this.style.height = "200px"; this.tag = false; } else { this.style.height = "50px"; this.tag = true } } } /* 问题:公用了一个tag 交叉点击的时候 就出现了混乱 解决:每个盒子都定义一个属于自己的tag值 */ </script> </body>
自定义属性
.2.1 定义属性
-
属性的分类
-
固有属性:系统给的 id class title
-
自定义属性:程序员自己定义的 tag index
-
-
添加自定义属性
-
直接添加标签上(暂时获取不到)
<div tag = "true"></div> //2.自定义属性直接写行间,可以直观看见,暂时无法获取写在行间的自定义属性 console.log(oDiv.tag); //undefined
-
使用js添加:标签.属性名 = 属性值
//3.通过js添加自定义属性,标签上看不见,但是可以直接使用 oDiv.a = true; console.log(oDiv.a); //true
-
2.2.2 自定义属性使用场景
-
多组开关效果(自定义属性)
-
自定义索引
-
问题:通过for循环添加事件,想在事件里面使用i下标值,但是拿到的i值永远是最后一次的值
-
解决:通过自定义属性 在绑定事件之前就将i值定义到标签的属性上
<body> <button >首页</button> <button >同步课程</button> <button >课程详情</button> <div style="display:block">首页的内容</div> <div>同步课程的内容</div> <div>课程详情的内容</div> <script> /* 点击第一个button 显示第一个div 点击第二个button 显示第二个div 点击第三个button 显示第三个div */ var btn = document.getElementsByTagName("button"); var odiv = document.getElementsByTagName("div"); //给btn点击点击事件 for(var i = 0;i<btn.length;i++){ console.log(i);// 0 1 2 btn[i].index = i;//自定义索引 btn[i].onclick = function(){ //如果是for循环添加事件 是无法拿到i的值 可以通过自定义属性 将i值定义到标签上 // console.log(i);//3 //先清空所有的样式 for(var j = 0;j<odiv.length;j++){ odiv[j].style.display = "none"; } //标签.index 获取自定义属性 console.log(this.index) odiv[this.index].style.display = "block"; } } </script> </body>
-