自己动手封装js库_javascript吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：143,535贴子：
自己动手封装js库收藏
千锋javascript 名师荟萃 汇聚html5前沿技术 全栈式教学模式 免费试学两周千锋javascript 0基础20周快速提升,成就html5实战精英 实战教学 学习就业无缝对接!
刚邻居家的小太妹说画了一幅画给我看，我说你画的是小猪吗，她嘻嘻着说不告诉我，结果我一打开，画的是一个小男孩，右边歪歪斜斜的写着我名字.....
楼主写的？
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或导入:采用JSI封装、集成第三方类库
导入:采用JSI封装、集成第三方类库
Java的成功，离不开它那个庞大的类库，不单是sun的类库，很多细节的实现都取自第三方（如xml解析采用Apache的实现）。　JSI暂时不大算编写丰富的公共API，但是我们可以集成其他成熟的类库，同时隔离他们的依赖，隔离各个脚本的执行上下文，消除命名冲突的危险。　这里我们详细介绍一个复杂一点的实例：类似Windows XP文件浏览器左侧的滑动折叠面板(任务菜单)效果。　我们先集成Scriptaculous Effect类库，并且在这个基础上按我个人的习惯对一个面板折叠效果做一个简单的封装，展示框架的类库封装功能。1。集成Scriptaculous类库：　这里我们不做过多介绍，详细情况请参考集成实战；我们发布的版本中已经把Scriptaculous放置于us.aculo.script包中，您可以把这些作为系统内置的类库使用。2。编写我们的折叠面板函数（example/effect.js）：
/**&&*&滑动面板实现.&&*&当指定元素可见时，将其第一个子元素向上滑动至完全被遮掩（折叠）。&&*&当指定元素不可见时，将其第一个子元素向下滑动至完全显示（展开）。&&*/&&function&slidePanel(panel){&&&&panel&=&$(panel);&&&&if(panel.style.display=='none'){&&&&&&//调用Scriptaculous&Effect的具体滑动展开实现&&&&&&new&Effect.SlideDown(panel);&&&&}else{&&&&&&//调用Scriptaculous&Effect的具体滑动闭合实现&&&&&&new&Effect.SlideUp(panel);&&&&}&&}&&3。编写包定义脚本（example/__$package.js）：
//添加slidePanel（滑动面板控制）函数&&this.addScript("effect.js","slidePanel",null);&&//给effect.js脚本添加对us.aculo.script包中effects.js脚本的装载后依赖this.addScriptDependence("effect.js",&&"us/aculo/script/effects.js",false); 4。在网页上运用上面的类库：
&html&&&&&&head&&&&&&&title&重用aculo&Effect脚本实例&/title&&&&&&link&rel="stylesheet"&type="text/css"&&/&&&&&&script&src="/scripts/boot.js"&&/script&&&&&&script&&&&&&&$import("example.slidePanel");&&&&&/script&&&&&&/head&&&&&&body&&&&&&&&div&class="menu_header"&&&&&&&&&&onclick="slidePanel('menu_block1')"&&&&&&&&&&&面板&1&&&&&&&/div&&&&&&&&div&class="menu_block"&id="menu_block1"&&&&&&&&&&ul&&&&&&&&&&&&li&text1&/li&&&&&&&&&&&&li&text2&/li&&&&&&&&&&&&li&text3&/li&&&&&&&&&&/ul&&&&&&&&/div&&&&/body&&&&/html&&
　　onclick="slidePanel('menu_block1')"这个事件函数将在我们点击面板标题时触发，能后会调用Scriptaculous Effect的具体实现去实现我们需要的滑动折叠功能。
壁立千仞 无欲则刚DD控制依赖　java可以随意的使用第三方类库，可是JavaScript却没那么幸运，随着类库的丰富，烦杂的依赖关系和可能的命名冲突将使得类库的发展越来越困难。程序的易用性也将大打折扣。　命名冲突的危险无形的增加你大脑的负担；随着使用的类库的增加，暴露的依赖也将随之增加，这是复杂度陡增的极大祸根，将使得系统越来越复杂，越来越难以控制。潜在的问题越来越多，防不胜防。　JSI的出现，可以解决上述问题，我们建议类库的开发者将自己类库的依赖终结在自己手中，避免依赖扩散，以提高类库的易用性。　同样使用上面的例子，假如我们想抛开JSI，实现同样的功能，那我们的页面代码将是（类库代码不用改动）：
&html&&&&&&head&&&&&&&title&重用aculo&Effect脚本实例&/title&&&&&&link&rel="stylesheet"&type="text/css"&&/&&&&&&!--&&&&&script&src="/scripts/boot.js"&&/s&cript&&&&&&script&&&&&&&$import("example.slidePanel");&&&&&/sc&ript&&&&&&--&&&&script&src="/scripts/net/conio/prototype/v1_5/prototype.js"&&&&/script&&&&script&src="/scripts/us/aculo/script/v1_7/effects.js"&&&&/script&&&&script&src="/scripts/us/aculo/script/v1_7/builder.js"&&&&/script&&&&script&src="/scripts/example/effect.js"&&&&/script&&&&&&/head&&&&&&body&&&&&&&&div&class="menu_header"&&&&&&&&&&onclick="slidePanel('menu_block1')"&&&&&&&&&&&面板&1&&&&&&&/div&&&&&&&&div&class="menu_block"&id="menu_block1"&&&&&&&&&&ul&&&&&&&&&&&&li&text1&/li&&&&&&&&&&&&li&text2&/li&&&&&&&&&&&&li&text3&/li&&&&&&&&&&/ul&&&&&&&&/div&&&&/body&&&&/html&&&　这个例子的html代码明显比上面的复杂了，一堆堆的script标签，而且还是有序的；还出现在页面上，重构起来也极其麻烦。　可以看出，JSI的加入可以让类库更加易用，html代码更为简洁，最终用户已经不必关心所用类库的依赖了。　JSI中每一个脚本有一个单独的执行上下文。各个脚本顶部变量你可以随便使用，不必担心不同脚本中的命名冲突，不会污染全局变量空间，这种方式可以用于解决某些类库间变量冲突的问题（如jQuery和Prototype的$函数）。我们甚至可以做到同一个页面上间接加载同一种类库的两个不同版本，不相互影响。　使用JSI后，很多细节我们可以在包中封装掉，不需要告诉类库使用者太多。大大增加类库的易用性。同时，类库封装的支持可以让我们在第三方库的基础上轻松的按自己的喜好编写自己的类库，同时避免依赖扩散造成的复杂度增加。　使用JSIntegration唯一多出的负担就是编写包定义文件，不过想想这种定义文件可是一劳永逸的（以后就不需要每次导入脚本的时候都小心翼翼的判断那个脚本先导入那个后导入，有那些间接使用到的类库需要导入，等等），而且有了包结构后对于代码组织、重用，以及文档的编写阅读，都将非常有利。
H3C认证Java认证Oracle认证
基础英语软考英语项目管理英语职场英语
.NETPowerBuilderWeb开发游戏开发Perl
二级模拟试题一级模拟试题一级考试经验四级考试资料
软件测试软件外包系统分析与建模敏捷开发
法律法规历年试题软考英语网络管理员系统架构设计师信息系统监理师
高级通信工程师考试大纲设备环境综合能力
路由技术网络存储无线网络网络设备
CPMP考试prince2认证项目范围管理项目配置管理项目管理案例项目经理项目干系人管理
职称考试题目
招生信息考研政治
网络安全安全设置工具使用手机安全
生物识别传感器物联网传输层物联网前沿技术物联网案例分析
Java核心技术J2ME教程
Linux系统管理Linux编程Linux安全AIX教程
Windows系统管理Windows教程Windows网络管理Windows故障
数据库开发Sybase数据库Informix数据库
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&自己封装的js前端框架（包含了jquery的常用功能） - 李存 - 博客园
posts - 5, comments - 2, trackbacks - 0, articles - 0
下面是本人封装的一个js的框架，希望能给大家带来帮助。基于此框架封装的组件我会之后的时间贴出来，一块学习，共同进步。
框架中包含了jquery常用的功能，代码很简单，用起来很方便。
/*************************************************************************************************************************
*************************************************************************************************************************/
(function(win) {
//string展
String.prototype.trim = function() {
return this.replace(/(^\s*)|(\s*$)/g, "");
String.prototype.LTrim = function() {
return this.replace(/(^\s*)/g, "");
String.prototype.RTrim = function() {
return this.replace(/(\s*$)/g, "");
String.prototype.isEmail = function() {
return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(this);
String.prototype.existChinese = function() {
return /^[\x00-\xff]*$/.test(this);
String.prototype.isUrl = function() {
return new RegExp("^http[s]?:\/\/([\w-]+\.)+[\w-]+([\w-./?%&=]*)?$", "i").test(this);
//return /^http[s]?:\/\/([\w-]+\.)+[\w-]+([\w-./?%&=]*)?$/i.test(this);
String.prototype.isPhoneCall = function() {
return /(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/.test(this);
String.prototype.isNumber = function() {
return /^[0-9]+$/.test(this);
String.prototype.startWith = function(str) {
return this.indexof(str) == 0;
Array.prototype.insert = function(startIndex, data) {
this.splice(startIndex, 0, data);
return this;
Array.prototype.del = function(startIndex, delLen) {
this.splice(startIndex, delLen);
return this;
Array.prototype.replace = function(index, obj) {
this.splice(index, 1, obj);
return this;
Array.prototype.subArray = function(startIndex, len) {
return this.slice(startIndex, startIndex + len);
Date.prototype.getDateString = function() {
//鏄剧ず 骞存湀鏃?
return this.toLocaleDateString();
Date.prototype.getTimeString = function() {
//鏄剧ず 鏃跺垎绉?
return this.toLocaleTimeString();
//瀵筬irefox winodw.event鐨勬墿灞?
function __firefox() {
HTMLElement.prototype.__defineGetter__("runtimeStyle", __element_style);
window.constructor.prototype.__defineGetter__("event", __window_event);
Event.prototype.__defineGetter__("srcElement", __event_srcElement);
function __element_style() {
return this.
function __window_event() {
return __window_event_constructor();
function __event_srcElement() {
return this.
function __window_event_constructor() {
if (document.all) {
return window.
var _caller = __window_event_constructor.
while (_caller != null) {
var _argument = _caller.arguments[0];
if (_argument) {
var _temp = _argument.
if (_temp.toString().indexOf("Event") != -1) {
_caller = _caller.
return null;
if (window.addEventListener) {
__firefox();
var isIE = (navigator.userAgent.toUpperCase().indexOf("MSIE")) & 0 ? true : false;
var isFireFox = (navigator.userAgent.toUpperCase().indexOf("FIREFOX")) & 0 ? true : false;
var isChrome = (navigator.userAgent.toUpperCase().indexOf("CHROME")) & 0 ? true : false;
var httpRequest = function() {
var request = null;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
if (window.ActiveXObject) {
request = new ActiveXObject("Msxml2.XMLHTTP");
catch (e) {
request = new ActiveXObject("Microsoft.XMLHTTP");
catch (e) {
var _$ = function(selector) {
//if(/Array/.test((typeof selector=='string')?selector:(selector.consturctor?selector.constructor.toString():""))){
if (selector.constructor && !/object HTMLCollection/.test(selector.constructor.toString()) && (/object array/.test(Object.prototype.toString.call(selector).toLowerCase()) || /object htmlcollection/.test(Object.prototype.toString.call(selector).toLowerCase()))) {
selector.each = function(fn) {
for (var k = 0; k & selector. k++) {
if (k != 'length') {
if (selector.toString().indexOf("HTML") & 0) {
fn.call(this[k], k, this[k]);
//if(/Object/.test((typeof selector=='string')?selector:(selector.consturctor?selector.constructor.toString():""))){
if (selector.constructor && !/object NodeList/.test(selector.constructor.toString()) && !/object HTMLCollection/.test(selector.constructor.toString()) && selector != undefined && /object object/.test(Object.prototype.toString.call(selector).toLowerCase()) && (typeof selector != 'string') ? selector.innerHTML == undefined : false) {
selector.each = function(fn) {
for (var key in selector) {
if (key == 'length' || key == 'each') continue;
//if((typeof selector[key]) !='function')
fn.call(selector[key], key, selector[key]);
var ele = {};
ele.find = function(selector) {
if (!selector) {
return null;
/*------------------------selector为outhtml---------------------------*/
function outhtml(selector) {
var _DIV = document.createElement('div');
if (typeof selector != 'string') {
_DIV.appendChild(selector.cloneNode(false));
return _DIV.innerHTML;
return "";
if (/^#/.test(selector)) {
return _$.prototype.id(selector);
else if (/^\./.test(selector)) {
return _$.prototype.cls(selector);
} else if ((typeof selector != 'string') && (!(/object array/.test(selector)) || new RegExp("(S*?)[^&]*&.*?|&.*?/&").test(selector.outerHTML ? selector.outerHTML : outhtml(selector)))) {//}else if(new RegExp("(S*?)[^&]*&.*?|&.*?/&").test(selector.outerHTML?selector.outerHTML:outhtml(selector))){
return _$.prototype.htmlEle(selector);
//alert(selector);
return _$.prototype.ele(selector);
ele.col = ele.find(selector);
ele.col.each = function(fn) {
if (this.length == undefined) {
if (typeof fn == 'function') {
fn.call(this, 0, this);
this.data = function(key, value) {
this.cache = this.cache || {};
if (key && value) {
this.cache[key] =
//eval('(this.cache.'+key+'="'+value+'")');
//return eval('this.cache.'+key);
return this.cache[key];
for (var i = 0; i & this. i++) {
if (typeof fn == 'function') {
fn.call(this[i], i, this[i]);
this[i].data = function(key, value) {
this.cache = this.cache || {};
if (key && value) {
//eval('(this.cache.'+key+'="'+value+'")');
this.cache[key] =
//return eval('this.cache.'+key);
return this.cache[key];
//支旨虾头羌
ele.col.bind = function(typ, fn) {
var evr = function() { fn.call(this, window.event); }; //屑没
if (this.length) {
for (var i = 0; i & this. i++) {
if (typeof fn == 'function') {
eval((isIE ? "this[i].on" : (isFireFox ? "this[i]." : "noneEvent.")) + typ + "=" + evr);
if (isFireFox) {//莼
this[i].addEventListener(typ, evr, false);
if (isChrome) {
eval("this.on" + typ + "=" + evr);
} else {//id取玫
eval((isIE ? "this.on" : (isFireFox ? "this." : "noneEvent")) + typ + "=" + evr);
if (isFireFox) {//莼
this.addEventListener(typ, evr, false);
if (isChrome) {
eval("this.on" + typ + "=" + evr);
//ele.col羌希堑元兀取elementhtml
ele.col.html = function(htm) {
if (htm == '' || htm) {
this.innerHTML =
return this.innerHTML;
//ele.col羌希堑元
ele.col.css = function(sty, val) {
if (typeof sty == 'object') {
for (var key in sty) {
this.style[key] = sty[key];
} else if (typeof sty == 'string' && typeof val == 'string') {
this.style[sty] =
catch (e) {
return this.style[sty];
ele.col.append = function(elem) {
this.appendChild(elem);
ele.col.prepend = function(elem) {
this.insertBefore(elem, $(this).first());
ele.col.after = function(elem) {
var tem = $.html("");
$(this).parent().append(tem);
$(this).parent().insertBefore(elem, tem);
document.body.appendChild(tem);
ele.col.before = function(elem) {
$(this).parent().insertBefore(elem, this);
ele.col.hasClass = function(className) {
var state = false;
var arr = this.className.split(' ');
$(arr).each(function(k, v) {
if (v && v.toString() == className) {
state = true;
ele.col.addClass = function(className) {
var arr = this.className.split(' ');
var state = false;
$(arr).each(function(k, v) {
if (v && v.toString() == className) {
state = true;
if (state) return;
this.className = this.className.trim();
this.className += " " + classN
ele.col.removeClass = function(className) {
var arr = this.className.split(' ');
$(arr).each(function(k, v) {
if (v && v.toString() == className) {
arr[k] = "";
this.className = arr.join(' ').trim(); //this.className.toLowerCase().replace(className,"");
ele.col.replaceClass = function(newName, oldName) {
this.removeClass(oldName);
this.addClass(newName);
//绾ц仈鏌ユ壘鍏冪礌
ele.col.find = function(tagName) {
if (tagName.indexOf("#") &= 0)
return $(tagName);
if ("div,span,a,input,table,tr,td,button".indexOf(tagName) &= 0)
return $(this.getElementsByTagName(tagName));
var eleCollection = [];
var nodeCol = this.getElementsByTagName("*");
var allEle = $(tagName);
$(allEle).each(function(key, val) {
$(nodeCol).each(function(k, v) {
if (val == v)
eleCollection.push(v);
return $(eleCollection);
ele.col.toggle = function(fn1, fn2) {
this.bind('click', function() {
if ($(this).data('state') == undefined) {
$(this).data('state', "false");
if (typeof fn1 == 'function' && typeof fn2 == 'function') {
if ($(this).data('state') == 'true') {
$(this).data('state', 'false');
fn2.call(this, fn2.arguments);
$(this).data('state', 'true');
fn1.call(this, fn1.arguments);
ele.col.removeData = function(attrName) {
if ($(this).cache) {
return delete $(this).cache[attrName];
return false;
ele.col.attr = function(k, v) {
if (k && v)
this.setAttribute(k, v);
return this.getAttribute(k);
ele.col.removeAttr = function(k) {
return this.removeAttribute(k);
ele.col.val = function(str) {
if (!this.tagName) {
//鏄?竴涓猦tmlCollection
if (str) {
this.each(function(k, v) {
$(str).each(function(key, val) {
if (v.value == val) {
v.checked = true;
} else {//杩斿洖閫変腑鐨勮妭鐐?
var selectedCollection = [];
this.each(function(k, v) {
if (v.checked)
selectedCollection.push(v);
return $(selectedCollection);
switch (this.tagName.toLowerCase()) {//璁剧疆鍗曚釜鍏冪礌
case 'input':
switch ($(this).attr('type')) {
case 'button':
case 'text':
case 'area':
if (str) {
$(this).attr('value', str);
return this.
case 'radio':
case 'checkbox':
if (str) {
$(this).attr('checked', str);
return this.checked ? true : false;
case 'select':
var me = this;
if (str) {
$(this.options).each(function(k, v) {
if (me[k].value.toString() == str.toString()) {
me.selectedIndex =
return this.options[this.selectedIndex].
case 'textarea':
if (str) {
$(this).attr('value', str);
return this.
ele.col.hasChild = function() {
return this.hasChildNodes();
ele.col.prev = function() {
var fNode = null;
var findNodes = function(node) {
if (node.previousSibling) {
if (node.previousSibling.nodeType != 1) {
findNodes(node.previousSibling);
fNode = node.previousS
return null;
findNodes(this);
return $(fNode);
ele.col.next = function() {
var fNode = null;
var findNodes = function(node) {
if (node.nextSibling) {
if (node.nextSibling.nodeType != 1) {
findNodes(node.nextSibling);
fNode = node.nextS
return null;
findNodes(this);
return $(fNode);
ele.col.first = function() {
var fNode = null;
var findNodes = function(node) {
if (node && node.nodeType != 1) {
findNodes(node.nextSibling);
findNodes(this.firstChild);
return $(fNode);
ele.col.last = function() {
var fNode = null;
var findNodes = function(node) {
if (node && node.nodeType != 1) {
findNodes(node.previousSibling);
findNodes(this.lastChild);
return $(fNode);
ele.col.parent = function() {
return $(this.parentNode);
ele.col.siblings = function() {
var fNode = $(this).parent().child();
var me = this;
$(fNode).each(function(k, v) {
if (v == me) {
fNode.del(k, 1);
return $(fNode);
ele.col.child = function() {
var fNode = [];
for (var i = 0; i & this.childNodes. i++) {
if (this.childNodes[i].nodeType == 1) {
fNode.push(this.childNodes[i]);
return $(fNode);
ele.col.remove = function() {
$(this).each(function(k, v) {
$(v).parent().removeChild(v);
ele.col.nextAll = function() {
var fNode = [];
var findNodes = function(node) {
if (node && node.nodeType != 1) {
findNodes(node.nextSibling);
if (node) {
findNodes(node.nextSibling);
fNode.push(node);
findNodes($(this).next());
return $(fNode);
ele.col.prevAll = function() {
var fNode = [];
var findNodes = function(node) {
if (node && node.nodeType != 1) {
findNodes(node.previousSibling);
if (node) {
findNodes(node.previousSibling);
fNode.push(node);
findNodes($(this).prev());
return $(fNode);
ele.col.slideUp = function() {
if (this.css('height') == '0px') {
//瑙ｅ喅ie杩炵画闅愯棌鎶ラ敊闂??
var obj = {
ele: this,
startHeight: this.offsetHeight == 0 ? parseInt(this.style.height.substring(0, this.style.height.indexOf('px'))) : this.offsetHeight,
endHeight: 1
this.data('slideUpHeight', obj.startHeight);
obj.ele.css("height", obj.startHeight + 'px');
obj.ele.css('overflow', 'hidden');
$.animateQueue.insert($.animateQueue.length, { state: false, ele: this });
$.wait(this, function() {
var id = window.setInterval(function() {
(function(o) {
o.startHeight -= obj.i * (isIE ? 1 : 0.06);
if (o.startHeight & 10)
obj.ele.css("height", o.startHeight + "px");
obj.endheight = obj.endHeight * (isIE ? 2 : 0.12);
var h = obj.ele.css("height");
obj.ele.css("height", (parseInt(h.substring(0, h.indexOf('px'))) - obj.endHeight) + 'px');
if (parseInt(obj.ele.css('height').substring(0, 2)) &= 0) {
obj.ele.css("height", '0px');
obj.ele.css('display', 'none');
window.clearInterval(id);
if ($.animateQueue.length & 1) {
$.animateQueue[1].state = true;
$.animateQueue.del(0, 1);
ele.col.slideDown = function() {
this.css('display', 'block');
this.css('overflow', 'hidden');
var obj = { ele: this, startHeight: 1, i: 1, endHeight: (this.data('slideUpHeight') ? this.data('slideUpHeight') : parseInt(this.style.height.substring(0, this.style.height.indexOf('px')))) };
if (obj.endHeight &= 0) {
obj.endHeight = this.offsetH
alert(obj.endHeight);
obj.ele.css("height", '0px');
obj.ele.css('overflow', 'hidden');
obj.ele.css('display', 'block');
$.animateQueue.insert($.animateQueue.length, { state: false, ele: this });
$.wait(this, function() {
var id = window.setInterval(function() {
(function(o) {
if (o.startHeight & obj.endHeight - 10) {
o.startHeight += obj.i * (isIE ? 1 : 0.06);
obj.ele.css("height", o.startHeight + "px");
var ii = o.startHeight++;
obj.ele.css("height", ii + 'px');
if (parseInt(obj.ele.css('height').substring(0, obj.ele.css('height').indexOf('px'))) & obj.endHeight) {
obj.ele.css('height', obj.endHeight + "px");
window.clearInterval(id);
if ($.animateQueue.length & 1) {
$.animateQueue[1].state = true;
$.animateQueue.del(0, 1);
ele.col.empty = function() {
this.innerHTML = "";
/*ele.col.width = function() {
return this.offsetW
ele.col.height = function() {
return this.offsetH
ele.col.paddingLeft = function() {
if (isIE) {
return window.event.offsetX;
} else if (isFireFox) {
return $.window.x() - this.left();
} else if (isChrome) {
return window.event.offsetX;
ele.col.paddingTop = function() {
if (isIE) {
return window.event.offsetY;
} else if (isFireFox) {
return $.window.y() - this.top();
} else if (isChrome) {
return window.event.offsetY;
ele.col.left = function() {
if (isIE) {
return $.window.x() - window.event.offsetX;
} else if (isFireFox) {
return $.window.x() - window.event.layerX + $.window.target().offsetL
} else if (isChrome) {
return $.window.x() - window.event.offsetX;
ele.col.top = function() {
if (isIE) {
return $.window.y() - window.event.offsetY;
} else if (isFireFox) {
return $.window.y() - window.event.layerY + $.window.target().offsetT
} else if (isChrome) {
return $.window.y() - window.event.offsetY;
ele.col.clone = function(state) {
return this.cloneNode(state);
ele.col.each();
return ele.
_$.prototype.id = function(selector) {
if (selector.indexOf('#') & -1) {
return document.getElementById(selector.trim().replace(/#/, ''));
_$.prototype.cls = function(selector) {
if (selector.indexOf('.') & -1) {
var eleCollection = [];
var allEle = document.body.getElementsByTagName('*');
for (var i = 0; i & allEle. i++) {
if (allEle[i].className && allEle[i].className.indexOf(selector.trim().replace(/^./, '')) & -1) {
eleCollection.push(allEle[i]);
return eleC
return [];
_$.prototype.ele = function(selector) {
var eleCollection = [];
var allEle = document.body.getElementsByTagName('*');
for (var i = 0; i & allEle. i++) {
if (allEle[i].tagName.toString().toUpperCase() == selector.toString().toUpperCase()) {
eleCollection.push(allEle[i]);
return eleC
_$.prototype.htmlEle = function(selector) {
_$.html = function(htm) {
if (htm.toLowerCase().indexOf("&") != 0) {
return document.createTextNode(htm);
if (htm.toLowerCase().indexOf('thead') == 1) {
return document.createElement('thead');
if (htm.toLowerCase().indexOf('tbody') == 1) {
return document.createElement('tbody');
if (htm.toLowerCase().indexOf('tfoot') == 1) {
return document.createElement('tfoot');
if (htm.toLowerCase().indexOf('th') == 1) {
var text = htm.toLowerCase().substring(4, htm.length - 5);
var th = document.createElement('th');
th.appendChild(document.createTextNode(text));
if (htm.toLowerCase().indexOf('td') == 1) {
var text = htm.toLowerCase().substring(4, htm.length - 5);
var td = document.createElement('td');
td.appendChild(document.createTextNode(text));
if (htm.toLowerCase().indexOf('tr') == 1) {
return document.createElement('tr');
var _div = document.createElement('div');
if (typeof htm == 'string') {
_div.innerHTML =
return _div.firstC
return null;
_$.ajax = function(obj) {
switch (obj.type.toLowerCase()) {
case "post":
this.post(obj);
case "get":
this.get(obj);
_$.get = function(obj) {//{url,data,fn beforsend,fn sending,fn success,fn error}
httpRequ = httpRequest();
if (!httpRequ) {
alert("浣犵殑娴忚?鍣ㄤ笉鏀?寔ajax");
httpRequ.onreadystatechange = function() {
if (httpRequ.readyState == 3) {//鏁版嵁浼犺緭涓?
if (obj.sending) {
obj.sending();
if (httpRequ.readyState == 4) {
if (httpRequ.status == 200) {
var string = httpRequ.responseT
if (obj.success) {
obj.success(string);
var str = "";
if (httpRequ.status.toString().indexOf('5') == 0) {
str = '鏈嶅姟鍣ㄥ唴閮ㄩ敊璇?';
} else if (httpRequ.status.toString().indexOf('4') == 0) {
str = '瀹㈡埛绔?敊璇?';
if (obj.error) {
obj.error(str);
httpRequ.open('GET', obj.url, false);
if (obj.beforSend) {
obj.beforSend();
httpRequ.send();
_$.post = function(obj) {
httpRequ = httpRequest();
if (!httpRequ) {
alert("浣犵殑娴忚?鍣ㄤ笉鏀?寔ajax");
httpRequ.onreadystatechange = function() {
if (httpRequ.readyState == 3) {//鏁版嵁浼犺緭涓?
if (obj.sending) {
obj.sending();
if (httpRequ.readyState == 4) {
if (httpRequ.status == 200) {
var string = httpRequ.responseT
if (obj.success) {
obj.success(string);
var str = "";
if (httpRequ.status.toString().indexOf('5') == 0) {
str = '鏈嶅姟鍣ㄥ唴閮ㄩ敊璇?';
} else if (httpRequ.status.toString().indexOf('4') == 0) {
str = '瀹㈡埛绔?敊璇?';
if (obj.error) {
obj.error(str == "" ? "鏈?煡閿欒?" : str);
httpRequ.open('POST', obj.url, false);
if (obj.beforSend) {
obj.beforSend();
httpRequ.send(obj.data);
_$.json = function(obj) {
return eval('(' + obj + ')');
_$.jsonToString = function(o) {
if (o == undefined) {
return "";
var r = [];
if (typeof o == "string") return "\"" + o.replace(/([\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
if (typeof o == "object") {
if (!o.sort) {
for (var i in o)
r.push(i + ":" + _$.jsonToString(o[i]));
if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
r.push("toString:" + o.toString.toString());
r = "{" + r.join() + "}"
for (var i = 0; i & o. i++)
r.push(_$.jsonToString(o[i]))
r = "[" + r.join() + "]";
return o.toString().replace(/\"\:/g, '":""');
_$.stopEvent = function(e) {
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
_$.intervalSend = function(interval, obj, fn) {
return window.setInterval(function() { fn(obj); }, interval, obj);
_$.ready = function(fn) {
this.state = false;
var id = window.setInterval(function() {
(function() {
if (document.body) {
window.clearInterval(id);
if (!this.state) {
this.state = true;
fn.call();
//鍔ㄧ敾涓撶敤
_$.animateQueue = [];
_$.wait = function(ele, fn) {
window.setTimeout(function() {
if (_$.animateQueue.length &= 1) {
_$.animateQueue[0].state = true;
var id = window.setInterval(function() {
(function() {
if (_$.animateQueue[0].state && _$.animateQueue[0].ele == ele) {
window.clearInterval(id);
fn.call(ele);
_$.window = {
x: function() {
//相对于body左上角的距离
if (isIE) {
return window.event.x;
} else if (isFireFox) {
return window.event.pageX;
} else if (isChrome) {
return window.event.x;
y: function() {
if (isIE) {
return window.event.y;
} else if (isFireFox) {
return window.event.pageY;
} else if (isChrome) {
return window.event.y;
clientX: function() {
//相对于body左上角的距离,不包括边框
return window.event.clientX;
clientY: function() {
return window.event.clientY;
width: function() {
return window.event.clientW
height: function() {
if (window.event) {
return window.event.clientH
return $(document.body).height();
fromElement: function() {
if (isIE) {
return window.event.fromE
} else if (isFireFox) {
return window.event.relatedT
toElement: function() {
if (isIE) {
return window.event.srcE
} else if (isFireFox) {
return window.event.
target: function() {
if (isIE) {
return window.event.srcE
} else if (isFireFox) {
return window.event.
_$.extend = function(fnName, fn) {
eval("_$." + fnName + "=" + fn);
win.$ = _$;
})(window);