一个轻量级的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 相关文章推荐
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
AngularJS Module方法详解
Dec 08 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 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
程序员编程十条戒律
2009/07/09 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
js中有关IE版本检测
2012/01/04 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
node 版本切换的实现
2020/02/02 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python补齐字符串长度的实例
2018/11/15 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
一些Solaris面试题
2015/12/22 面试题
Ruby如何实现动态方法调用
2012/11/18 面试题
关于工资低的辞职信
2014/01/14 职场文书
党员个人公开承诺书
2014/08/29 职场文书
电子商务实训报告总结
2014/11/05 职场文书
保险公司增员口号
2015/12/25 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
Java实现带图形界面的聊天程序
2022/06/10 Java/Android
源码安装apache脚本部署过程详解
2022/09/23 Servers