经过这几日的学习，测试和摸索，算是了解了一些关于javascript 的相关知识吧。学习过程中做出了一些小DEMO，现总结一下实现这些DEMO的基本思路，如有不妥或更为简便的方法，还希望大神拍砖，共同进步。代码可直接复制引用。

demo1.选项卡：

在网站中应用选项卡是很多网站必不可少的效果，因为方便，简单，使用。可分块展示不同的内容链接，当鼠标点击不同按钮时，下面的DIV根据不同的点击显示不同的内容。要实现这样的一个选项卡，首先在body--->div中建立几个button按钮，并在下面建立相同个数的div，初始化第一个div（即：使它的display为block）;style初始化div和相应的button;然后写js脚本，根据一般步骤：取元素--->写事件---->测试。在这个案例中，首先得为每个按钮建立索引；将所有的button和div中的样式去除，再用this这个关键字，实现新的样式更换。

<!Doctype html>

<html xmlns=http://www.w3.org/1999/xhtml>

  <head>

<meta http-equiv=Content-Type content="text/html;charset=utf-8">

  <title>choice card</title>

  <style>

   #div1 .active {background:yellow;}

   #div1 div {width:200px;height:200px;background:#CCC;border:1px solid #999;display:none;}

  </style>

  <script language="javascript">

    window.onload=function()

    {

     var oDiv=document.getElementById('div1');

     var aBtn=oDiv.getElementsByTagName('input');

     var aDiv=oDiv.getElementsByTagName('div');

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

        aBtn[i].index=i;

        aBtn[i].onclick=function()

        {

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

          aBtn[i].className='';

          aDiv[i].style.display='none';

         }

        this.className='active';

        aDiv[this.index].style.display='block';

         };

     }

     };

  </script>

 </head>

 <body>

   <div id="div1">

    <input class="active" type="button" value="aaaa">

    <input type="button" value="bbbb">

    <input type="button" value="cccc">

    <input type="button" value="dddd">

    <div style="display:block;">1111</div>

    <div>2222</div>

    <div>3333</div>

    <div>4444</div>

</div>

 </body>

</html>

demo2.隔行变色：

通过基本的js中模运算，即：i%2==0来实现偶数行变色。本DEMO实现起来比较容易，首先在body中输入一些<ul><li></li><li></li><li></li><li></li></ul>，<li>越多越能看到明显的效果。接着，应用document.getElementsByTagName('li')，来获取标签li元素，判断之后，设置背景颜色，直接通过js实现不同的效果。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

  <head>

   <title> New Document </title>

   <meta name="Generator" content="EditPlus">

   <meta name="Author" content="">

   <meta name="Keywords" content="">

   <meta name="Description" content="">

  <script>

   window.onload=function(){

     var aLi=document.getElementsByTagName('li');

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

       {

         if(i%2==0)

           {

             aLi[i].style.background='#CCC';

           }

           else

           {

             aLi[i].style.background='';

           }

       }

   };

  </script>

  </head>

  <body>

   <ul>

     <li></li>

     <li></li>

     <li></li>

     <li></li>

     <li></li>

     <li></li>

     <li></li>

     <li></li>

     <li></li>

     <li></li>

     <li></li>

   </ul>

  </body>

 </html>

demo3.InnerHTML的使用：

通过点击button将文本框中的内容直接显示到DIV中。首先获取页面中的元素，然后直接用onclick事件（oDiv.innerHTML=oTxt.value;）将文本框中的文字或者HTML标签显示到div中。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

  <head>

   <title> setFont </title>

   <meta name="Generator" content="EditPlus">

   <meta name="Author" content="">

   <meta name="Keywords" content="">

   <meta name="Description" content="">

   <style>

   #div1 {width:200px;height:150px;border:1px solid black;}

   </style>

   <script>

    window.onload=function(){

      var oTxt=document.getElementById('txt1');

      var oBtn=document.getElementById('btn1');

      var oDiv=document.getElementById('div1');

      oBtn.onclick=function(){

         oDiv.innerHTML=oTxt.value;

      };

    }

   </script>

  </head>

  <body>

 <input type="text" id="txt1"/>

 <input id="btn1" type="button" value="SetFont">

 <div id="div1">

 </div>

  </body>

 </html>

demo4.延时提示框：

对于延时提示框的实现，需要知道计时器的作用和用法。本例实现的是利用当鼠标在某个div上时，另外的一个div显示，当鼠标移开的时候，div过一会儿才消失。代码实现过程，首先需要两个div，设置初始化的样式，选择将其中一个div的display设置为none。再用js实现鼠标的移入移除时，计时器控制div的变化。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <style>

  #div {float:left; margin:10px;}

  #div1 {width:50px;height:50px;background:red;}

  #div2 {width:250px;height:180px;background:#CCC;display:none;}

  </style>

  <script>

    window.onload=function(){

      var oDiv1=document.getElementById('div1');

      var oDiv2=document.getElementById('div2');

      var timer=null;

       oDiv2.onmouseover=oDiv1.onmouseover=function(){

       clearTimeout(timer);

       oDiv2.style.display='block';

             };

      oDiv2.onmouseout=oDiv2.onmouseout=function()    {

          timer=setTimeout(function(){

           oDiv2.style.display='none';

          },200);

        };

    };

  </script>

 </head>

 <body>

  <div id="div1"></div>

  <div id="div2"></div>

 </body>

</html>

还有部分DEMO的分析和总结在《决战JS（二）》。

决战JS的更多相关文章

  1. 决战JS（二）

    紧接着上次的<决战JS>,分析总结一些比较实用的DEMO与新手分享,望大神拍砖. demo5.点击隐藏: 要实现这个功能只需要知道在onclick事件中加入对父节点的样式dislay设置为 ...

  2. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  3. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  4. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  6. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  7. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  8. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  9. JS正则表达式常用总结

    正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...

随机推荐

  1. 【整理】--【GPIO】OK6410

    S3C6410的GPIO引脚相对来说比较多,而且大部分引脚都具有多重复用功能,如何在linux上用最简单的方式来控制GPIO这需要我们好好研究一下底层的代码了,其实方法有很多种,鉴于在操作系统端控制G ...

  2. Docker Registry搭建私有仓库

    利用Registry镜像搭建Docker私有仓库遇到了很多坑,说来也是找到的资料都是杂而不精的东西,所以也没少走了弯路,现在回过头看去感觉好多坑还是别人给挖的··· 不过努力的最终结果还是好的,因为找 ...

  3. linux 2.6 驱动笔记（一）

    本文作为linux 2.6 驱动笔记,记录环境搭建及linux基本内核模块编译加载. 环境搭建: 硬件:OK6410开发板 目标板操作系统:linux 2.6 交叉编译环境:windows 7 + v ...

  4. 如何用MediaCapture解决二维码扫描问题

    二维码扫描的实现,简单的来说可以分三步走:“成像”.“截图”与“识别”. UWP开发中,最常用的媒体工具非MediaCapture莫属了,下面就来简单介绍一下如何利用MediaCapture来实现扫描 ...

  5. 《C#图解教程》读书笔记之四：类和继承

    本篇已收录至<C#图解教程>读书笔记目录贴,点击访问该目录可获取更多内容. 一.万物之宗:Object (1)除了特殊的Object类,其他所有类都是派生类,即使他们没有显示基类定义. ( ...

  6. [.net 面向对象编程基础] (15) 抽象类

    [.net 面向对象编程基础] (15) 抽象类 前面我们已经使用到了虚方法(使用 Virtual修饰符)和抽象类及抽象方法(使用abstract修饰符)我们在多态一节中说到要实现类成员的重写必须定义 ...

  7. 用VS添加引用dll也会出错？你遇到过吗？

    使用C#开发,我们经常引用各种类库,我们通常是在Visual Studio中引用上面单击右键,添加引用...,浏览...,选择dll,确定,但是这样做会不会有什么问题呢?当然,有人到现在为止没有碰到过 ...

  8. Window Ghosting

    最近工作中遇到Window Ghosting这个问题, 感觉挺有意思,这里简单记录下. 在XP时代我们的程序没有响应后只能通过任务管理器强制杀掉,但是Vista之后情况变了, 我们仍然可以拖动失去响应 ...

  9. 可拖动的DIV续

    之前写过一篇可拖动的DIV讲如何实现可拖动的元素,最后提出了几点不足,这篇文章主要就是回答着三个问题 1. 浏览器兼容性 2. 边界检查 3. 拖动卡顿.失灵 先附上上次代码 <!DOCTYPE ...

  10. HTML+CSS学习笔记

    1,html里的实际有6个<hn>标记,从<h1>到<h6>,字体由大到小. 2,em标签表示斜体. 3,<p>标签是换一个段落,<br>标 ...