一个轻量级的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 autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 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
set_include_path在win和linux下的区别
2008/01/10 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
python基础教程之循环介绍
2014/08/29 Python
Python+Wordpress制作小说站
2017/04/14 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
文科生自我鉴定
2014/02/15 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
加强作风建设心得体会
2014/10/22 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
小学中等生评语
2014/12/29 职场文书
毕业实习单位意见
2015/06/04 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS