javascript函数封装讲解
程序员文章站
2022-04-24 16:57:59
...
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函数封装讲解的详细内容,更多请关注其它相关文章!