js库开发
Posted 小董儿博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js库开发相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="base.css"/>
<script src="sizzle.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="ids" >
<span>12</span>
<div class="a">11</div>
<div class="a">12</div>
<div class="a">13</div>
</div>
<div>12</div>
<p class="a">3</p>
<p class="a">3</p>
<p>3</p>
<script>
var Base=function(){
this.elements=[];
}
var myquery=function(){
return new Base();
}
//id
Base.prototype.getid=function(id){
var thisid=document.getElementById(id);
this.elements.push(thisid)
return this;
};
//tag
Base.prototype.gettags=function(tags){
var tag=document.getElementsByTagName(tags);
for(var i=0;i<tag.length;i++)
{
this.elements.push(tag[i])
}
return this;
}
//css
Base.prototype.css=function(attr,value)
{
for(var i=0;i<this.elements.length;i++)
{
if(arguments.length==1)
{
if(typeof window.getComputedStyle!=undefined)
{
//复合属性值无从获取在ie和火狐里面
return document.defaultView.getComputedStyle(this.elements[i],null)[attr];
}
else if(typeof this.elements[i].currentStyle!=undefined)
{
//console.log(this.elements[i].currentStyle[attr])
return this.elements[i].currentStyle[attr];
}
}
else
{
this.elements[i].style[attr]=value;
}
}
return this;
}
//html
Base.prototype.html=function(str){
for(var i=0;i<this.elements.length;i++)
{
if(arguments.length==0)
{
return this.elements[i].innerHTML;
}
else
{
this.elements[i].innerHTML=str;
}
}
return this;
}
//class
Base.prototype.getclass=function(attr,area){
//Sizzle(".a")[1]
var param=null;
if(arguments.length==2)
{
for(var i=0;i<Sizzle(area+" ."+attr).length;i++)
{
this.elements.push(Sizzle(area+" ."+attr)[i]);
}
}
else
{
var classes=document.getElementsByTagName("*");
for(var i=0;i<classes.length;i++)
{
if(classes[i].className==attr)
{
//console.log(classes[i])
this.elements.push(classes[i]);
}
}
}
return this;
}
//eq方法
Base.prototype.eq=function(num){
var tempelement=this.elements[num];
this.elements=[];
this.elements[0]=tempelement;
return this;
}
//addclass
console.log(myquery().getclass("a","#ids").addclass("b").removeclass("b"))
//console.log(Sizzle("#ids .a")[2].innerHTML)
</script>
</body>
</html>
以上是关于js库开发的主要内容，如果未能解决你的问题，请参考以下文章
滴滴开源基于 React 的移动端开发组件库-Pile.js