一个轻量级的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 相关文章推荐
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
javascript时间函数大全
Jun 30 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
js中作用域的实例解析
Mar 16 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
Node.js学习教程之Module模块
Sep 03 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
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
php中adodbzip类实例
2014/12/08 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
php集成动态口令认证
2016/07/21 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
基于jquery的无刷新分页技术
2011/06/11 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
jQuery extend()详解及简单实例
2017/05/06 jQuery
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
vue登录注册实例详解
2019/09/14 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
妇产医师自荐信
2014/01/29 职场文书
总经理岗位职责范本
2014/02/02 职场文书
项目负责人任命书
2014/06/04 职场文书
篮球比赛策划方案
2014/06/05 职场文书
董事长秘书工作职责
2014/06/10 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
windows系统安装配置nginx环境
2022/06/28 Servers