一个轻量级的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 相关文章推荐
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
jquery获取tagName再进行判断
May 29 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
AngularJS语法详解
Jan 23 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
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
PHP4之真OO
2006/10/09 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
python处理二进制数据的方法
2015/06/03 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
岗位廉政承诺书
2014/03/27 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
谢师宴答谢词
2015/01/05 职场文书
会计专业求职信范文
2015/03/19 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
Python实现排序方法常见的四种
2021/07/15 Python
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript