开头说这个常用原理性样例，大家可能不太清楚，这篇文章主要是针对实际开发中常用的一些代码分析，主要是针对表单处理方法的一些资料，推荐大家收藏

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

     
 
 
 
序列号
用户名
年龄
 
 
alex
19
 
alex
19
 
alex
19
 
alex
19

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

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

    
 
男
女
女司机
<!--radio = document.getElementsByTagName('input') [​, ​, ​] radio[1] ​ xo = radio[1] ​ xo.value "11" xo.checked false xo.checked = true true-->

案例三：克隆

    
333 123123
 1  2

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

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

案例五：获取输入框内的值三种方法

      
 
红烧肉
红烧肘子
红烧鱼

      
 
红烧肉
红烧肘子
红烧鱼

方法二：查询

      
 
红烧肉
红烧肘子
红烧鱼

方法三：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; /*visibility: hidden;*/ 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

      sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

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

以上就是Javascript表单特效之十大常用原理性样例代码大总结的详细内容，更多请关注本站其它相关文章！