TQuery

我的仿jq库

当前为 2015-07-18 提交的版本,查看 最新版本

此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/11045/62714/TQuery.js

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name	TQuery
// @author	burningall
// @description	我的仿jq库
// @version     2015.7.18
// @run-at	document-start
// @compatible  chrome  
// @compatible  firefox  
// @license     The MIT License (MIT); http://opensource.org/licenses/MIT
// @supportURL		http://www.burningall.com
// @contributionURL	[email protected]|alipay.com
// @namespace https://greasyfork.org/zh-CN/users/3400-axetroy
// ==/UserScript==


(function(){//自调用,避免全局污染


function TQuery(tArg){
	this.elements = [];//用来保存选择的元素
	switch( typeof tArg ){
		case "function" :
			addEvent(window,'load',tArg);
			break;
		case "string" :
			switch( tArg.charAt(0) ){
				case "#" ://ID
					var obj = document.getElementById(tArg.substring(1));//去除#
					this.elements.push( obj );//保存元素
					break;
				case "." ://class
					this.elements = getByClass(document,tArg.substring(1))//去除.,然后保存
					break;
				default : //tagName
					this.elements = document.getElementsByTagName(tArg);
			}
			break;
		case "object" : //对象
			this.elements.push(tArg);
			break;
	}
}
TQuery.prototype.eq = function(n){
	return $(this.elements[n]);//作为对象存进this.elements,以便链式结构
}
TQuery.prototype.find = function(str){
	var aResult = [];//存放临时数据
	for(var i=0;i<this.elements.length;i++){
		switch( str.charAt(0) ){
			case '.' :	//.class
				var aElems= getByClass( this.elements[i],str.substring(1) );
				aResult = aResult.concat(aElems);
				break;
			default :	//tagName
				var aElems = this.elements[i].getElementsByTagName(str);
				appendArr(aResult,aElems);
				//aResult = aResult.concat(aElems);会出问题,数组不能与集合
		}
	}
	var newObject = $();
	newObject.elements = aResult;
	return newObject;
}
TQuery.prototype.length = function(n){
	return this.elements.length;
}
TQuery.prototype.click = function(fn){
	for(var i=0;i<this.elements.length;i++){
		addEvent(this.elements[i],'click',fn);
	}
	return this;//返回对象,进行链式操作
}
TQuery.prototype.index = function(){
	return getIndex(this.elements[0]);	
}
TQuery.prototype.style = function(attr){
	return this.elements[0].currentStyle ? obj.currentStyle[attr] : getComputedStyle(this.elements[0])[attr];
}
TQuery.prototype.size = function(attr){
	return document.documentElement[attr] ? document.documentElement[attr] : document.body[attr]
}
TQuery.prototype.width = function(setting){
	if(setting){
		this.css('width',setting);
		return this;//返回对象,进行链式操作
	}
	return parseInt( this.style('width'));
}
TQuery.prototype.height = function(setting){
	if(setting){
		this.css('height',setting);
		return this;//返回对象,进行链式操作
	}
	return parseInt( this.style(this.elements[0],'height' ));
}
TQuery.prototype.scroll = function(dir,step,endFn) { //obj随意,dir>0往上滚,dir<0往下滚
	var step = step || 10;
	clearInterval(document.timerScroll);
	document.timerScroll = setInterval(function() {
		var position;
		if (dir == 'up') { //往上滚动
			var speed = ($(this).size('scrollTop') / step) + 1;
			position = $(this).size('scrollTop') - speed;
			if (position <= 0) { //如果滚到顶部
				document.body.scrollTop = document.documentElement.scrollTop = 0;
				endFn && endFn();
				clearInterval(document.timerScroll);
			}
		}else if(dir == 'down'){ //往下滚动
			var speed = (($(this).size('scrollHeight') - $(this).size('scrollTop') - $(this).size('clientHeight')) / step) + 1;
			position = $(this).size('scrollTop') + speed;
			if (position + $(this).size('clientHeight') >= $(this).size('scrollHeight')) { //如果滚到底部
				document.body.scrollTop = document.documentElement.scrollTop = $(this).size('scrollHeight');
				endFn && endFn();
				clearInterval(document.timerScroll);
			}
		}
		document.body.scrollTop = document.documentElement.scrollTop = position;
	}, 20)
	return this;//返回对象,进行链式操作
}
TQuery.prototype.bind = function(e,fn){
	for(var i=0;i<this.elements.length;i++){
		addEvent(this.elements[i],e,fn);
	}
	return this;//返回对象,进行链式操作
}
TQuery.prototype.show = function(){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].style.display = 'block';
	}
	return this;//返回对象,进行链式操作
}
TQuery.prototype.hide = function(){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].style.display = 'none';
	}
	return this;//返回对象,进行链式操作
}
TQuery.prototype.hover = function(over,out){
	for(var i=0;i<this.elements.length;i++){
		addEvent(this.elements[i],'mouseover',over);
		addEvent(this.elements[i],'mouseout',out);
	}
	return this;//返回对象,进行链式操作
}
TQuery.prototype.css = function(attr,value){
	if(arguments.length==2){//设置样式
		for(var i=0;i<this.elements.length;i++){
			this.elements[i].style[attr] = value;
		}
	}else{//一个参数
		if(typeof attr=="string"){//获取样式
			return this.elements[0].currentStyle ? this.elements[0].currentStyle[attr] : getComputedStyle(this.elements[0])[attr];
		}else{//json
			for(var i =0;i<this.elements.length;i++){
				for(var k in attr){
					this.elements[i].style[k] = attr[k];
				}
			}
		}
		
	}
	return this;//返回对象,进行链式操作
}
TQuery.prototype.animate = function(json,fn){
	startMove(this.elements[0], json, fn);
	function startMove(obj, json, endFn) {
		clearInterval(obj.timer);
		obj.timer = setInterval(function() {
			var bStop = true;
			for (attr in json) {
				// 1. 取得当前的值(可以是widht,height,opacity等的值)
				var objAttr = 0;
				if (attr == "opacity") {
					objAttr = Math.round(parseFloat($(obj).style(attr)) * 100);
				} else {
					objAttr = parseInt( $(obj).style(attr) );
				}
				// 2.计算运动速度
				var iSpeed = (json[attr] - objAttr) / 10;
				iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
				// 3. 检测所有运动是否到达目标
				if (objAttr != json[attr]) {
					bStop = false;
				}
				if (attr == "opacity") {
					obj.style.filter = 'alpha(opacity:' + (objAttr + iSpeed) + ')';
					obj.style.opacity = (objAttr + iSpeed) / 100;
				} else {
					obj.style[attr] = objAttr + iSpeed + 'px'; // 需要又.属性名的形式改成[]
				}
			}
			if (bStop) { // 表示所有运动都到达目标值
				clearInterval(obj.timer);
				endFn && endFn();
			}
		},
		30);
	}
	return this;//返回对象,进行链式操作
}
TQuery.prototype.drag = function(json){
	for(var i=0;i<this.elements.length;i++){
		new Drag( this.elements[i],this.elements[i],json )
	}
}
TQuery.prototype.attr = function(attr,value){
	if(arguments.length==2){//设置属性
		for(var i=0;i<this.elements.length;i++){
			this.elements[i][attr] = value;
		}
	}else{
		return this.elements[0][attr];	
	}
	return this;//返回对象,进行链式操作
}
TQuery.prototype.toggle = function(){
	var _arguments = arguments;
	for(var i=0;i<this.elements.length;i++){
		addToggle(this.elements[i]);
	}
	function addToggle(obj){
		var count = 0;
		addEvent(obj,'click',function(){
			_arguments[count++%_arguments.length].call(obj);//执行
		});
	}
	return this;//返回对象,进行链式操作
}
TQuery.prototype.extend = function(name,fn){//库扩展,插件
	TQuery.prototype[name] = fn;
	return this;//返回对象,进行链式操作
}
//==输出
function $(tArg){
	
	return new TQuery(tArg);
}
window.$ = $;
//通用函数
function addEvent(obj, event, fn){
	return obj.addEventListener ? obj.addEventListener(event, function(e){
			if(fn.call(obj)==false ){
				e.cancelBubble = true;//阻止冒泡
				e.preventDefault();//chrome,firefox下阻止默认事件
			}
		}, false) : obj.attachEvent('on' + event, function(){
			//fn.call(obj);//解决IE8下,this是window的问题
			if(fn.call(obj)==false ){
				event.cancelBubble = true;//阻止冒泡
				return false;//阻止默认事件,针对IE8
			}
	});
}
function getByClass(oParent,sClassName){
	var aElement = oParent.getElementsByTagName('*');//获取所有子节点
	var result = [];
	for(var i=0;i<aElement.length;i++){
		if( aElement[i].className == sClassName ){
			result.push(aElement[i]);
		}
	}
	return result;
}
function appendArr(arr1,arr2){//把arr2的集合/数组,push到arr1中
	for(var i=0;i<arr2.length;i++){
		arr1.push( arr2[i] );
	}
}
function getIndex(obj){
	var aBrother = obj.parentNode.children;
	for(var i=0;i<aBrother.length;i++){
		if(aBrother[i] == obj){
			return i;	
		}
	}
}
//===============系统对象上添加==============
//字符串倒序
String.prototype.reverse = function(){
	return this.split('').reverse().join('')
}
Array.prototype.sum = function(){//给数组添加sum求和方法
	var result = 0;
	for( var i=0;i<this.length;i++ ){
		result += this[i];
	}
	return result;
}
Array.prototype.unique = function(){//给数组添加去重方法
   var a = {};  
   for (var i=0; i<this.length; i++) {  
	   var v = this[i];  
	   if (typeof(a[v]) == 'undefined'){  
			a[v] = 1;  
	   }  
   };  
   this.length=0;  
   for (var i in a){  
		this[this.length] = i;  
   }  
   return this;  
}
//===============自定义对象==============
//面向对象选项卡
//使用方法 new TabSwitch('div1');
/*
	<div id="div1">
		<input />
		<input />
		<input />
		<div></div>
		<div></div>
		<div></div>
	</div>
结构:
*/
function TabSwitch(obj){
	var _this = this;
	//var div1 = document.getElementById(id);
	var div1 = obj;
	this.aBtn = div1.getElementsByTagName('input');
	this.aDiv = div1.getElementsByTagName('div');
	for(var i=0;i<this.aBtn.length;i++){
		this.aBtn[i].index=i;
		this.aBtn[i].onclick=function(){
			_this.fnClick(this);
			}
	}
};
TabSwitch.prototype.fnClick = function(oBtn){
	for(var j=0;j<this.aBtn.length;j++){
		this.aBtn[j].className='';
		this.aDiv[j].style.display='none';
	}
	oBtn.className='active';
	this.aDiv[oBtn.index].style.display='block';
}
//拖拽
//使用方法 new Drag($('press'),$('move'),{left:[100,200],top:[200,500]});(鼠标按住的目标,要移动的目标)
/*
var json = {
			left:[100,300],
			top:[200,500]
			}
*/
function Drag(pressTarget,MoveTarget,json){
	var _this = this;
	this.disX = 0;
	this.disY = 0;
	if(json){
		this.json = json;
	}
	this.MoveTarget = MoveTarget;
	pressTarget.onmousedown = function(e){
		_this.fnDown(e);
		return false;//chrome,firefox去除文字选中
	};
}
Drag.prototype.fnDown = function(e){//鼠标按下(未松开)
	var e = e || window.event;
	var _this = this;
	this.disX = e.clientX - this.MoveTarget.offsetLeft;
	this.disY = e.clientY - this.MoveTarget.offsetTop;
	if(this.MoveTarget.setCaptrue){//IE,解决文字选中
		this.MoveTarget.onmousemove = function(e){
			_this.fnMove(e);
		};
		this.MoveTarget.onmouseup = function(){
			var this_ = this;
			_this.fnUp(this_);
		};
		this.MoveTarget.setCaptrue();//添加事件捕获
	}else{
		document.onmousemove = function(e){
			_this.fnMove(e);
		};
		document.onmouseup = function(){
			var this_ = this;
			_this.fnUp(this_);
		};
	}
}
Drag.prototype.fnMove = function(e){//鼠标移动,则div移动
	var e = e || window.event;
	var L = this.json ? this.range(e.clientX - this.disX,this.json.L[0],this.json.L[1]) : (e.clientX - this.disX);
	var T = this.json ? this.range(e.clientY - this.disY,this.json.T[0],this.json.T[1]) : (e.clientY - this.disY);
	this.MoveTarget.style.left = L + 'px';
	this.MoveTarget.style.top = T + 'px';
}
Drag.prototype.fnUp = function(this_){//鼠标松开,则停止
		this_.onmousemove = null;
		this_.onmouseup = null;
		this_.setCaptrue && this_.releaseCapture();//释放捕获
}
Drag.prototype.range = function(iNow,iMin,iMax){
	if(iNow>iMax){
		return iMax;
	}else if(iNow<iMin){
		return iMin;
	}else{
		return iNow;
	}
}
//拖拽改变大小
//使用方法 new scale($('press'),$('move'),{width:[100,200],height:[200,500]});(鼠标按住的目标,要移动的目标)
/*
var json = {
			width:[100,300],
			height:[200,500]
			}
*/
function Scale(pressTarget,MoveTarget,json){
	if(json){
		this.json = json;	
	}
	this.MoveTarget = MoveTarget;
	var _this = this;
	pressTarget.onmousedown = function(e){
		_this.onmousedownFn(e)
		};
}
Scale.prototype.onmousedownFn = function(e){
	var e = e || window.event;
	this.disX = e.clientX;
	this.disY = e.clientY;
	this.disW = this.MoveTarget.offsetWidth;
	this.disH = this.MoveTarget.offsetHeight;
	var _this = this;
	document.onmousemove = function(e){
		_this.mouseoverFn(e)
		};
	document.onmouseup = function(e){
		_this.mouseupFn(e)
		};
}
Scale.prototype.mouseoverFn = function(e){
	var e = e || window.event;
	this.W = this.json ? this.range(e.clientX - this.disX + this.disW,this.json.width[0],this.json.width[1]) : (e.clientX - this.disX + this.disW);
	this.H = this.json ? this.range(e.clientY - this.disY + this.disH,this.json.height[0],this.json.height[1]) : (e.clientY - this.disY + this.disH);
	this.MoveTarget.style.width = this.W + 'px';
	this.MoveTarget.style.height = this.H + 'px';
}
Scale.prototype.mouseupFn = function(){
	document.onmousemove = null;
	document.onmouseup = null;
}
Scale.prototype.range = function(iNow,iMin,iMax){
	if(iNow>iMax){
		return iMax;
	}else if(iNow<iMin){
		return iMin;
	}else{
		return iNow;
	}
}



})()