当前位置:Gxlcms > JavaScript > javascript函数封装讲解

javascript函数封装讲解

时间:2021-07-01 10:21:17 帮助过:2人阅读


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函数封装讲解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行