快捷導(dǎo)航

一個(gè)輕量級(jí)的javascript庫 pj介紹

更新時(shí)間：2010年12月19日 22:55:24 作者：

寫了一個(gè)輕量級(jí)的javascript庫，只支持一些簡(jiǎn)單的選擇器，其中很多選擇器，方法借鑒了jQuery，命名為pj.

相對(duì)于其他語言來說，javascript腳本語言太小巧玲瓏了，活潑靈動(dòng)。個(gè)人非常喜歡寫javascript代碼。雖說網(wǎng)絡(luò)上出名的javascript庫充斥網(wǎng)絡(luò)，jQuery、Prototype、Base、ExtJs……，功能也非常強(qiáng)大，使用起來也方便。但是有一個(gè)不太令人滿意的地方，就是庫本身太大了。有時(shí)只是用其中幾個(gè)功能就必須得把整個(gè)庫引進(jìn)來，就jQuery來說，壓縮了也還有70多KB，有時(shí)比一個(gè)網(wǎng)頁文件還大。但我們有需要一個(gè)庫來協(xié)助開發(fā)，所以自己就寫了一個(gè)輕量級(jí)的javascript庫，只支持一些簡(jiǎn)單的選擇器，其中很多選擇器，方法借鑒了jQuery，命名為pj.下載源代碼
這里只簡(jiǎn)單介紹一下
選擇器：
pj("#id");//id選擇器, 如: pj("#header"),取id為header的元素
pj("tag");//標(biāo)簽選擇器, 如: pj("div"),取頁面所有的div
pj("[tag].class");//class選擇器, 如: pj("[tag].ClassName"), 取class為ClassName的[tag]元素
pj("#id>tag");//取指定id下的所有指定元素;如: pj("#header>a"), 取id為header元素下的所有a元素[包括子孫元素]
pj("tag>tag");//取指定標(biāo)簽下面所有指定標(biāo)簽的元素;如: pj("li>a") 取頁面所有l(wèi)i元素下面的a元素[包括子孫元素]
pj("tag[,#id,tag.class][attr=value]:0,2");//根據(jù)指定的屬性或者下標(biāo)取元素;如: pj("div[name=value]:0,3") 取頁面中含有name屬性并且值為value的第一和第四個(gè)元素
pj("<div>");//生成一個(gè)div
pj("<div>內(nèi)容</div>");//生成一個(gè)帶有內(nèi)容的div
靜態(tài)屬性和方法
LEFT_POSITION
RIGHT_POSITION
TOP_POSITION
BOTTOM_POSITION
LEFT_TOP_POSITION
LEFT_BOTTOM_POSITION
RIGHT_TOP_POSITION
RIGHT_BOTTOM_POSITION
ready(fn);
extend(target,fn);
bind({method:function(){}})
isObject(elem)
isFunction(elem)
isArray(elem)
isString(elem)
trim(str)
merge(target,src)
getStyle(target,name)
setStyle(target,{})
mouseX(e)
mouseY(e)
stopBubble(e)
stopDefault(e)
pageHeight()
pageWidth()
windowHeight()
windowWidth()
setOpacity(target,value)
enableDrag(trigger,target)
parseToQueryString(form)
isContain(parent,child)
id(id)
tag(tag)
resetCSS(target,{})
x(target)
y(target)
wh(target,name)
pj對(duì)象屬性和方法
timer
length
get()
each()
addListener()
attr()
removeAttr()
stop()
appendTo()
remove()
addClass()
removeClass()
setClass()
cut()
step()
setLocationRelatedTo()
isVisible()
locate()
bind()
getStyle()
setStyle()
abort()
blur()
change()
click()
dblclick()
error()
focus()
keydown()
keypress()
keyup()
load()
unload()
mousedown()
mousemove()
mouseout()
mouseover()
mouseup()
reset()
resize()
select()
submit()
left()
top()
right()
bottom()
height()
width()
animate()
slideDown()
slideUp()
slideRight()
slideLeft()
scrollDown()
scrollUp()
scrollRight()
scrollLeft()
hide()
show()
fadeIn()
fadeOut()
小演示

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無標(biāo)題文檔</title> 
<style type="text/css"> 
.cmd{ 
width:300px; 
height:150px; 
background:#F9F; 
border:1px solid #9F6; 
} 
</style> 
<script type="text/javascript" src="http://users4.jabry.com/pengju/src/pj-2.1.0.mini.js"></script></head> 
<body> 
<input type="button" value="test" /> 
<div class="cmd"></div> 
<div class="cmd"></div> 
<div></div> 
<script type="text/javascript"> 
pj("div.cmd:1").hide(800,function(){ 
pj("div.cmd:0").hide({duration:400,effect:tween.quint.easeIn}); 
}); 
pj("input").click(function(){ 
pj("<div>").appendTo(document.body).setStyle({position:"absolute",left:"0px",top:"0px",backgroundColor:"green"}).animate({width:200,height:80,left:200,top:240},{duration:1000,effect:{top:tween.bounce.easeOut,left:tween.linear}},function(){this.hide(1000)}); 
}); 
</script> 
</body> 
</html> 