夜光带你走进 前端工程师（三十三 jS ）

最新推荐文章于 2021-06-09 22:12:50 发布
最新推荐文章于 2021-06-09 22:12:50 发布
阅读量157 收藏
点赞数
分类专栏： My thoughts 前端工程师 JS核心技术 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41987706/article/details/90710589
版权

夜光序言：

 

 

 

 

善待你遇到的每一个人，向他们微笑。

你不知道他们正在经历什么，也许他们今天正需要你的微笑，並会把它珍藏。

 

 

 

 

 

 

 

正文：

 

<script>
    window.onload = function(){
          var btns = document.getElementsByTagName("button");  //  getElementsByTagName  这里用到一个集合
          var inputs = document.getElementById("bottom").getElementsByTagName("input");  //这是高端操作
        // bottom里面的input
          btns[0].onclick = function(){    //btns[0]代表的是全选这个按钮
              for(var i=0;i<inputs.length;i++){
                  inputs[i].checked = true;   //选中表单
              }

          };
          btns[1].onclick = function(){
              for(var i=0;i<inputs.length;i++){
                  inputs[i].checked = false;
              }
          }
    }
</script>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
    window.onload = function(){
          var btns = document.getElementsByTagName("button");  //  getElementsByTagName  这里用到一个集合
          var inputs = document.getElementById("bottom").getElementsByTagName("input");  //这是高端操作
        // bottom里面的input
          btns[0].onclick = function(){    //btns[0]代表的是全选这个按钮
              for(var i=0;i<inputs.length;i++){
                  inputs[i].checked = true;   //选中表单
              }

          };
          btns[1].onclick = function(){
              for(var i=0;i<inputs.length;i++){
                  inputs[i].checked = false;
              }
          };
          btns[2].onclick = function(){
              for(var i=0;i<inputs.length;i++){
                  if (inputs[i].checked == true)   //这边是双等号  注意细节
                  {
                      inputs[i].checked = false;
                  }
                  else
                  {
                      inputs[i].checked = true;
                  }
              }
          }
    }
</script>
<body>
<!--//上下两个盒子   因为样式问题-->
<div id="top">
    <button>全选</button>
    <button>清楚</button>
    <button>反选</button>
</div>
<div id="bottom">
    <ul>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
        <li>选项：<input type="checkbox"></li>
    </ul>
</div>
</body>
</html>

 

//以上就是完整的代码   帅气

 

全选反选  结束

                              夜光

 

相似的可以封装

全选和 取消  函数  【这里用到封装】

一元运算符： a++  b++ +a  -a

二元运算符：a+b  a>=b

三元运算符： 表达式？ 结果1：结果2    等价于 if else

如果表达式为真，返回结果1

如果表达式为假，返回结果2

 

If(3>5) {alert(“11”)} else{alert(22)}

3>5?alert(11);alert(22)

 

 

 

排他思想

                     夜光

 

1.4 排他思想

要提一提李世民【好好复习】

首先干掉所有人   剩下自己

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .king{
            background-color: beige;
        }
    </style>
</head>
<script>
    window.onload = function(){
        var btns = document.getElementsByTagName("button");
        for(var i = 0;i<btns.length;i++)
        {
            btns[i].onclick = function(){
                this.className = "king";
            }
        }



    }
</script>
<body>
<button>游戏设计</button>

<button>动漫设计</button>

<button>商业设计</button>

<button>UI设计</button>

<button>其他</button>

</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .king{
            background-color: beige;
        }
    </style>
</head>
<script>
    window.onload = function(){
        var btns = document.getElementsByTagName("button");
        for(var i = 0;i<btns.length;i++)
        {
            btns[i].onclick = function(){
                /*this.className = "king";*/
                //点击之后 首先干掉别人
                for(var j = 0;j<btns.length;j++){
                    btns[j].className = "";
                }
                //剩下自己
                this.className = "king";
            }
        }



    }
</script>
<body>
<button>游戏设计</button>

<button>动漫设计</button>

<button>商业设计</button>

<button>UI设计</button>

<button>其他</button>

</body>
</html>

 

弹出当前的索引号             【十分关键   核心必备】

                               夜光

 

 

如何弹出当前索引号  这十分关键

 

 

可以做出这种效果：当前索引号

 

 

1.5  变量和属性   【穿插进来说明   便于理解当前索引号如何调用】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var index = 10;   //变量   谁都可以使用
    var arr = [];      //数组
    arr.index = 20;    //自定义属性   只可以在arr中使用
    alert(arr.index);
</script>
</body>
</html>

 

<script>
    window.onload = function(){
        var btns = document.getElementsByTagName("button");
        for(var i = 0;i<btns.length;i++)
        {
            btns[i].index = i;   //调用当前索引号准备工作   属性   给每一个button定义了一个index属性
            btns[i].onclick = function(){
                /*this.className = "king";*/
                //点击之后 首先干掉别人
                alert(this.index);    //调用当前索引号准备工作   属性   给每一个button定义了一个index属性

                for(var j= 0;j<btns.length;j++){
                    btns[j].className = "";
                }
                //剩下自己
                this.className = "king";     //运用this语句  来实现
            }
        }



    }
</script>

 

//充分理解 这个操作   十分关键    夜光

 

变量：独立存在  自由自在的

 

属性和方法： 属于某一个对象的属性和方法

btns[i].index = i;   //调用当前索引号准备工作   属性   给每一个button定义了一个index属性

index只有btns[i]才有   帅气

 

tab栏切换效果                【十分关键】

                             夜光

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 400px;
            height: 40px;
            margin: 100px auto;
            border: 1px solid #cccccc;
        }
        .bottom div{
            width: 100%;
            height: 300px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="top">
        <button>海贼王</button>
        <button>火影忍者</button>
        <button>东京食尸鬼</button>
        <button>名侦探柯南</button>
    </div>
    <div class="bottom">
        <div>一号盒子</div>
        <div>二号盒子</div>
        <div>三号盒子</div>
        <div>四号盒子</div>
        <div>五号盒子</div>
    </div>

</div>
</body>
</html>

 

深入优化：

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 400px;
            height: 40px;
            margin: 100px auto;
            border: 1px solid #cccccc;
        }
        .bottom div{
            width: 100%;
            height: 300px;
            background-color: aquamarine;
            display: none;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="top">
        <button>海贼王</button>
        <button>火影忍者</button>
        <button>东京食尸鬼</button>
        <button>名侦探柯南</button>
    </div>
    <div class="bottom">
        <div style="display: block">一号盒子</div>
        <div>二号盒子</div>
        <div>三号盒子</div>
        <div>四号盒子</div>
        <div>五号盒子</div>
    </div>

</div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

GeniusTeam-夜光
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML荧光文字动态效果,利用HTML5实现文字放射发光动画特效
weixin_34283655的博客
06-03 1009
特效描述：利用HTML5实现 文字放射发光 动画特效。利用HTML5实现文字放射发光动画特效代码结构1. HTML代码var txt = "51前端";var txtH = 100;var font = "sans-serif";var bg = "#000";var rayColor1 = "#e0f7fa";var rayColor2 = "#18ffff";var fade = 1000;v...
循环遍历加监听的问题
Unseen__Blade的博客
10-09 562
1 用var失败的原因 var btns = document.getElementsByTagName('button'); for(var i = 0;i<btns.length;i++){ btns[i].onclick = function () { alert(i); } } 点击监听事件是异步执行的，当点击按钮执行相应函数之前，同步任务(循环)已经执行结束，此时在全局作用域下的 i 已...
Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式
12-05 216
方法一：使用document对象查找所有的按钮 [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 //按照dom的方式添加事件处理 function BindByDom() { try{ var htmlBtns = document.getE...
JS获取button元素实现点击事件
热门推荐
WHY_222的博客
04-04 2万+
要实现将文本框中的内容通过点击创建按钮把内容显示在下面，代码如下在这个代码中，如果想获取button标签的话就应var oBtn=document.getElementsByTagName('button')[0];不然效果不能出来，...
夜光带你走进 前端工程师（三十 jS ）
夜光的博客
05-31 162
夜光序言： 也许一个人在真正无可奈何的时候，除了微笑，也只好微笑了。 正文： JS 简单验证表单 夜光 1.8 ： this(自己的) 指的是本身 This 主要是指事件的动用者 className 类名 ...
夜光带你走进 前端工程师（三十六 jS ）
夜光的博客
05-31 165
夜光序言： 忽然之间 你忽略的我忽略的所有细节 当初的猜疑好奇爱恨痴嗔却已走远 忽然之间 你发现的我发现的所有改变 当初的微笑眼泪喜怒哀乐都已抛在昨天 我没想过再遇见的时刻 所有回忆 青丝成雪 忽然之间 你忽略的我忽略的所有细节 当初的猜疑好奇爱恨痴嗔却已熹微 忽然之间 你发现的我发现的所有改变 当初的微笑当初的微...
夜光带你走进 前端工程师（三十一 jS ）
夜光的博客
05-31 181
夜光序言： 与你在这最后的夏天 抹不去的思念 斜阳里的微笑 渐行渐远 你总是这样微微笑着仿佛在说：“我在身边……” 正文： Js第三天 夜光 帅气： 01 淘宝搜索框 夜光 1.2 判断用户输入...
夜光带你走进 前端工程师（三十二 jS ）
夜光的博客
05-31 184
夜光序言： 有一种孤独是，想笑却不能笑，想哭却不能哭，总有一个声音在耳边提醒着你：要克制，要坚强，要让他们觉得你不一样。你做到了，旁人投来了艳羡和赞许的目光，你微微笑，微微发颤，微微地有一种只有自己知道的孤独感。 正文： 隔行变色 CEO 夜光...
夜光带你走进 微信小程序开发（五）擅长的领域
01-03
夜光序言：   不管与你的路有多苦擦干眼泪告诉自己不能哭不怕谁说我是个错误只要你我不放弃永不认输。   正文：  以道御术 / 以术识道 有些东西，如果我们自定义的话，就会和其他小程序风格不一致了~ ...
Python第三方库openpyxl
06-20
openpyxl库文档资料
Python酷库之旅-第三方库Pandas(005)
最新发布
07-05
Pandas_read_excel函数数据准备
行业资料-交通装置-一种带夜光和刹车警示功能的电动车.zip
08-24
行业资料-交通装置-一种带夜光和刹车警示功能的电动车.zip
前端web学习
09-13
例如，React.js是Facebook推出的用于构建用户界面的JavaScript库，它的虚拟DOM和组件化思想改变了前端开发模式。Vue.js以其易学易用、性能优异的特点，也受到广大开发者喜爱。Angular则是Google推出的全能型框架，它...
html5 制作 蓝色按钮,一组黑色质感的蓝色荧光3D按钮和单选按钮
weixin_39852647的博客
06-09 1131
这是一组非常漂亮的纯CSS3黑色质感的蓝色荧光3D按钮和单选按钮特效。这组按钮中有三个按钮，一组单选按钮和一个很酷的超级按钮。它们都是黑色的样式，并带有蓝色的荧光，使它们看起来具有一些科幻色彩。制作方法HTML结构这些按钮的HTML结构非常简单，按钮使用元素来制作，单选按钮使用和的组合来制作。Buttons!ButtonHoverActiveRadio Buttons!876The Super B...
夜光带你走进 前端工程师（七）
夜光的博客
05-27 335
夜光序言： 对心灵如水，既柔顺又稳重，既驯服又坚强，可弯而不可折的人，我会永远温柔和真诚。 正文： 1：切片 一般是用ps ,firework , 我说的话是用ps来进行 减少网页加载时间，制作动态效果，优化图像 2：制作切片的工具，准备工作 快捷键c 【ps】 第三个才是，帅气 一：另存psd ...
夜光带你走进 前端工程师（三十七 jS ）
夜光的博客
06-01 337
夜光序言： 如果有人要伤害你，就请他先从我的尸体上踏过去 斩草不除根，春风吹又生 就算粉身碎骨我也要救出你，拦我者，必诛之 我不会让他伤害你的，如果我无法获胜，我……有八成的把握让他和我一起死 正文： 复习 1. 数组 看电影 电影院 座位 ...
夜光带你走进 前端工程师（二十九 jS ）
夜光的博客
05-31 332
夜光序言： Do not worry about smiling, my mouth hardly ever smiles, but it doesn’t mean I’m not smiling in my brain. 别为微笑而忧虑，我也很少在表面上微笑，但这并不表示我没在心里微笑。 正文： ...
DMSP/OLS与SNPP/VIIRS夜光数据解析及应用
"夜光数据是指通过卫星传感器捕捉到的地球表面夜间灯光的遥感数据，主要用于监测人类活动和城市化进程。本资料主要涵盖了DMSP/OLS和SNPP/VIIRS两种夜光数据及其应用领域。DMSP/OLS数据来源于美国的国防气象卫星计划...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值