一个轻量级的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 相关文章推荐
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
微信小程序合法域名配置方法
May 06 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
写自已的js类库需要的核心代码
2012/07/16 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
vue实现购物车列表
2020/06/30 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
Python functools模块学习总结
2015/05/09 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
详解Python locals()的陷阱
2019/03/26 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
pycharm新建一个python工程步骤
2019/07/16 Python
python 下载文件的几种方法汇总
2021/01/06 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
生物学专业求职信
2014/07/23 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
工商行政处罚决定书
2015/06/24 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
高二语文教学反思
2016/02/16 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
vue里使用create, mounted调用方法
2022/04/26 Vue.js
Java完整实现记事本代码
2022/06/16 Java/Android