这些都挺不错的,如果有新手不会的可以看一下,简单易懂。

js首先需要的函数

window.onload = function () {
function $(id){
return document.getElementById(id);
}
function $arr(array){
return document.getElementsByTagName(array);
}
function hide(id) {
$(id).style.display = "none";
}
function show(id) {
$(id).style.display = "block";
}

    }

1.script加载的函数
window.onload = function () {

    }

2.封装的id函数

function $(id){
return document.getElementById(id);
}
调用id $("调用的id")


3.提高用户体验——文本框自动获得焦点
$("txt").focus();
文本框<input type="text" id="txt"/>


4.提高用户体验——鼠标经过文本框可以全选,便于删除文字
$("sele").onmouseover = function () {
this.select();
}
文本框<input type="text" id="sele"/>


5.封装的数组id

        function $arr(array){
            return document.getElementsByTagName(array);
        }

调用$arr("调用的数组比如li i标签")


6.自定义平均值函数

    function avg(array){
        var sum=0;
        var len=array.length;
        for(var i=0;i<len;i++){
            sum+=array[i];
        }
        return sum/len;
    }

7.全选取消函数
function all(flag){
for(var i=0;i<inputs.length;i++){
inputs[i].checked=flag;
}
}


8.封装的类函数【主流浏览器(谷歌,火狐,IE9以上的包括IE9)都支持document.getElementsByClassName()函数,IE678不支持】

function getClass(classname,id){
// 主流浏览器带id
if(document.getElementsByClassName){
if(id){
var eleId=document.getElementById(id);
return eleId.getElementsByClassName(classname);
}
// 不带id
else{
return document.getElementsByClassName(classname);
}
}

// 最哏的IE678浏览器 带id
if(id){
var eleId=document.getElementById(id);
var dom=eleId.getElementsByTagName("");
}
// 不带id
else {
var dom=document.getElementsByTagName("
");
}
var arr=[];
for(var i=0;i<arr.length;i++){
var txtarr=dom[i].className.split(" ");
for(var j=0;j<txtarr.length;j++){
if(txtarr.className == classname){
arr.push(dom[j]);
}
}
}
}


9.隐藏显示函数

        function hide(id) {
            $(id).style.display = "none";
        }
        function show(id) {
            $(id).style.display = "block";
        }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,385评论 2 17
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 5,891评论 0 1
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 6,421评论 1 10
  • DOM DOM内容主要分为四部分: 什么是DOM和节点; 获取节点; 节点操作(3种); 属性操作(3种)。 什么...
    magic_pill阅读 4,202评论 0 1
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock阅读 8,658评论 2 36