this的使用，模拟单选框，选项卡和复选框
1.this的使用 this js中的关键字 js内部已经定义好了,可以不声明 直接使用 this的指向问题 1. 在函数外部使用 this指向的是window 2. 在函数内部使用 有名函数 直接调用函数 this指的还是window 通过事件调用，事件是谁触发的 this指的就是谁 匿名函数 通过事件调用，事件是谁触发的 this指的就是谁 <body> <div>box</div> <script> alert(this); //[object Window] //------------------------------------------ function fn(){ alert( this ); } fn(); // 直接调用 ,函数内的this 指的还是 [object Window] document.onclick = fn; //[object HTMLDocument] var box = document.getElementById("box"); box.onclick = fn; //[object HTMLDivElement] //------------------------------------------ // 匿名函数 由事件调用,事件由谁触发 this指向谁 document.onclick = function(){ alert(this); }; var box = document.getElementById("box"); box.onclick = function(){ alert(this); } </script> </body> 2.模拟单选框
模拟单选框效果图
方法一：大清洗，在设置颜色之前把所有的颜色值设为空。然后再设置点击框的颜色。
方法二：点击什么，清除什么。记录当前点击的。
<body> <div></div> <div></div> <div></div> <script> var divs=document.getElementsByTagName("div"); var now=0; for( var i=0; i<divs.length;i++){ divs[i].index=i;//建立索引，记录每一个节点值。 divs[i].onclick=function () { divs[now].style.background=""; this.style.background="coral"; now=this.index; } } </script> </body> 3.选项卡模拟选项卡
方法一：大清洗，在设置颜色之前把所有的颜色值设为空。然后再设置点击框的颜色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; background: red; font:20px/2 "宋体"; color:#fff; display: none; margin-top: 20px; } button{ width: 100px; line-height: 50px; font-size:18px; background: none; } .show{ display: block; } .active{ background: cornflowerblue; } </style> </head> <body> <button>选项卡一</button> <button>选项卡二</button> <button>选项卡三</button> <div>内容一</div> <div>内容二</div> <div>内容三</div> <script> var btns=document.getElementsByTagName("button"); var divs=document.getElementsByTagName("div"); for(var i=0;i<divs.length;i++){ btns[i].index=i; btns[i].onclick=function () { for(var i=0;i<divs.length;i++) { btns[i].className=""; divs[i].className=""; } this.className="active"; divs[this.index].className="show"; } } </script> </body> </html>方法二：点击什么，清除什么。记录当前点击的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; background: red; font:20px/2 "宋体"; color:#fff; display: none; margin-top: 20px; } button{ width: 100px; line-height: 50px; font-size:18px; background: none; } .show{ display: block; } .active{ background: cornflowerblue; } </style> </head> <body> <button>选项卡一</button> <button>选项卡二</button> <button>选项卡三</button> <div>内容一</div> <div>内容二</div> <div>内容三</div> <script> var btns=document.getElementsByTagName("button"); var divs=document.getElementsByTagName("div"); var now=0; for(var i=0;i<divs.length;i++){ btns[i].index=i; btns[i].onclick=function () { btns[now].className=""; divs[now].className=""; this.className="active"; divs[this.index].className="show"; now=this.index; } } </script> </body> </html> 4.模拟复选框模拟复选框查看效果以及代码！！！！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; border:1px solid black; float: left; margin-right: 10px; } .active{ background: cornflowerblue; } </style> </head> <body> <div></div> <div></div> <div></div> <script> var divs=document.getElementsByTagName("div"); console.log(divs); var L=divs.length; for(var i=0;i<L;i++){ // true表示没被点击 // false表示被点击了 divs[i].onoff=true; divs[i].onclick=function () { if(this.onoff){//如果没被点击，则添加背景颜色 this.className="active"; }else{//如果点击了，则清空背景颜色 this.className=""; } this.onoff=!this.onoff;//只要点击了，就将此div的自定义属性值取反。 } } </script> </body> </html>JS基础入门篇（四）—this的使用，，模拟单选框，选项卡和复选框
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/42778.html
- 上一篇：Promise和RxJS处理异步对比
- 下一篇：css 高度随宽度比例变化
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")