javascript封装的函数

Posted 2020-09-26 清风白水

  1 js首先需要的函数
  2 
  3 window.onload = function () {
  4             function $(id){
  5                 return document.getElementById(id);
  6             }
  7             function $arr(array){
  8                 return document.getElementsByTagName(array);
  9             }
 10             function hide(id) {
 11                 $(id).style.display = "none";
 12             }
 13             function show(id) {
 14                 $(id).style.display = "block";
 15             }
 16 
 17     
 18         }
 19 
 20 *************************************************************************************************************
 21 
 22 1.script加载的函数
 23 window.onload = function () {
 24             
 25         }
 26 
 27 *************************************************************************************************************
 28 2.封装的id函数
 29 
 30 function $(id){
 31                 return document.getElementById(id);
 32             }
 33 调用id  $("调用的id")
 34 
 35 *************************************************************************************************************
 36 
 37 3.提高用户体验——文本框自动获得焦点
 38 $("txt").focus();
 39 文本框<input type="text" id="txt"/>
 40 
 41 *************************************************************************************************************
 42 
 43 4.提高用户体验——鼠标经过文本框可以全选，便于删除文字
 44         $("sele").onmouseover = function () {
 45             this.select();
 46         }
 47 文本框<input type="text" id="sele"/>
 48 
 49 *************************************************************************************************************
 50 
 51 5.封装的数组id
 52 
 53             function $arr(array){
 54                 return document.getElementsByTagName(array);
 55             }
 56 调用$arr("调用的数组比如li i标签")
 57 *************************************************************************************************************
 58 
 59 6.自定义平均值函数
 60 
 61         function avg(array){
 62             var sum=0;
 63             var len=array.length;
 64             for(var i=0;i<len;i++){
 65                 sum+=array[i];
 66             }
 67             return sum/len;
 68         }
 69 *************************************************************************************************************
 70 
 71 7.全选取消函数
 72             function all(flag){
 73                 for(var i=0;i<inputs.length;i++){
 74                     inputs[i].checked=flag;
 75                 }
 76             }
 77 *************************************************************************************************************
 78 
 79 8.封装的类函数【主流浏览器（谷歌，火狐，IE9以上的包括IE9）都支持document.getElementsByClassName()函数，IE678不支持】
 80 
 81 function getClass(classname,id){
 82 //                主流浏览器带id
 83                 if(document.getElementsByClassName){
 84                     if(id){
 85                         var eleId=document.getElementById(id);
 86                         return eleId.getElementsByClassName(classname);
 87                     }
 88 //                不带id
 89                     else{
 90                         return document.getElementsByClassName(classname);
 91                     }
 92                 }
 93 
 94 //                最哏的IE678浏览器 带id
 95                 if(id){
 96                     var eleId=document.getElementById(id);
 97                     var dom=eleId.getElementsByTagName("*");
 98                 }
 99 //                不带id
100                 else {
101                     var dom=document.getElementsByTagName("*");
102                 }
103                 var arr=[];
104                 for(var i=0;i<arr.length;i++){
105                     var txtarr=dom[i].className.split(" ");
106                     for(var j=0;j<txtarr.length;j++){
107                         if(txtarr.className == classname){
108                             arr.push(dom[j]);
109                         }
110                     }
111                 }
112             }
113 *************************************************************************************************************
114 
115 9.隐藏显示函数
116 
117             function hide(id) {
118                 $(id).style.display = "none";
119             }
120             function show(id) {
121                 $(id).style.display = "block";
122             }
123 *************************************************************************************************************