1.this的使用

  1. this
  2.     js中的关键字
  3.         js内部已经定义好了,可以不声明 直接使用
  4. this的指向问题
  5.     1. 在函数外部使用
  6.         this指向的是window
  7.     2. 在函数内部使用
  8.         有名函数
  9.             直接调用函数 this指的还是window
  10.             通过事件调用，事件是谁触发的 this指的就是谁
  11.         匿名函数
  12.             通过事件调用，事件是谁触发的 this指的就是谁

  2. <body>
  3. <div id="box">box</div>
  4. <script>
  5.     alert(this); //[object Window]
  6. //------------------------------------------
  8.     function fn(){
  9.         alert( this );
  10.     }
  11.     fn(); // 直接调用 ,函数内的this 指的还是 [object Window]
  13.     document.onclick = fn; //[object HTMLDocument]
  15.     var box = document.getElementById("box");
  16.     box.onclick = fn; //[object HTMLDivElement]
  17. //------------------------------------------
  19. //    匿名函数 由事件调用,事件由谁触发 this指向谁
  20.     document.onclick = function(){
  21.         alert(this);
  22.     };
  23.     var box = document.getElementById("box");
  24.     box.onclick = function(){
  25.         alert(this);
  26.     }
  27. </script>
  28. </body>

2.模拟单选框

模拟单选框效果图
方法一：大清洗，在设置颜色之前把所有的颜色值设为空。然后再设置点击框的颜色。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div{
  8.             width:100px;
  9.             height:100px;
  10.             border: 1px solid #000;
  11.             display: inline-block;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div></div>
  17.     <div></div>
  18.     <div></div>
  19.     <script>
  21.         var divs = document.getElementsByTagName("div");
  22.         for (var i = 0; i < divs.length; i++) {
  23. //            alert( "for执行中,此次i是" + i);
  24. //            alert( "此次为 第 "+ i +" 个div 添加点击事件处理函数" )
  25.             divs[i].onclick = function(){
  26. //                alert(i);
  27. //                把 所有的 div 颜色 清除
  28.                 for (var i = 0; i < divs.length; i++) {
  29.                     divs[i].style.backgroundColor = "";
  30.                 }
  31. //                为点击的这个div添加颜色
  32.                 this.style.backgroundColor = "cornflowerblue";
  33.             }
  34.         }
  35.     </script>
  36. </body>
  37. </html>

方法二：点击什么，清除什么。记录当前点击的。

  1. <body>
  2. <div></div>
  3. <div></div>
  4. <div></div>
  5. <script>
  6.     var divs=document.getElementsByTagName("div");
  7.     var now=0;
  8.     for( var i=0; i<divs.length;i++){
  9.         divs[i].index=i;//建立索引，记录每一个节点值。
  10.         divs[i].onclick=function () {
  11.             divs[now].style.background="";
  12.             this.style.background="coral";
  13.             now=this.index;
  15.         }
  16.     }
  17. </script>
  18. </body>

3.选项卡

模拟选项卡

方法一：大清洗，在设置颜色之前把所有的颜色值设为空。然后再设置点击框的颜色。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div{
  8.             width: 100px;
  9.             height: 100px;
  10.             background: red;
  11.             font:20px/2 "宋体";
  12.             color:#fff;
  13.             display: none;
  14.             margin-top: 20px;
  16.         }
  17.         button{
  18.             width: 100px;
  19.             line-height: 50px;
  20.             font-size:18px;
  21.             background: none;
  22.         }
  23.         .show{
  24.             display: block;
  25.         }
  26.         .active{
  27.             background: cornflowerblue;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32. <button class="active">选项卡一</button>
  33. <button>选项卡二</button>
  34. <button>选项卡三</button>
  35. <div class="show">内容一</div>
  36. <div>内容二</div>
  37. <div>内容三</div>
  38. <script>
  39.     var btns=document.getElementsByTagName("button");
  40.     var divs=document.getElementsByTagName("div");
  41.     for(var i=0;i<divs.length;i++){
  42.         btns[i].index=i;
  43.         btns[i].onclick=function () {
  44.             for(var i=0;i<divs.length;i++) {
  45.                 btns[i].className="";
  46.                 divs[i].className="";
  48.             }
  49.             this.className="active";
  50.             divs[this.index].className="show";
  51.         }
  52.     }
  53. </script>
  54. </body>
  55. </html>

方法二：点击什么，清除什么。记录当前点击的。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div{
  8.             width: 100px;
  9.             height: 100px;
  10.             background: red;
  11.             font:20px/2 "宋体";
  12.             color:#fff;
  13.             display: none;
  14.             margin-top: 20px;
  16.         }
  17.         button{
  18.             width: 100px;
  19.             line-height: 50px;
  20.             font-size:18px;
  21.             background: none;
  22.         }
  23.         .show{
  24.             display: block;
  25.         }
  26.         .active{
  27.             background: cornflowerblue;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32. <button class="active">选项卡一</button>
  33. <button>选项卡二</button>
  34. <button>选项卡三</button>
  35. <div class="show">内容一</div>
  36. <div>内容二</div>
  37. <div>内容三</div>
  38. <script>
  39.     var btns=document.getElementsByTagName("button");
  40.     var divs=document.getElementsByTagName("div");
  41.     var now=0;
  42.     for(var i=0;i<divs.length;i++){
  43.         btns[i].index=i;
  44.         btns[i].onclick=function () {
  45.             btns[now].className="";
  46.             divs[now].className="";
  47.             this.className="active";
  48.             divs[this.index].className="show";
  49.             now=this.index;
  50.         }
  51.     }
  52. </script>
  53. </body>
  54. </html>

4.模拟复选框

模拟复选框查看效果以及代码！！！！

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div{
  8.             width: 100px;
  9.             height: 100px;
  10.             border:1px solid black;
  11.             float: left;
  12.             margin-right: 10px;
  13.         }
  14.         .active{
  15.             background: cornflowerblue;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div></div>
  21.     <div></div>
  22.     <div></div>
  23.     <script>
  24.         var divs=document.getElementsByTagName("div");
  25.         console.log(divs);
  26.         var L=divs.length;
  27.         for(var i=0;i<L;i++){
  28.             // true表示没被点击
  29.             // false表示被点击了
  30.             divs[i].onoff=true;
  31.             divs[i].onclick=function () {
  32.                 if(this.onoff){//如果没被点击，则添加背景颜色
  33.                     this.className="active";
  34.                 }else{//如果点击了，则清空背景颜色
  35.                     this.className="";
  36.                 }
  37.                 this.onoff=!this.onoff;//只要点击了，就将此div的自定义属性值取反。
  38.             }
  39.         }
  40.     </script>
  41. </body>
  42. </html>

JS基础入门篇（四）—this的使用，模拟单选框，选项卡和复选框的更多相关文章

  1. JS基础入门篇（三十五）—面向对象（二）

    如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)

  2. FPGA基础入门篇(四) 边沿检测电路

    FPGA基础入门篇(四)--边沿检测电路 一.边沿检测 边沿检测,就是检测输入信号,或者FPGA内部逻辑信号的跳变,即上升沿或者下降沿的检测.在检测到所需要的边沿后产生一个高电平的脉冲.这在FPGA电 ...

  3. JS基础入门篇（二十七）—BOM

    虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...

  4. JS基础入门篇（二十四）—DOM（下）

    1.offsetLeft/offsetTop offsetLeft/offsetTop : 到定位父级节点的距离. <!DOCTYPE html> <html lang=" ...

  5. JS基础入门篇（三十四）— 面向对象（一）

    1.对象 对象的定义 : 对象 是 由 键值对 组成的无序集合. 创建对象两种方法 : 方法一 : 字面量方法 var obj = {name: "k"}; 方法二 : new O ...

  6. JS基础入门篇（四十三）—ES6（二）

    1.对象简洁表示法 原来写法 var name = "lzf"; var gender = "male"; var fn = function(){consol ...

  7. JS基础入门篇（二十四）—DOM（上）

    1.常用的节点类型,nodeType,attributes,childNodes. 1.元素节点 - 1 2.属性节点 - 2 3.文本节点 - 3 4.注释节点 - 8 5.文档节点 - 9 查看节 ...

  8. JS基础入门篇（六）— 数据类型

    1.数据类型 数据类型:我感觉就是对数据的种类进行分类.就好比把人分为儿童,青少年,中年,老年一样. 基础数据类型: Number(数字),String(字符串),Null(空),Undefined( ...

  9. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

随机推荐

  1. JS中$含义及用法

    $在JS中本身只是一个符号而异,在JS里什么也不是.但在JS应用库JQUERY的作者将之做为一个自定义函数名了,这个函数是获取指定网页元素的函数,使用非常之频繁,所以好多新手不知道,还以为$是JS的什 ...

  2. redis 集群新增节点，slots槽分配，删除节点， [ERR] Calling MIGRATE ERR Syntax error, try CLIENT (LIST | KILL | GET...

    redis reshard 重新分槽(slots) https://github.com/antirez/redis/issues/5029 redis 官方已确认该bug redis 集群重新(re ...

  3. 20190816 On Java8 第六章 初始化和清理

    第六章 初始化和清理 利用构造器保证初始化 在 Java 中,类的设计者通过构造器保证每个对象的初始化. 构造器名称与类名相同. 在 Java 中,对象的创建与初始化是统一的概念,二者不可分割. 方法 ...

  4. GD Library extension not available

    在后台文章上传封面时,遇到了这样一个错误 GD Library extension not available with this PHP installation Ubuntu Nginx 自己在本 ...

  5. [ARC083]Collecting Balls

    Description 有一个 \(n\times n\) 的矩阵,矩阵内有 \(2n\) 个球.对于 \(i \in [1,n]\) ,\((0,i) (i,0)\) 的位置各有一个启动后往右走/往 ...

  6. 2019Flutter面试题最新整理大全（含答案）

    一.前言2019年行将结束,也该规划一下自己的职业生涯了:是选择继续从事Android(Android的话已经火了几年了,现在算是进入寒冬了,需要考虑清楚)?还是学习新的跨平台开发Flutter技术? ...

  7. 洛谷 P1168 中位数（优先队列）

    题目链接 https://www.luogu.org/problemnew/show/P1168 解题思路 这个题就是求中位数,但是暴力会tle,所以我们用一种O(nlogn)的算法来实现. 这里用到 ...

  8. [原]__ASSEMBLY__的用途

    在Linux Kernel中有些constant需要被C code 跟 assembler共同使用 在用constant的時候,不能單方面給0x1000UL因為assembler無法看這東西. 但是C ...

  9. CSU 1092 Barricade

    1092: Barricade Time Limit: 1 Sec  Memory Limit: 32 MBSubmit: 240  Solved: 71[Submit][Status][Web Bo ...

  10. 双指针---有序数组的TWO SUM

      双指针思想,主要用于遍历数组,两个指针指向不同的元素,从而协同完成任务. 有序数组的 Two Sum Leetcode :167. Two Sum II - Input array is sort ...