创建自己的JS库

//js 库代码:

//ZAJ.js库代码  
    (function (){  
        //注册命名空间 'AZJ' 到window对象上    
        window['AZJ'] = {}   
          
          //getElementsByClassName包含两个参数:类名,标签名  
          function getElementsByClassName(className,tag){  
              //对tag进行过滤,取出所有对象,如取出所有input类型对象。  
              var allTags=document.getElementsByTagName(tag);  
              var matchingElements=new Array();  
                
              //正则表达式  
              className = className.replace(/\-/g,"\\-"); // 如果找到-符号,替换成\-便于做正则表达式对象
              var strMode = "(^|\\s)" +className+ "(\\s|$)"; // (^|\s)testme\-(\s|$),是开头或者空白字符加上 testme- 加上空白字符或者是结尾
     var regex = new RegExp(strMode); 
      
                
              var element;  
                
              //将取出的tag对象存入数组中。  
              for(var i=0;i<allTags.length;i++){  
                  element =allTags[i];
// alert(element.className);  // testme-符合正则表达式指定的模式;atllTags.length的长度为3,第三次element.className是空字符串,因为tag相等的都会传进来
                 if(regex.test(element.className)){ // 测试element.className字符串中是否存在regex对象中存在的字符串,过滤用
                      matchingElements.push(element);  
                     }  
                  }  
              return matchingElements;  
              }  


          //把创建的函数getElementsByClassName注册到 'window.AZJ'命名空间中 ,可以这样在浏览器中动态的建立对象和方法
          window['AZJ']['getElementsByClassName']=getElementsByClassName;  
        })();

//将上述库代码存放于mylib/testLib.js文件中。


<!-- HTML中的代码 -->

<html>

<title>调用js库测试</title>  
<!--此处通过执行"插入→HTML→脚本对象→脚本",搜素自己要插入到此HTML页的js库文件插入此位置--> 
<head>
<script language="JavaScript" type="text/javascript" src="mylib/testLib.js">
</script>
 
<script language="JavaScript" type="text/javascript" >  
    function testClick(){  
        var testInput=AZJ.getElementsByClassName("testme-","input");  
        //由于这里是两个参数,所以用for语句遍历两个参数,分别显示出来  
        for(var i=0;i<testInput.length;i++){  
        alert(testInput[i].value);  
        }
          
    }
  
onerror = handleErr; // 错误的调试
function handleErr(msg,url,l)
{
txt="本页中存在错误。\n\n"
txt+="错误:" + msg + "\n"
txt+="URL: " + url + "\n"
txt+="行:" + l + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt)
return true
}
</script>

</head>


<body >
<input type="text" value="AZJtest" class ="testme-" id="testID"/>  
<input type="text" value="AZJtest2" class="testme-" id="testID2"/>  
<input type="button" value="Click Me" onclick="testClick()"/>  
</body>

</html>

参考文章:

http://blog.csdn.net/mazhaojuan/article/details/7659906

你可能感兴趣的:(创建自己的JS库)