1.this的運用
this
js中的關鍵字
js內部已定義好了,能夠不聲明 直接運用
this的指向題目
1. 在函數外部運用
this指向的是window
2. 在函數內部運用
著名函數
直接挪用函數 this指的照樣window
經由過程事宜挪用，事宜是誰觸發的 this指的就是誰
匿名函數
經由過程事宜挪用，事宜是誰觸發的 this指的就是誰
<body>
<div id="box">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.模仿單選框
模仿單選框結果圖
要領一：大洗濯，在設置色彩之前把一切的色彩值設為空。然後再設置點擊框的色彩。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:100px;
height:100px;
border: 1px solid #000;
display: inline-block;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script>
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
// alert( "for實行中,此次i是" + i);
// alert( "此次為 第 "+ i +" 個div 增加點擊事宜處置懲罰函數" )
divs[i].onclick = function(){
// alert(i);
// 把 一切的 div 色彩 消滅
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "";
}
// 為點擊的這個div增加色彩
this.style.backgroundColor = "cornflowerblue";
}
}
</script>
</body>
</html>要領二：點擊什麼，消滅什麼。紀錄當前點擊的。
<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 class="active">選項卡一</button>
<button>選項卡二</button>
<button>選項卡三</button>
<div class="show">內容一</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 class="active">選項卡一</button>
<button>選項卡二</button>
<button>選項卡三</button>
<div class="show">內容一</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>