欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

javascript函数封装讲解

程序员文章站 2022-04-30 21:05:13
...


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";

}

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

}
2.封装的id函数
function $(id) {

return document.getElementById(id);

}
调用id $("调用的id")

3.提高用户体验——文本框自动获得焦点38

$("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;

}


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("*");
}
// 不带id100 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";
}

以上就是javascript函数封装讲解的详细内容,更多请关注其它相关文章!