Javascript表单特效之十大常用原理性样例代码大总结

案例一：全选等
运用知识点：ondblclick=（）| onclick | 寻找标签属性及判断和函数的应用

  
    
    
  
  
    
      
      
      
    
    

      

 

   
序列号
   
用户名
   
年龄
 
      
      

 

   

   
alex
   
19
 
 

   

   
alex
   
19
 
 

   

   
alex
   
19
 
 

   

   
alex
   
19
 
      
    
 
    
  

案例二：单选
要求只能选一个，并且用js可以改变其选项

运用知识点：getElementsByTagName | checked | 互斥

  
    
    
  
  
    

      
男
      
女
      
女司机
    
    
  

案例三：克隆

  
    
    
  
  
    
333
      123
      123
    
    
      1  
      2
      
    
    
  

案例四：自定义属性，获取自定义属性并改变标签内容

  
    
    
  
  
    
    
    //可以构造出一种选择器
    
    
    
      
      123
      123
      123
      123
      123
      123
      123
      123
      123
    
    

  
  


  
    
  
  
  
  
  
    

      
红烧肉
      
红烧肘子
      
红烧鱼
    
  
  

方法二：查询

  
  


  
    
  
  
  
  
  
    

      
红烧肉
      
红烧肘子
      
红烧鱼
    
  
  

方法三：id

案例六：

    //'beforeBegin'、'afterBegin' 'beforeEnd''afterEnd'

  
    
    
  

  
    

    
    
    
    
    
      

 
红烧肉
 
红烧肘子
 
红烧鱼
      
    
    
  

  
    
    
  

  
    

    
    
    
    
    
      

 
红烧肉
 
红烧肘子
 
红烧鱼
      
    
    

  

  
    
    
  
  
    
      
      
    
    
      

 
alex
 
eric
      
    
    
    

案例七：

  
    
    
    
      input{
 height: 40px;
      }
      .gg{
 color: gray;
      }
      .bb{
 color: black;
      }
    
  
  
    
    
当鼠标进入是，移除内容
    
当输入表退出时，添加内容
    
    
    
  

案例八：头部菜单

  
    
    
    
      .pg_top .menu {
 background-color: gold;
 width: 400px;
 height: auto;
 position: absolute;
 left: 200px;
      }
      
      .item {
 float: left;
 margin: 10px 0;
 padding: 0 20px;
 font-size: 25px;
      }
      
      .content {
 position: absolute;
 left: 200px;
 top: 58px;
 background-color: burlywood;
 width: 400px;
 height: 200px;
      }
      
      .hide {
 display: none;
      }
      
      .bk {
 background-color: greenyellow;
      }
    
  

  
    
      
 十八里店
 簋街
 后海
      
      
 烤全羊
 麻辣龙虾
 相约酒吧
      
    
    
  

  
    
    
    
    ul{
      list-style: none;
      padding: 0;
      margin: 0;
    }
    ul li{
      float: left;
      background-color: #2459a2;
      color: white;
      padding: 8px 10px;
    }
    .clearfix:after{
      display: block;
      value:'111';
      content: '.';
      height: 0;
      
      clear: both;
    }
 .hide{
      display: none;
    }
 .tab-menu .title{
      background-color: #dddddd;
    }
 .tab-menu .title .active{
      background-color: white;
      color: black;
    }
 .tab-menu .content{
      border: 1px solid #dddddd;
      min-height: 150px;
    }
  
  
  
    
      
 
   

     
十八里店
     
簋街
     
十刹海
   
 
 
   烤羊腿
   >油焖小龙虾
   >香甜鸡尾酒
   
 
      
 
    
    
  

案例九：返回顶部
主要知识点：onscroll 和document.body.scrollTop;

  
    
    
    
      .go-top{
 position: fixed;
 right: 20px;
 bottom: 19px;
 width: 40px;
 height: 40px;
 background-color: darkgoldenrod;
 color: white;
      }
      .hide{
 display: none;
      }
    
  
  
    
      asdfafdasdf
      
    
    
      返回顶部
      
    
    
  

 案例十：
主要知识点：

//scroll 滚动；卷轴的意思
// scrollTop: 滚动条距离顶部高度
// scrollHeight: 文档高度:自身+padding
// clientTop: 边框高度
// clientHeight: 当前范围可视的高度:自身 + padding
//offset 印刷的意思
// offsetTop: 当前标签距离"顶部"的高度(body)
// 如果他的上一级没有postion,如果有则按照position的标签为主
// offsettHeight: 自身范围的高度:自身+padding+border

  
    
    
  
  
    
    
      
 
   sdfsdfsdfsdfsdfsdfsdfsdf
   sdfsdfsdfsdfsdfsdfsdfsdf
   sdfsdfsdfsdfsdfsdfsdfsdf
   sdfsdfsdfsdfsdfsdfsdfsdf
   sdfsdfsdfsdfsdfsdfsdfsdf
   sdfsdfsdfsdfsdfsdfsdf
   sdfsdfsdfsdfsdfsdfsdfsdf
   sdfsdf
 
      
    
    
  

好了，暂时就介绍到这里希望大家多写多练，主要是其中的逻辑，当然现在很多人都开始使用jquery了，大家也多注意。