一个轻量级的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的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
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调用Java对象的方法
2006/10/09 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
vue使用过滤器格式化日期
2021/01/20 Vue.js
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
利用python代码写的12306订票代码
2015/12/20 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
网络安全方面的面试题
2016/01/07 面试题
机电一体化应届生求职信范文
2014/01/24 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
邀请函格式范文
2015/02/02 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL