一个轻量级的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验证表单大全
Nov 25 Javascript
jQuery 解析xml文件
Aug 09 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
JavaScript基础之this详解
Jun 04 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 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
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
js中的this关键字详解
2013/09/25 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
vue实现文件上传功能
2018/08/13 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
vue编写简单的购物车功能
2021/01/08 Vue.js
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
Python如何急速下载第三方库详解
2020/11/02 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
年度考核自我鉴定
2014/02/02 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
2014年高考决心书
2014/03/11 职场文书
物流管理专业自荐信
2014/06/23 职场文书
暑假打工感想
2015/08/07 职场文书
关爱空巢老人感想
2015/08/11 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
JS实现简单九宫格抽奖
2022/06/28 Javascript