一、input.value所有值都是string

二、变量和属性
var index=10;//变量
var arr=[];//数组
arr.index=20;//index为自定义属性，只能在arr下使用
alert(arr.index);

三、判断用户输入事件：oninput

四、多分支语句switch
语法格式
switch(参数){
case:参数1：
语句；
break；//退出
case:参数2：
语句；
break；//退出
...
default://默认
语句；
}

五、下拉菜单事件
sele.onchange=function(){}

案例：

1、多个Tab切换封装

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Tab切换封装</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         .box{

             width: 405px;

             height: 400px;

             border:1px solid #c1c1c1;

             margin: 100px auto;

             /*overflow: hidden;*/

         }

         .mt span{

             display: inline-block;

             width: 80px;

             height: 30px;

             text-align: center;

             line-height: 30px;

             background-color: #ff4400;

             border-right: 1px solid #c1c1c1;

             cursor: pointer;

         }

         .mt .current{

             background-color: #3B90CD;

         }

         .mb li{

             width: 100%;

             height: 370px;

             background-color: #3B90CD;

             list-style: none;

             display: none;

         }

         .mb .show{

             display: block;

         }

     </style>

     <script>

         window.onload=function(){

             function tab(obj){

                 //获取每个盒子的id

                 var target=document.getElementById(obj);

                 //获取对应id下的标签

                 var spans=target.getElementsByTagName("span");

                 var lis=target.getElementsByTagName("li");

                 for(var i=0;i<spans.length;i++){

                     spans[i].index=i;//设置索引号

                     spans[i].onmouseover=function(){

                         for(var j=0;j<spans.length;j++){

                             //清除所有的 类

                             spans[j].className="";

                             lis[j].className="";

                         }

                         //显示当前点击的类

                         this.className="current";

                         lis[this.index].className="show";//li利用spans.index,span和li对应起来

                     }

                 }

             }

             tab("one");

             tab("two");

             tab("three");

         }

     </script>

 </head>

 <body>

 <div class="box" id="one">

     <div class="mt">

         <span class="current">新闻</span><span>体育</span><span>娱乐</span><span>科技</span><span>视频</span>

     </div>

     <div class="mb">

         <ul>

             <li class="show">新闻模块</li>

             <li>体育模块</li>

             <li>娱乐模块</li>

             <li>科技模块</li>

             <li>视频模块</li>

         </ul>

     </div>

 </div>

 <div class="box" id="two">

         <div class="mt">

             <span class="current">新闻</span><span>体育</span><span>娱乐</span><span>科技</span><span>视频</span>

         </div>

         <div class="mb">

             <ul>

                 <li class="show">新闻模块</li>

                 <li>体育模块</li>

                 <li>娱乐模块</li>

                 <li>科技模块</li>

                 <li>视频模块</li>

             </ul>

         </div>

 </div>

 <div class="box" id="three">

             <div class="mt">

                 <span class="current">新闻</span><span>体育</span><span>娱乐</span><span>科技</span><span>视频</span>

             </div>

             <div class="mb">

                 <ul>

                     <li class="show">新闻模块</li>

                     <li>体育模块</li>

                     <li>娱乐模块</li>

                     <li>科技模块</li>

                     <li>视频模块</li>

                 </ul>

             </div>

 </div>

 </body>

 </html>

运行结果：

2、三种循环语句

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>三个循环语句</title>

     <script>

         window.onload=function(){

             //for循环

             var sum=0;

             for(var i=1;i<=100;i++){

                 sum+=i;

             }

             console.log(sum);

             //while循环

             var j=1;

             var sum1=0;

             while(j<=100){

                 sum1+=j;

                 j++;

             }

             console.log(sum1);

             //do-while循环，至少执行一次

             var k=1;

             var sum2=0;

             do{

                sum2+=k;

                 k++;

             }

             while(k<=100)

             console.log(sum2);

         }

     </script>

 </head>

 <body>

 </body>

 </html>

3、多分支switch语句

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>多分支语句switch</title>

     <script>

         window.onload=function(){

             //获取元素

             var txt=document.getElementById("txt");

             var btn=document.getElementById("btn");

             btn.onclick=function(){

                var val=txt.value;

                 switch(val){

                     case "苹果":

                         alert("苹果的价格是：5元");

                         break;

                     case "香蕉":

                         alert("香蕉的价格是：2元");

                         break;

                     case "梨":

                         alert("梨的价格是：1.5元");

                         break;

                     case "葡萄":

                         alert("葡萄的价格是：3元");

                         break;

                     default:

                         alert("今天没进货");

                 }

             }

         }

     </script>

 </head>

 <body>

 <input type="text" id="txt"><button id="btn">查询价格</button>

 </body>

 </html>

4、下拉菜单

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         body{

             background-image: url(images/chun1.jpg);

         }

     </style>

     <script>

         window.onload=function(){

             //获取元素

             var sele=document.getElementById("sele");

             sele.onchange=function(){

                 //alert(this.value);

                 switch(this.value){

                     case "1":

19                         document.body.style.backgroundImage="url(images/chun1.jpg)";

20                             break;

                     case "2":

                         document.body.style.backgroundImage="url(images/xia1.jpg)";

                             break;

                     case "3":

                         document.body.style.backgroundImage="url(images/qiu1.jpg)";

                             break;

                     case "4":

                         document.body.style.backgroundImage="url(images/dong1.jpg)";

                             break;

                     default:

                         document.body.style.backgroundImage="url(images/chun1.jpg)";

                 }

             }

         }

     </script>

 </head>

 <body>

 <select name="" id="sele">

     <option value="1">春意绵绵</option>

     <option value="2">夏日炎炎</option>

     <option value="3">秋声瑟瑟</option>

     <option value="4">白雪皑皑</option>

 </select>

 </body>

 </html>

第28天：js-Tab栏切换封装函数的更多相关文章

  1. js tab栏切换

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  2. 原生js tab 栏切换

    <div id="box"> <div> <button>按钮1</button> <button>按钮2</bu ...

  3. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  4. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  5. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  6. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  7. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  8. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  9. [javascript]switchTab:仿腾讯首页Tab栏切换js插件

    腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...

随机推荐

  1. Git使用列表(四)

    最近,由于自己的一个项目,导致自己的关于自己的要使用Git的很多的命令,突然发现自己的git的还有许多不知道的东西 不过,在这个工作的过程中,也发现自己的一些很大的缺陷,就是自己题目理解力有限,明明就 ...

  2. hive整合sentry，impala，hue之后权限管理操作

    7.Hive授权参考(开启sentry之后,对用户授权用不了,只能针对用户组,grant role testrole to user xxxxxxx; ) 7.1:角色创建和删除 create rol ...

  3. 2019年1月23日，好像是这个日子，RF发布了 1.7.3.1 支持python3.6以上了，安装成功。

    安装步骤:(win10 家庭版 64) 1.安装Python3.7.2,记得勾选添加Path 2.pip install robotframework 3.pip install wxPython 4 ...

  4. DirectX11与DirectX12在古墓丽影暗影中的表现

    最近在关注这两个图形API,因为感兴趣,也算是初学者. 以下内容仅供参考. 使用古墓丽影暗影游戏,分别对这两个进行比较,得出的结论如下图(此笔记本散热很差,更改散热应该比下图结果好些): 首先看可以很 ...

  5. Git 与 GitHub

    Git 这个年代,不会点Git真不行啦,少年别问问什么,在公司你就知道了~ Git是一个协同开发的工具,主要作用是进行版本控制,而且还能自动检测代码是否发生变化. 一. 安装 下载地址:https:/ ...

  6. Android Test和Logcat

    一 测试相关概念 是否有源码 黑盒测试: 测试工具 白盒测试: 对所有的源码特别熟悉 对特定的代码进行测试 都是编程 时间 单元测试(程序员) 模块测试 集成测试 系统测试 回归测试(改bug) 压力 ...

  7. leetcode-二叉树的层次遍历（Java）

    给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如:给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 7 返回其层 ...

  8. Caching Data in the Architecture (C#)

    http://www.asp.net/web-forms/tutorials/data-access/caching-data/caching-data-in-the-architecture-cs ...

  9. Python3 数据类型-集合

    在Python中集合set是基本数据类型的一种,它有可变集合(set)和不可变集合(frozenset)两种.创建集合set.集合set添加.集合删除.交集.并集.差集的操作都是非常实用的方法. 集合 ...

  10. vue移动音乐app开发学习（二）：页面骨架的开发

    本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...