SoFunction
Updated on 2025-04-14

Introduction to a lightweight javascript library pj

Compared with other languages, the javascript scripting language is too small and exquisite, lively and lively. I really like writing javascript code. Although the famous javascript libraries on the Internet are flooding the Internet, jQuery, Prototype, Base, ExtJs... are also very powerful and easy to use. But there is one thing that is not very satisfactory, that is, the library itself is too big. Sometimes, just using a few of these functions, you have to bring in the entire library. As for jQuery, there are still more than 70 KB of compressed, which is sometimes larger than a web page file. But we need a library to assist in development, so we wrote a lightweight javascript library that only supports some simple selectors, many of which are borrowed from jQuery and named pj. Download the source code
Here is a brief introduction
Selector:
pj("#id");//id selector, such as: pj("#header"), take the id as the element of header
pj("tag");//Tag selector, such as: pj("div"), take all divs on the page
pj("[tag].class");//class selector, such as: pj("[tag].ClassName"), take class as the [tag] element of ClassName
pj("#id>tag");//Please all specified elements under the specified id; such as: pj("#header>a"), take id as all a elements under the header element [including descendants elements]
pj("tag>tag");//Pick all the elements of the specified tag below the specified tag; such as: pj("li>a") Get the elements of the a [including descendants' elements]
pj("tag[,#id,][attr=value]:0,2");//Fetch elements according to the specified attribute or subscript; such as: pj("div[name=value]:0,3") Get the first and fourth elements with the name attribute in the page and the value is value
pj("<div>");//Generate a div
pj("<div>content</div>");// Generate a div with content
Static properties and methods
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 object properties and methods
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()
Small demonstration
Copy the codeThe code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unt titled document</title>
<style type="text/css">
.cmd{
width:300px;
height:150px;
background:#F9F;
border:1px solid #9F6;
}
</style>
<script type="text/javascript" src="/pengju/src/pj-2.1."></script></head>
<body>
<input type="button" value="test" />
<div class="cmd"></div>
<div class="cmd"></div>
<div></div>
<script type="text/javascript">
pj(":1").hide(800,function(){
pj(":0").hide({duration:400,effect:});
});
pj("input").click(function(){
pj("<div>").appendTo().setStyle({position:"absolute",left:"0px",top:"0px",backgroundColor:"green"}).animate({width:200,height:80,left:200,top:240},{duration:1000,effect:{top:,left:}},function(){(1000)});
});
</script>
</body>
</html>

Package download addresshttps:///jiaoben/