一个轻量级的javascript库 pj介绍


Posted in Javascript onDecember 19, 2010

相对于其他语言来说,javascript脚本语言太小巧玲珑了,活泼灵动。个人非常喜欢写javascript代码。虽说网络上出名的javascript库充斥网络,jQuery、Prototype、Base、ExtJs……,功能也非常强大,使用起来也方便。但是有一个不太令人满意的地方,就是库本身太大了。有时只是用其中几个功能就必须得把整个库引进来,就jQuery来说,压缩了也还有70多KB,有时比一个网页文件还大。但我们有需要一个库来协助开发,所以自己就写了一个轻量级的javascript库,只支持一些简单的选择器,其中很多选择器,方法借鉴了jQuery,命名为pj.下载源代码
这里只简单介绍一下
选择器:
pj("#id");//id选择器, 如: pj("#header"),取id为header的元素
pj("tag");//标签 选择器, 如: 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");//取指定标签下面所有指定标签的元素;如: pj("li>a") 取页面所有li元素下面的a元素[包括子孙元素]
pj("tag[,#id,tag.class][attr=value]:0,2");//根据指定的属性或者下标取元素;如: pj("div[name=value]:0,3") 取页面中含有name属性并且值为value的第一和第四个元素
pj("<div>");//生成一个div
pj("<div>内容</div>");//生成一个带有内容的div
静态属性和方法
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对象属性和方法
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()
小演示

<!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>无标题文档</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>

打包下载地址 https://3water.com/jiaoben/33561.html
Javascript 相关文章推荐
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
js propertychange和oninput事件
Sep 28 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
JavaScript Date对象 日期获取函数
Dec 19 #Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 #Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 #Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 #Javascript
有关js的变量作用域和this指针的讨论
Dec 16 #Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 #Javascript
jquery中动态效果小结
Dec 16 #Javascript
You might like
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
JavaScript如何判断对象有某属性
2020/07/03 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
解析Python中的二进制位运算符
2015/05/13 Python
Python做文本按行去重的实现方法
2016/10/19 Python
深入理解Python3中的http.client模块
2017/03/29 Python
python3.x上post发送json数据
2018/03/04 Python
详解Python字典小结
2018/10/20 Python
对Python3 序列解包详解
2019/02/16 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
《这片土地是神圣的》教学反思
2016/02/16 职场文书
Python爬取某拍短视频
2021/06/11 Python
Python中glob库实现文件名的匹配
2021/06/18 Python
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang