一个轻量级的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 23 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 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
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
smarty的保留变量问题
2008/10/23 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
python 获取文件列表(或是目录例表)
2009/03/25 Python
使用python加密自己的密码
2015/08/04 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Django 用户认证组件使用详解
2019/07/23 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
python 字典套字典或列表的示例
2019/12/16 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
捐款倡议书格式范文
2014/05/14 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
校运会班级霸气口号
2015/12/24 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL