Greasy Fork

like jq

我的仿jq库

目前为 2015-07-18 提交的版本。查看 最新版本。

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.greasyfork.icu/scripts/11045/62713/like%20jq.js 

// ==UserScript==
// @name	like jq
// @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;
	}
}



})()