JS基础入门篇（四）—this的使用，模拟单选框，选项卡和复选框
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>JS基础入门篇（四）—this的使用，模拟单选框，选项卡和复选框的更多相关文章
- JS基础入门篇（三十五）—面向对象（二）
如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)
- FPGA基础入门篇(四) 边沿检测电路
FPGA基础入门篇(四)--边沿检测电路 一.边沿检测 边沿检测,就是检测输入信号,或者FPGA内部逻辑信号的跳变,即上升沿或者下降沿的检测.在检测到所需要的边沿后产生一个高电平的脉冲.这在FPGA电 ...
- JS基础入门篇（二十七）—BOM
虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...
- JS基础入门篇（二十四）—DOM（下）
1.offsetLeft/offsetTop offsetLeft/offsetTop : 到定位父级节点的距离. <!DOCTYPE html> <html lang=" ...
- JS基础入门篇（三十四）— 面向对象（一）
1.对象 对象的定义 : 对象 是 由 键值对 组成的无序集合. 创建对象两种方法 : 方法一 : 字面量方法 var obj = {name: "k"}; 方法二 : new O ...
- JS基础入门篇（四十三）—ES6（二）
1.对象简洁表示法 原来写法 var name = "lzf"; var gender = "male"; var fn = function(){consol ...
- JS基础入门篇（二十四）—DOM（上）
1.常用的节点类型,nodeType,attributes,childNodes. 1.元素节点 - 1 2.属性节点 - 2 3.文本节点 - 3 4.注释节点 - 8 5.文档节点 - 9 查看节 ...
- JS基础入门篇（六）— 数据类型
1.数据类型 数据类型:我感觉就是对数据的种类进行分类.就好比把人分为儿童,青少年,中年,老年一样. 基础数据类型: Number(数字),String(字符串),Null(空),Undefined( ...
- JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
随机推荐
- android:imeOptions="actionDone"
把EditText的Ime Options属性设置成不同的值,Enter键上可以显示不同的文字或图案actionNone : 回车键,按下后光标到下一行actionSend : SendactionN ...
- vue的概述
一.Vue的概述 Vue的开发模式 和 之前接触的jQuery.原生JSDOM操作是不同的,之前要想修改试图,首先找元素:在使用Vue时,专心把精力放在修改数据.DOM驱动 ---> 数据驱动. ...
- phpcms php格式化 时间戳
用PHPCMS V9 建站时,经常会用到时间标签,它是通用标签调用-日期时间格式化,适用全站. 一.日期时间格式化显示: a\标准型:{date('Y-m-d H:i:s', $rs['inputti ...
- python +requests 爬虫-爬取图片并进行下载到本地
因为写12306抢票脚本需要用到爬虫技术下载验证码并进行定位点击所以这章主要讲解,爬虫,从网页上爬取图片并进行下载到本地 爬虫实现方式: 1.首先选取你需要的抓取的URL:2.将这些URL放入待抓 ...
- Django 无法通过request.POST.get()获取数据的问题
原来是contentType为application/json时,Django不支持request.POST.get(),但可以通过request.body来获取string类型的参数: data = ...
- python的前景
最近几年Python编程语言在国内引起不小的轰动,有超越Java之势,本来在美国这个编程语言就是最火的,应用的非常非常的广泛,而Python的整体语言难度来讲又比Java简单的很多.尤其是在运维的应用 ...
- [Linux] 011 其它权限管理命令
1. 权限管理命令:chown 命令名称:chown 命令英文原意:change file ownership 命令所在路径:/bin/chown 执行权限:所有用户 语法:chown [用户] [文 ...
- elasticsearch 深入 —— 地理位置
地理位置 我们拿着纸质地图漫步城市的日子一去不返了.得益于智能手机,我们现在总是可以知道 自己所处的准确位置,也预料到网站会使用这些信息.我想知道从当前位置步行 5 分钟内可到的那些餐馆,对伦敦更大范 ...
- python断言语句assert
断言语句的格式 assert test, [msg] test是一个表达式,表达式求值为Fals时引发AssertionError异常,msg是可选的异常消息. def test_assert(a): ...
- 前端学习(三十九）移动端app（笔记）
移动端App 开发App的三种方式 Native App 原生 底层语言 java Android oc ...