☰

TQuery

我的仿jq库

当前为 2015-07-25 提交的版本，查看 最新版本。

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

  1. // ==UserScript==
  2. // @name	TQuery
  3. // @author	burningall
  4. // @description	我的仿jq库
  5. // @version     2015.7.25
  6. // @run-at	document-start
  7. // @compatible  chrome  
  8. // @compatible  firefox  
  9. // @license     The MIT License (MIT); http://opensource.org/licenses/MIT
  10. // @supportURL		http://www.burningall.com
  11. // @contributionURL	troy450409405@gmail.com|alipay.com
  12. // @namespace https://gf.qytechs.cn/zh-CN/users/3400-axetroy
  13. // ==/UserScript==
  14.  
  15.  
  16. ;(function(window,document){//自调用，避免全局污染
  17. //========构造函数========
  18. function TQuery(tArg){
  19. 	this.arg = tArg;//保存传进来的参数
  20. 	this.elements = [];//用来保存选择的元素
  21. 	this.doc = document;
  22. 	this.version = 1.0;
  23. 	switch( typeof tArg ){
  24. 		case "undefined" :
  25. 			return this;
  26. 		case "function" :
  27. 			addEvent(window,'load',tArg);
  28. 			break;
  29. 		case "string" :
  30. 				switch( tArg.charAt(0) ){
  31. 					case '<' :	//<div></div>，创建元素
  32. 						var tagName = tArg.match(/^\'<'[a-z]+\'>'/ig)[0].match(/[a-z]+/ig)[0];			//标签名
  33. 						var tagContent = tArg.match( /\'>'[\s\S]*\'<'/ )[0];
  34. 						var content = tagContent.substring(1,tagContent.length-1);					//标签内容
  35. 						var newElement = this.doc.createElement(tagName);
  36. 						newElement.innerHTML = content;
  37. 						this.elements.push(newElement);
  38. 						break;
  39. 					default:	//默认情况下是选择符
  40. 						if(this.doc.querySelectorAll){//现代浏览器
  41. 							var aElems = this.doc.querySelectorAll(tArg);
  42. 							for(var i=0;i<aElems.length;i++){
  43. 								this.elements.push(aElems[i]);
  44. 							}
  45. 						}else if( !this.doc.querySelectorAll ){
  46. 							alert( '您的浏览器版本太低，请升级至IE8或以上，或者使用chrome，firefox，opera等现代浏览器' );
  47. 						}
  48. 						/*
  49. 						//让IE8以下去死，不兼容了
  50. 						else{//通用，兼容到IE5-11，firefox，chrome…………
  51. 								var elements = tArg.split(/\s+/ig);	//拆分节点，并且保持进数组[ul,li,a]
  52. 								var childElements = [];			//创建一个临时数组
  53. 								var parentNode = [];			//用来存放父节点
  54. 								for(var i=0;i<elements.length;i++){
  55. 									switch( elements[i].charAt(0) ){
  56. 										case "#" ://ID
  57. 											childElements = [];//清理临时节点，以便父节点失效，子节点有效
  58. 											childElements.push( document.getElementById(elements[i].substring(1)) );
  59. 											parentNode = childElements;	//保存父节点，因为childElements需要清理，所以需要创建node储存。
  60. 											break;
  61. 										case "." ://class
  62. 											childElements = [];//清理临时节点，以便父节点失效，子节点有效
  63. 											//输出父节点，如果开头为  '.ul li'
  64. 											if(parentNode=='' || parentNode == null){
  65. 												var aElement = getByClass(document,elements[0].substring(1));
  66. 												for(var y=0;y<aElement.length;y++){
  67. 													parentNode.push( aElement[y] );
  68. 												}
  69. 												childElements = parentNode;
  70. 												break;
  71. 											}
  72. 											//输出子集节点
  73. 											for(var j=0;j<parentNode.length;j++){
  74. 												var temps =[];		//创建一个临时数组，用于储存子集元素
  75. 												var aElement = getByClass(parentNode[j],elements[i].substring(1));
  76. 												for(var x=0;x<aElement.length;x++){
  77. 													temps.push( aElement[x] );
  78. 												}
  79. 												for(var k=0;k<temps.length;k++){
  80. 													childElements.push( temps[k] );
  81. 												}
  82. 											}
  83. 											break;
  84. 										default : //tagName
  85. 											childElements = [];//清理临时节点，以便父节点失效，子节点有效
  86. 											//输出父节点，如果开头为  'ul li'
  87. 											if(parentNode=='' || parentNode == null){
  88. 												var aElement = document.getElementsByTagName(elements[0]);
  89. 												for(var y =0;y<aElement.length;y++){
  90. 													parentNode.push( aElement[y] );
  91. 												}
  92. 												childElements = parentNode;
  93. 												break;
  94. 											}
  95. 											//输出子集节点
  96. 											for(var j=0;j<parentNode.length;j++){
  97. 												var temps =[];		//创建一个临时数组，用于储存子集元素
  98. 												var aElement = parentNode[j].getElementsByTagName(elements[i]);//获取伙计下的所有子集元素
  99. 												for(var x=0;x<aElement.length;x++){
  100. 													temps.push( aElement[x] );
  101. 												}
  102. 												for(var k=0;k<temps.length;k++){
  103. 													childElements.push( temps[k] )
  104. 												}
  105. 											}
  106. 									}//switch
  107. 								}//for
  108. 								this.elements = childElements;
  109. 						}
  110. 						*/
  111. 					break;
  112. 				}
  113. 			break;
  114. 		case "object" : //对象
  115. 			if( tArg.push ){//如果是数组
  116.  
  117. 			}else if(tArg === false){//如果是json
  118.  
  119. 			}
  120. 			this.elements.push(tArg);
  121. 			break;
  122. 	}
  123. 	this.length = this.elements.length;
  124. }
  125. //========链式操作方法========
  126. //eq根据下标选择
  127. TQuery.prototype.eq = function(n){
  128. 	var m = n || 0;
  129. 	this.length = 1;
  130. 	return $(this.elements[m]);//作为对象存进this.elements，以便链式结构
  131. };
  132. //not过滤器,从元素集合中，剔除某些部分
  133. TQuery.prototype.not = function(str){
  134. 	var childElements = [];//存放临时数据
  135. 	for(var i=0;i<this.length;i++){
  136. 		switch( str.charAt(0) ){
  137. 			case '#':	//id
  138. 				if( $(this.elements[i]).attr('id') != str.substring(1) ){
  139. 					childElements.push( this.elements[i] );
  140. 				}
  141. 				break;
  142. 			case '.':	//class
  143. 				if( !this.hasClass(this.elements[i],str.substring(1)) ){//没有匹配到class
  144. 					childElements.push( this.elements[i] );
  145. 				}
  146. 				break;
  147. 			default :	//tagName
  148. 				if( this.elements[i].tagName != str.toUpperCase() ){
  149. 					childElements.push( this.elements[i] );
  150. 				}
  151. 		}//swicth
  152. 		/*
  153. 		if(this.doc.querySelectorAll){//现代浏览器
  154. 			var aElems = this.elements[i].querySelectorAll(':not(' + str +')');
  155. 			var length = aElems.length;
  156. 			var j =0;
  157. 			while(j<length){
  158. 				childElements.push( aElems[j] );
  159. 				j++
  160. 			}
  161. 		}else if( !this.doc.querySelectorAll ){
  162. 			alert( '您的浏览器版本太低，请升级至IE8或以上，或者使用chrome，firefox，opera等现代浏览器' );
  163. 		}
  164. 		*/
  165. 		/*
  166. 		//让IE8以下去死，不兼容了
  167. 		else{//通用
  168. 			var aElems =this.elements[i].getElementsByTagName('*');//获得所有子节点
  169. 			var length = aElems.length;
  170. 			switch( str.charAt(0) ){
  171. 				case '#' : 	//#div1
  172. 					for(var j=0;j<length;j++){
  173. 						if( $(aElems[j]).attr('id') !== str.substring(1) ){
  174. 							childElements.push(aElems[j]);
  175. 						}
  176. 					}
  177. 					break;
  178. 				case '.' :	//.class
  179. 					for(var j=0;j<length;j++){
  180. 						if( $().hasClass( aElems[j],str.substring(1) ) == false ){
  181. 							childElements.push(aElems[j]);
  182. 						}
  183. 					}
  184. 					break;
  185. 				default :	//tagName
  186. 					for(var j=0;j<length;j++){
  187. 						if(aElems[j].tagName.toLowerCase() != str ){
  188. 							childElements.push(aElems[j]);
  189. 						}
  190. 					}//for
  191. 			}//switch
  192. 		}
  193. 		*/
  194. 	}//for
  195. 	this.elements = childElements;
  196. 	this.length = childElements.length;//返回新的长度
  197. 	return this;
  198. };
  199. //filter,从元素集合众，特选某些部分
  200. TQuery.prototype.filter = function(str){
  201. 	var childElements = [];//存放临时数据
  202. 	for(var i=0;i<this.length;i++){
  203. 		switch(str.charAt(0)){
  204. 			case '#':
  205. 				if( $(this.elements[i]).attr('id') == str.substring(1) ){
  206. 					childElements.push( this.elements[i] );
  207. 				}
  208. 				break;
  209. 			case '.':
  210. 				if( this.hasClass(this.elements[i],str.substring(1)) ){//如果有class
  211. 					childElements.push( this.elements[i] );
  212. 				}
  213. 				break;
  214. 			default:
  215. 				if( this.elements[i].tagName == str.toUpperCase() ){
  216. 					childElements.push( this.elements[i] );
  217. 				}
  218. 		}//switch
  219. 	}//for
  220. 	this.elements = childElements;
  221. 	this.length = childElements.length;//返回新的长度
  222. 	return this;
  223. };
  224. //find选择器，选择子集元素包含  id class tagName attr
  225. TQuery.prototype.find = function(str){
  226. 	var childElements = [];//存放临时数据
  227. 	for(var i=0;i<this.length;i++){
  228. 		if(document.querySelectorAll){//现代浏览器
  229. 			var aElems = this.elements[i].querySelectorAll(str);
  230. 			var length = aElems.length;
  231. 			var j =0;
  232. 			while(j<length){
  233. 				childElements.push( aElems[j] );
  234. 				j++;
  235. 			}
  236. 		}else{//通用，支持IE8一下
  237. 			switch( str.charAt(0) ){
  238. 				case '#' : 	//#div1
  239. 					var aElemsid = this.elements[i].getElementById(str.substring(1));
  240. 					childElements.push( aElemsid );
  241. 					break;
  242. 				case '.' :	//.class
  243. 					var aElemsclass= getByClass( this.elements[i],str.substring(1) );
  244. 					childElements = childElements.concat(aElemsclass);
  245. 					break;
  246. 				case '[' ://属性选择器[data=""]
  247. 					var attrinfo = str.replace(/(\[+|\]+|\"|\"+])/g,'').split('=');
  248. 					var attr = attrinfo[0];
  249. 					var child =  this.elements[i].children;
  250. 					var childLength = child.length;
  251. 					var getvalue;
  252. 					if( attrinfo.length === 1 ){//如果只有属性，没有值
  253. 						for(var x=0;x<childLength;x++){
  254. 							getvalue = child[x].getAttribute(attr);
  255. 							if( getvalue!==null ){
  256. 								childElements.push( child[x] );
  257. 							}
  258. 						}
  259. 					}else if( attrinfo.length === 2 ){//如果有值
  260. 						var value = attrinfo[1];
  261. 						for(var y=0;y<childLength;y++){
  262. 							getvalue = child[y].getAttribute(attr);
  263. 							if( getvalue!==null && getvalue == value ){
  264. 								childElements.push( child[y] );
  265. 							}
  266. 						}
  267. 					}
  268. 					break;
  269. 				default :	//tagName
  270. 					var aElemstag = this.elements[i].getElementsByTagName(str);
  271. 					var tagLength = aElemstag.length;
  272. 					for(var k=0;k<tagLength;k++){
  273. 						childElements.push( aElemstag[k] );
  274. 					}
  275. 			}
  276. 		}
  277. 	}
  278. 	this.elements = childElements;
  279. 	this.length = childElements.length;//返回新的长度
  280. 	return this;
  281. };
  282. //add，将元素添加到已有的合集,去掉重复项
  283. TQuery.prototype.add = function(str){
  284. 	var newTQ = $(str);//先获取元素
  285. 	var newTQLength = newTQ.length;
  286. 	var temps = this.elements;
  287. 	var a = {};
  288. 	for(var i=0;i<this.length;i++){//把原有的元素导入a对象
  289. 		a[ this.elements[i] ] = 1;
  290. 	}
  291. 	for(var j=0;j<newTQLength;j++){//导入要添加的元素
  292. 		var v = newTQ.elements[j];
  293. 		if(typeof a[ v ] =='undefined'){//如果不重复，则添加进去
  294. 			a[v] = 1;//随便设置
  295. 			temps.push( v );
  296. 		}
  297. 	}
  298. 	//this.elements = temps.unique();//重复的DOM节点去重
  299. 	this.elements = temps;
  300. 	this.length = this.elements.length;//生成新的长度
  301. 	return this;//返回对象
  302. };
  303. //each循环遍历
  304. TQuery.prototype.each = function(fn){
  305. 	for(var i=0;i<this.length;i++){
  306. 		var _this = this.elements[i];
  307. 		fn.call(_this);
  308. 	}
  309. 	return this;//返回对象
  310. };
  311. //click事件
  312. TQuery.prototype.click = function(fn){
  313. 	var length = this.elements.length;
  314. 	for(var i=0;i<length;i++){
  315. 		addEvent(this.elements[i],'click',fn);
  316. 	}
  317. 	return this;//返回对象，进行链式操作
  318. };
  319. //获取DOM/window/document的width/height,单位px带不带都行
  320. TQuery.prototype.width = function(setting){
  321. 	if(!setting && this.elements[0] instanceof Object && (this.elements[0].alert || this.elements[0].body) ){//如果是window，或document
  322. 		return this.doc.body.scrollWidth> this.doc.documentElement.scrollWidth ? this.doc.body.scrollWidth : this.doc.documentElement.scrollWidth;//获取带padding和margin的值
  323. 	}else if(setting){//设置宽度
  324. 		this.elements[0].style.width = setting.toString().replace('px','') + 'px';
  325. 		return this;//返回对象，进行链式操作
  326. 	}else{//读取
  327. 		return this.elements[0].offsetWidth;//读取
  328. 	}
  329. };
  330. TQuery.prototype.height = function(setting){
  331. 	if(this.elements[0] instanceof Object && (this.elements[0].alert || this.elements[0].body) ){//如果是window，或document，则返回整个文档高度
  332. 		return this.doc.body.scrollHeight>this.doc.documentElement.scrollHeight ? this.doc.body.clientHeight : this.doc.documentElement.scrollHeight;//获取带padding和margin的值
  333. 	}else if(setting){//设置高度
  334. 		//this.css('height',setting.toString().replace('px','') );
  335. 		this.elements[0].style.height = setting.toString().replace('px','') + 'px';
  336. 		return this;//返回对象，进行链式操作
  337. 	}else if(!setting){
  338. 		return this.elements[0].offsetHeight;//获取高度
  339. 	}
  340. };
  341. //获取可视区域宽高
  342. TQuery.prototype.viewWidth = function(){
  343. 	return this.doc.body.clientWidth<this.doc.documentElement.clientWidth ? this.doc.body.clientWidth : this.doc.documentElement.clientWidth;//取较小值
  344. };
  345. TQuery.prototype.viewHeight = function(){
  346. 	return this.doc.body.clientHeight<this.doc.documentElement.clientHeight ? this.doc.body.clientHeight : this.doc.documentElement.clientHeight;//取较小值
  347. };
  348. //获取DOM的top/left
  349. TQuery.prototype.top = function(setting){
  350. 	if(setting){
  351. 		this.css('top',setting);
  352. 		return this;//返回对象，进行链式操作
  353. 	}
  354. 	return parseInt( this.elements[0].offsetTop );
  355. };
  356. TQuery.prototype.left = function(setting){
  357. 	if(setting){
  358. 		this.css('left',setting);
  359. 		return this;//返回对象，进行链式操作
  360. 	}
  361. 	return parseInt( this.elements[0].offsetLeft );
  362. };
  363. //鼠标滚轮滚动
  364. /*
  365. IE			attachEvent				mousewheel				wheelDelta		滚轮下e.wheelDelta<0
  366. firefox		addEventListener		DOMMouseScroll			detail			滚轮下e.detail>0
  367. chrome		addEventListener		mousewheel				wheelDelta		滚轮下e.wheelDelta<0
  368. */
  369.  
  370. TQuery.prototype.mouseScroll = function(json){
  371. 	this.bind('mousewheel DOMMouseScroll',function(e){
  372. 		if(e.wheelDelta){//chrome,ie
  373. 			if( e.wheelDelta > 0 ){//滚轮向下滚动
  374. 				json.up.call(this,e);
  375. 			}else{
  376. 				json.down.call(this,e);
  377. 			}
  378. 		}else{//狗日的firefox
  379. 			if(e.detail<0){//鼠标滚轮按下
  380. 				json.up.call(this,e);
  381. 			}else{
  382. 				json.down.call(this,e);
  383. 			}
  384. 		}
  385. 	});
  386. 	return this;//返回对象，进行链式操作
  387. };
  388. //scroll到某一位置，或获取滚动条位置
  389. TQuery.prototype.scrollTop = function(target,endFn){
  390. 	if(target!==0 && !target){//没有参数，则读取
  391. 		var scrollTop = this.doc.body.scrollTop || this.doc.documentElement.scrollTop;
  392. 		return scrollTop;
  393. 	}
  394. 	var _this = this;
  395. 	clearInterval(this.doc.timerScroll);
  396. 	this.doc.timerScroll = setInterval(function(){
  397. 		var nowScrollTop = _this.doc.body.scrollTop || _this.doc.documentElement.scrollTop;
  398. 		var dif = Math.abs(nowScrollTop-target);	//目前与目标的差值
  399. 		var speed = (dif/10)+10;	//滚动速度
  400. 		if(nowScrollTop-target<0){//向下滚
  401. 			speed = speed;
  402. 		}else{//向上滚动
  403. 			speed = - speed;
  404. 		}
  405. 		var position = nowScrollTop + (speed);	//生成计算后的位置
  406. 		if( (speed>0 && position>=target) || (speed<0 && position<=target) ){//如果到达目标点
  407. 			_this.doc.body.scrollTop = _this.doc.documentElement.scrollTop = target;
  408. 			endFn && endFn.call(_this);	//防止this冲突，此处this指的是TQuery对象
  409. 			clearInterval(_this.doc.timerScroll);
  410. 		}
  411. 		_this.doc.body.scrollTop = _this.doc.documentElement.scrollTop = position;
  412. 	},20);
  413. 	return this;//返回对象，进行链式操作
  414. };
  415. //scroll到顶部或底部
  416. TQuery.prototype.scroll = function(dir,step,endFn) { //obj随意，dir>0往上滚，dir<0往下滚
  417. 	var step1 = step || 10;
  418. 	clearInterval(this.doc.timerScroll);
  419. 	var _this = this;
  420. 	var speed;
  421. 	this.doc.timerScroll = setInterval(function() {
  422. 		var position;
  423. 		if (dir == 'up') { //往上滚动
  424. 			speed = ($(this).size('scrollTop') / step1) + 1;
  425. 			position = $(this).size('scrollTop') - speed;
  426. 			if (position <= 0) { //如果滚到顶部
  427. 				_this.doc.body.scrollTop = _this.doc.documentElement.scrollTop = 0;
  428. 				endFn && endFn();
  429. 				clearInterval(_this.doc.timerScroll);
  430. 			}
  431. 		}else if(dir == 'down'){ //往下滚动
  432. 			speed = (($(this).size('scrollHeight') - $(this).size('scrollTop') - $(this).size('clientHeight')) / step) + 1;
  433. 			position = $(this).size('scrollTop') + speed;
  434. 			if (position + $(this).size('clientHeight') >= $(this).size('scrollHeight')) { //如果滚到底部
  435. 				_this.doc.body.scrollTop = _this.doc.documentElement.scrollTop = $(this).size('scrollHeight');
  436. 				endFn && endFn();
  437. 				clearInterval(_this.doc.timerScroll);
  438. 			}
  439. 		}
  440. 		_this.doc.body.scrollTop = _this.doc.documentElement.scrollTop = position;
  441. 	}, 20);
  442. 	return this;//返回对象，进行链式操作
  443. };
  444. //事件的绑定与删除
  445. TQuery.prototype.bind = function(type,fn){
  446. 	if(arguments.length==1){//如果只传一个json参数e
  447. 		for(var k=0;k<this.length;k++){
  448. 			for(var attr in type){
  449. 				addEvent(this.elements[k],attr,type[attr]);
  450. 			}
  451. 		}
  452. 	}else{//如果传两个参数，则统一执行一个e
  453. 		var events = type.split(' ');
  454. 		var eventsLength = events.length;
  455. 		for(var i=0;i<this.length;i++){
  456. 			var j=0;
  457. 			while(j<eventsLength){
  458. 				addEvent(this.elements[i],events[j],fn);
  459. 				j++;
  460. 			}
  461. 		}
  462. 	}
  463. 	return this;//返回对象，进行链式操作
  464. };
  465. //解除事件绑定，匿名函数无法解除绑定
  466. TQuery.prototype.unbind = function(e,fn){
  467. 	for(var i=0;i<this.length;i++){
  468. 		removeEvent(this.elements[i],e,fn);
  469. 	}
  470. 	return this;//返回对象，进行链式操作
  471. };
  472. //类似onload,onmouseover等
  473. TQuery.prototype.on = function(type,fn){
  474. 	if(arguments.length==1){//如果只传一个json参数
  475. 		for(var k=0;k<this.length;k++){
  476. 			for(var attr in type){
  477. 				this.elements[k][ 'on'+attr ] = type[attr];
  478. 			}
  479. 		}
  480. 	}else{//如果传两个参数e,fn
  481. 		var events = type.split(' ');//获取每个事件
  482. 		var eventsLength = events.length;
  483. 		for(var i=0;i<this.length;i++){
  484. 			var j =0;
  485. 			while(j<eventsLength){
  486. 				this.elements[i][ 'on'+events[j] ] = fn;
  487. 				j++;
  488. 			}
  489. 		}
  490. 	}
  491. 	return this;//返回对象，进行链式操作
  492. };
  493. //one执行一次操作
  494. TQuery.prototype.one = function(e,fn){
  495. 	var _this = this;
  496. 	for(var i=0;i<this.length;i++){
  497. 		this.on(e,function(){
  498. 			fn.call(_this);//解决匿名函数this指针不正确的问题
  499. 			var es = e.split(' ');
  500. 			var j=0;
  501. 			while(j<es.length){
  502. 				this['on'+es[j]] = null;
  503. 				j++;
  504. 			}
  505. 		});
  506. 	}
  507. 	return this;//返回对象，进行链式操作
  508. };
  509. //show
  510. TQuery.prototype.show = function(){
  511. 	for(var i=0;i<this.length;i++){
  512. 		this.elements[i].style.display = 'block';
  513. 	}
  514. 	return this;//返回对象，进行链式操作
  515. };
  516. //hide
  517. TQuery.prototype.hide = function(){
  518. 	for(var i=0;i<this.length;i++){
  519. 		this.elements[i].style.display = 'none';
  520. 	}
  521. 	return this;//返回对象，进行链式操作
  522. };
  523. //设置hover
  524. //配置：json{
  525. //	'over':overfn(),
  526. //	'out':outfn(),
  527. //	'overDelay':500		//延迟执行overfn()		可选项，默认为0，单位ms
  528. //	'outDelay':1000		//延迟执行outfn()
  529. //}
  530. TQuery.prototype.hover = function(json){
  531. 	if( typeof json.overDelay=='undefined' ){
  532. 		json.overDelay = 0;
  533. 	}
  534. 	if( typeof json.outDelay=='undefined' ){
  535. 		json.outDelay = 0;
  536. 	}
  537. 	this.bind({
  538. 		'mouseover':function(){
  539. 			var _this = this;
  540. 			clearTimeout( this.hover );
  541. 			this.hover = setTimeout(function(){
  542. 				json.over.call(_this);
  543. 			},json.overDelay);
  544. 		},
  545. 		'mouseout':function(){
  546. 			var this_ = this;
  547. 			clearTimeout( this.hover );
  548. 			this.hover = setTimeout(function(){
  549. 				json.out.call(this_);
  550. 			},json.outDelay);
  551. 		}
  552. 	});
  553. 	return this;//返回对象，进行链式操作
  554. };
  555. //设置css
  556. //$('').css('width',value)	//value>>>200||200px||20%，可以不带单位px，可以设置百分比
  557. TQuery.prototype.css = function(attr,value){
  558. 	var type = /(width|left|top|bottom|right|margin|padding){1,}/ig;
  559. 	var type2 = /height/ig;
  560. 	if(arguments.length==2){//设置样式
  561. 		if( type.test(attr) && value.indexOf('%')<0 ){
  562. 			value = parseFloat(value).toFixed(2) + 'px';
  563. 		}
  564. 		for(var m=0;m<this.length;m++){
  565. 			this.elements[m].style[attr] = value;
  566. 		}
  567. 	}else{//一个参数
  568. 		if(typeof attr=="string"){//获取样式
  569. 			return this.elements[0].currentStyle ? this.elements[0].currentStyle[attr] : getComputedStyle(this.elements[0])[attr];
  570. 		}else if( typeof(attr) == "object" && Object.prototype.toString.call(attr).toLowerCase() == "[object object]" && !attr.length ){//json
  571. 			for(var i =0;i<this.length;i++){
  572. 				for(var k in attr){
  573. 					//k == 属性名字,width,height,opacity等
  574. 					//attr[k] == 属性值,300px,#303030等
  575. 					if((type.test(k) || type2.test(k)) && attr[k].indexOf('%')<0 ){//如果没有%符号
  576. 						attr[k] = parseFloat( attr[k] ).toFixed(2) + 'px';
  577. 					}
  578. 					this.elements[i].style[k] = attr[k];
  579. 				}
  580. 			}
  581. 		}
  582. 	}
  583. 	return this;//返回对象，进行链式操作
  584. };
  585. //设置动画
  586. //json表示要变化的属性，configjson表示动画过程/结束要执行的函数,以及速度参数
  587. //目前不支持百分比，可以不带单位px,opacity单位100制
  588. TQuery.prototype.animate = function(json,configjson){
  589. 	//如果两个参数.animate('width','300');
  590. 	for(var i=0;i<this.length;i++){
  591. 		var _this = this.elements[i];
  592. 		clearInterval(_this.animate);
  593. 		_this.animate = setInterval(function() {
  594. 			//注意，此处this指的是window（匿名函数）
  595. 			var bStop = true;//判断运动是否停止
  596. 			for(var attr in json){//attr代表属性,'width','height'.而json[attr]代表数值
  597. 				// 1. 取得当前的值（可以是width，height，opacity等的值）
  598. 				var objAttr = 0 ;
  599. 				if(attr == 'opacity'){//获取当前数值
  600. 					objAttr = Math.round(parseFloat( $(_this).style(attr) ) * 100);
  601. 				}else{
  602. 					objAttr = parseInt( $(_this).style(attr) );
  603. 				}
  604. 				// 2.计算运动速度
  605. 				var jsonattr = parseFloat( json[attr] );
  606. 				var speedConfig = (configjson && typeof ( configjson.speed ) != 'undefined') ? configjson.speed : 10;
  607. 				var iSpeed = (jsonattr - objAttr) / speedConfig;	//(目标数值-当前数值)/10
  608. 				iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);	//如果速度>0，则速度向上取整，如果小于0，则保留小数
  609. 				// 3. 检测所有运动是否到达目标
  610. 				//objAttr,当前点，json[attr]为目标点
  611. 				if ( (iSpeed>0 && objAttr <= jsonattr) || (iSpeed<0 && objAttr >= jsonattr) ) {//如果有其中一项没有达到目标
  612. 					bStop = false;
  613. 				}
  614. 				if (attr == "opacity") {
  615. 					_this.style.filter = 'alpha(opacity:' + (objAttr + iSpeed) + ')';
  616. 					_this.style.opacity = (objAttr + iSpeed) / 100;
  617. 				} else {
  618. 					_this.style[attr] = objAttr + iSpeed + 'px';	//赋值开始运动
  619. 				}
  620. 				configjson && typeof ( configjson.load  != 'undefined') && configjson.load.call(_this);//每次都执行
  621. 				if (bStop) { // 表示所有运动都到达目标值
  622. 					clearInterval(_this.animate);
  623. 					configjson && typeof (configjson.end) != 'undefined' && configjson.end.call(_this);//传入参数，防止当前this错误
  624. 				}
  625. 			}//for
  626. 		},30);
  627. 	}//for
  628. 	return this;//返回对象，进行链式操作
  629. };
  630. //停止动画
  631. TQuery.prototype.stop = function(delay){
  632. 	var stardelay = delay ? delay : 0;
  633. 	setTimeout(function(){
  634. 		clearInterval( $(this).elements[0].animate );
  635. 	},stardelay);
  636. 	return this;//返回对象，进行链式操作
  637. };
  638. //设置拖拽
  639. TQuery.prototype.drag = function(json){
  640. 	for(var i=0;i<this.length;i++){
  641. 		new Drag( this.elements[i],this.elements[i],json );
  642. 	}
  643. 	return this;
  644. };
  645. //设置attr
  646. TQuery.prototype.attr = function(attr,value){
  647. 	//attr不能是数字
  648. 	if(arguments.length==2){//2个参数，设置属性
  649. 		for(var k=0;k<this.length;k++){
  650. 			if(this.elements[k][attr]){
  651. 				this.elements[k][attr] = value;
  652. 			}else{
  653. 				this.elements[k].setAttribute(attr,value);
  654. 			}
  655. 		}
  656. 	}else if(arguments.length==1){//1个参数
  657. 		if( typeof(attr) == "object" && Object.prototype.toString.call(attr).toLowerCase() == "[object object]" && !attr.length ){//如果是json，则分别设置属性
  658. 			for(var i=0;i<this.length;i++){
  659. 				for(var j in attr){
  660. 					if( this.elements[i][j] ){//如果属性是可以直接读取
  661. 						this.elements[i][j] = attr[j];
  662. 					}else{//如果是自定义属性
  663. 						this.elements[i].setAttribute(j,attr[j]);
  664. 					}
  665. 				}
  666. 			}
  667. 		}else{//读取属性
  668. 			return this.elements[0][attr] || this.elements[0].getAttribute(attr);
  669. 		}
  670. 	}
  671. 	return this;//返回对象，进行链式操作
  672. };
  673. //设置自定义属性
  674. TQuery.prototype.custormAttr = function(attr,value){
  675. 	if(arguments.length==2){//两个参数，设置属性
  676. 		for(var k=0;k<this.length;k++){
  677. 			this.elements[k].setAttribute(attr,value);
  678. 		}
  679. 	}else if(arguments.length==1){//1个参数
  680. 		if( typeof(attr) == "object" && Object.prototype.toString.call(attr).toLowerCase() == "[object object]" && !attr.length ){//json格式，则分别设置
  681. 			for(var i=0;i<this.length;i++){
  682. 				for(var j in attr){
  683. 					this.elements[i].setAttribute(j,attr[j]);
  684. 				}
  685. 			}
  686. 		}else{//读取属性
  687. 			return this.elements[0].getAttribute(attr);
  688. 		}
  689. 	}
  690. 	return this;//返回对象，进行链式操作
  691. };
  692. //点击开关toggle
  693. TQuery.prototype.toggle = function(){
  694. 	var _arguments = arguments;
  695. 	var	length = _arguments.length;
  696. 	var count = 0;
  697. 	for(var i=0;i<this.length;i++){
  698. 		var _this = this.elements[i];
  699. 		this.on('click',function(){
  700. 			_arguments[count++%length].call(_this);//执行	，解决this错误的问题
  701. 		});
  702. 	}
  703. 	return this;//返回对象，进行链式操作
  704. };
  705. //设置innerHTML
  706. TQuery.prototype.html = function(setting){
  707. 	if(setting){//设置
  708. 		for(var i=0;i<this.length;i++){
  709. 			this.elements[i].innerHTML = setting;
  710. 		}
  711. 		return this;
  712. 	}
  713. 	return this.elements[0].innerHTML;
  714. };
  715. //设置text
  716. TQuery.prototype.text = function(setting){
  717. 	if(setting){//设置
  718. 		for(var i=0;i<this.length;i++){
  719. 			this.elements[i].innerText = this.elements[i].textContent = setting;
  720. 		}
  721. 		return this;
  722. 	}
  723. 	//读取
  724. 	return this.elements[0].innerText || this.elements[0].textContent;
  725. };
  726. //get,将TQuery对象转换成DOM对象,多个则返回数组
  727. TQuery.prototype.get = function(n){
  728. 	n = n || 0;
  729. 	if(n=='all' && this.length>1){//如果没有参数，并且多个，则返回数组
  730. 		return this.elements;
  731. 	}
  732. 	return this.elements[n];
  733. };
  734. //添加class
  735. TQuery.prototype.addClass = function(cName){
  736. 	for(var i=0;i<this.length;i++){
  737. 		if (!this.hasClass(this.elements[i],cName)) {//如果不存在class
  738. 			if( this.elements[i].className === null || this.elements[i].className === '' ){
  739. 				this.elements[i].className = cName;
  740. 			}else{
  741. 				this.elements[i].className += " " + cName;
  742. 				if(this.elements[i].className){
  743.  
  744. 				}
  745. 			}
  746. 		}
  747. 	}
  748. 	return this;//返回对象，进行链式操作
  749. };
  750. //移除class
  751. TQuery.prototype.removeClass = function(cName){
  752. 	for(var i=0;i<this.length;i++){
  753. 		if (this.hasClass(this.elements[i],cName)) {
  754. 			this.elements[i].className = this.elements[i].className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), ""); // replace方法是替换 
  755. 		}
  756. 	}
  757. 	return this;//返回对象，进行链式操作
  758. };
  759. //插入after，把选择到的元素，插入到obj的后面
  760. TQuery.prototype.insertAfter = function(obj){
  761. 	var parent;
  762. 	for(var i=0;i<this.length;i++){
  763. 		parent = obj.parentNode;//插入位置的父元素
  764. 		if(parent.lastChild == obj){//如果最后的节点是目标节点，直接添加
  765. 			parent.appendChild(this.elements[i]);
  766. 		}else{//如果不是，则插入在目标元素的下一个兄弟节点的前面，也就是目标元素的后面
  767. 			parent.insertBefore(this.elements[i],obj.nextSibling);
  768. 		}
  769. 	}
  770. 	return this;//返回对象，进行链式操作
  771. };
  772. //插入insertBefore，把选择到的元素，插入到obj的前面
  773. TQuery.prototype.insertBefore =function(obj){
  774. 	for(var i=0;i<this.length;i++){
  775. 		obj.parentNode.insertBefore(this.elements[i],obj);
  776. 	}
  777. 	return this;//返回对象，进行链式操作
  778. };
  779. //清空选中节点，但不删除
  780. TQuery.prototype.empty = function(){
  781. 	for(var i=0;i<this.length;i++){
  782. 		this.html(' ');
  783. 	}
  784. 	return this;//返回对象，进行链式操作
  785. };
  786. //删除选中节点
  787. TQuery.prototype.remove = function(){
  788. 	for(var i=0;i<this.length;i++){
  789. 		this.elements[i].remove();
  790. 	}
  791. 	return this;//返回对象，进行链式操作
  792. };
  793. //========非链式操作方法========
  794. //返回当前节点的index值
  795. TQuery.prototype.index = function(){
  796. 	var index = 0;
  797. 	var aBrother = this.elements[0].parentNode.children;//获取兄弟节点
  798. 	var length = aBrother.length;
  799. 	for(var i=0;i<length;i++){//遍历
  800. 		if( aBrother[i] == this.elements[0] ){//如果匹配到
  801. 			index = i;
  802. 			break;
  803. 		}
  804. 	}
  805. 	return index;
  806. };
  807. //选择当前所选元素，第一个的父节点
  808. TQuery.prototype.parent = function(){
  809. 	var firstNode = this.elements[0].parentNode;
  810. 	this.elements.length = 0;//清空
  811. 	this.elements.push( firstNode );
  812. 	this.length = this.elements.length;//重置长度
  813. 	return this;
  814. };
  815. //parents选择当前所选元素，所有的上一个父节点，不重复
  816. TQuery.prototype.parents = function(){
  817. 	var temps = [];//存储所有的父节点
  818. 	var a = {};
  819. 	for(var i=0;i<this.length;i++){
  820. 	   var v = this.elements[i].parentNode;
  821. 	   if (typeof(a[v]) == 'undefined'){//如果不存在，则存入对象
  822. 			a[v] = 1;
  823. 			temps.push( v );
  824. 	   }
  825. 	}
  826. 	this.elements = temps;
  827. 	this.length = this.elements.length;//重置长度
  828. 	return this;
  829. };
  830. //children选择当前所选元素，所有的下一个子节点，不重复
  831. TQuery.prototype.children = function(){
  832. 	var childElements = [];//存放所有的子节点
  833. 	var thischildren;
  834. 	var hub = {};//过滤已经重复的子节点,中转站
  835. 	for(var i=0;i<this.length;i++){
  836. 		thischildren = this.elements[i].children;
  837. 		var length = thischildren.length;
  838. 		for(var j=0;j<length;j++){
  839. 			childElements.push( thischildren[j] );
  840. 		}
  841. 	}
  842. 	for(var k=0;k<childElements.length;k++){
  843. 		var v = childElements[k];
  844. 		if( typeof (hub[v]) =='undefined' ){
  845. 			hub[v] = 1;
  846. 		}
  847. 	}
  848. 	this.elements.length = 0;
  849. 	for( var child in hub ){
  850. 		this.elements[this.elements.length] = child;
  851. 	}
  852. 	this.length = this.elements.length;
  853. 	return this;
  854. };
  855. //返回被选元素的上一个兄弟节点/同胞元素
  856. TQuery.prototype.prev = function(){
  857. 	var temps = [];
  858. 	for(var i=0;i<this.length;i++){
  859. 		var ele = this.elements[i];
  860. 		if( $(ele).index()===0 ){//如果处在第一位，没有上一个兄弟节点
  861. 			continue;
  862. 		}
  863. 		temps.push(ele.parentNode.children[ $(ele).index()-1 ] );
  864. 	}
  865. 	this.elements = temps;
  866. 	this.length = this.elements.length;
  867. 	return this;
  868. };
  869. TQuery.prototype.prevAll = function(){
  870. 	var temps = [];
  871. 	this.siblings();
  872. 	return this;
  873. };
  874. //返回被选元素的下一个兄弟节点/同胞元素
  875. TQuery.prototype.next = function(){
  876. 	var temps = [];
  877. 	for(var i=0;i<this.length;i++){
  878. 		var ele = this.elements[i];
  879. 		if( $(ele).index()==ele.parentNode.children.length-1 ){//如果处最后一位，没有下一个兄弟节点
  880. 			continue;
  881. 		}
  882. 		temps.push(ele.parentNode.children[ $(ele).index()+1 ] );
  883. 	}
  884. 	this.elements = temps;
  885. 	this.length = this.elements.length;
  886. 	return this;
  887. };
  888. TQuery.prototype.nextAll = function(){
  889. 	var selector = this.elements;//获取当前所选元素
  890. 	this.siblings();
  891. 	var bro = this.elements;//所有兄弟节点
  892. 	for(var i=0;i<bro.length;i++){
  893.  
  894. 	}
  895. 	var a = {};
  896. 	if( a ){
  897.  
  898. 	}
  899. 	return this;
  900. };
  901. //返回被选元素所有同胞元素/过滤同胞元素
  902. TQuery.prototype.siblings = function(str){
  903. 	var temps = [];
  904. 	var parentNode = this.parents().elements;
  905. 	var parentNodeLength = parentNode.length;
  906. 	var allChild;
  907. 	for(var i=0;i<parentNodeLength;i++){
  908. 		allChild = parentNode[i].children;//所有同胞元素集合
  909. 		for(var j=0;j<allChild.length;j++){
  910. 			temps.push( allChild[j] );//获取所有同胞元素，包括自身
  911. 		}
  912. 	}
  913. 	this.elements = temps;
  914. 	this.length = this.elements.length;
  915. 	if(str){//如果有参数传入，则过滤同胞元素
  916. 		this.filter( str );
  917. 	}
  918. 	return this;
  919. };
  920. //将所选的元素集合，缩短至(n,m)之间
  921. TQuery.prototype.slice = function(n,m){
  922. 	if(n<0 || m>this.length) return;//超出范围
  923. 	var temps = this.elements;
  924. 	var newarr = temps.slice(n,m+1);
  925. 	console.log( newarr );
  926. 	this.elements = newarr;
  927. 	this.length = this.elements.length;
  928. 	return this;
  929. };
  930. //Mutation Observer,DOM变动观察器，异步触发的
  931. //未完成
  932. TQuery.prototype.matation = function(options){
  933. 	//new MutationObserver(callback)
  934. 	var observer = new MutationObserver(function(record){
  935. 		for(var n,i=0;i<record.length;i++){
  936. 			 console.log(record[i].target);
  937. 			}
  938. 		});
  939. 	var config = {
  940. 		'childList': true,
  941. 		'arrtibutes': true
  942. 	};
  943. 	observer.observe(this.elements[i],config);
  944. };
  945. //hasClass
  946. TQuery.prototype.hasClass = function(obj,cName){
  947. 	// ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断
  948. 	return !! obj.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)"));
  949. };
  950. //返回计算后的style样式
  951. TQuery.prototype.style = function(attr){
  952. 	//IE下，如果宽高设置为百分比，则返回也是百分比。
  953. 	return this.elements[0].currentStyle ? this.elements[0].currentStyle[attr] : getComputedStyle(this.elements[0])[attr];
  954. };
  955. //返回个BOM的尺寸
  956. TQuery.prototype.size = function(attr){
  957. 	return this.doc.documentElement[attr] ? this.doc.documentElement[attr] : this.doc.body[attr];
  958. };
  959. //AJAX
  960. TQuery.prototype.ajax = function(url,SucessFn,FaildFn){
  961. 	/*
  962. 		1，实例化对XMLHttpRequese对象
  963. 		2，ajax对象的open方法服务器
  964. 		3，ajax对象的send方法，发送请求
  965. 		4，监听onreadystatechange变化
  966. 			0，readyState，请求初始化，open方法没有被调用
  967. 			1，与服务器连接，open已调用
  968. 			2，请求已接收，（服务器收到请求的头部信息）
  969. 			3，请求处理中，（服务器收到请求的主体内容）
  970. 			4，响应完成，并且返回数据
  971. 				返回值有ajax.responseText和ajax.responseXML
  972. 	*/
  973. 	var oAjax;
  974. 	if(window.XMLHttpRequest){//IE7+，chrome，firefox，opara，safari
  975. 		oAjax=new XMLHttpRequest();
  976. 	}else{//兼容非IE6
  977. 		oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE5，IE6
  978. 	}
  979. 	oAjax.open('GET',url,true);//true为异步，false为同步
  980. 	oAjax.send();//post请求就需要填写参数string
  981. 	oAjax.onreadystatechange=function(){
  982. 		if(oAjax.readyState==4){	//响应完成
  983. 			if(oAjax.status==200){//状态码=200，请求成功
  984. 				SucessFn(oAjax.responseText);//传参返回值
  985. 			}else{//读取失败
  986. 					FaildFn && FaildFn(oAjax.status);
  987. 			}
  988. 		}
  989. 	};
  990. };
  991. //扩展插件
  992. TQuery.prototype.extend = function(name,fn){
  993. 	TQuery.prototype[name] = fn;
  994. 	return this;//返回对象，进行链式操作
  995. };
  996. //防止constructor被修改
  997. TQuery.prototype.constructor = TQuery;
  998. //输出调用
  999. function $(tArg){
  1000. 	return new TQuery(tArg);
  1001. }
  1002. window.$ = window.TQuery = $;
  1003. //========通用函数========
  1004. function addEvent(obj, type, fn){
  1005. 	return obj.addEventListener ?
  1006. 			obj.addEventListener(type, function(e){
  1007. 				var ev = window.event ? window.event : (e ? e : null);
  1008. 				ev.target = ev.target || ev.srcElement;
  1009. 				if( fn.call(obj,ev)===false ){//回掉函数为false，则阻止默认时间
  1010. 					e.cancelBubble = true;//阻止冒泡
  1011. 					e.preventDefault();//chrome，firefox下阻止默认事件
  1012. 				}
  1013. 			}, false)
  1014. 			 :
  1015. 			obj.attachEvent('on' + type, function(e){
  1016. 				//fn.call(obj,e);//解决IE8下，this是window的问题
  1017. 				var ev = window.event ? window.event : (e ? e : null);
  1018. 				ev.target = ev.target || ev.srcElement;
  1019. 				if(fn.call(obj,ev)===false ){
  1020. 					e.cancelBubble = true;//阻止冒泡
  1021. 					return false;//阻止默认事件，针对IE8
  1022. 				}
  1023. 			});
  1024. }
  1025. function removeEvent(obj,type,fn){
  1026. 	return obj.removeEventListener ? obj.removeEventListener(type,fn,false) : obj.detachEvent('on' + type,fn);
  1027. }
  1028. function getByClass(oParent,sClassName){
  1029. 	var aElement = oParent.getElementsByTagName('*');//获取所有子节点
  1030. 	var result = [];
  1031. 	for(var i=0;i<aElement.length;i++){
  1032. 		if( aElement[i].className == sClassName ){
  1033. 			result.push(aElement[i]);
  1034. 		}
  1035. 	}
  1036. 	return result;
  1037. }
  1038. //===============系统对象上添加==============
  1039. //字符串倒序
  1040. String.prototype.reverse = function(){
  1041. 	return this.split('').reverse().join('');
  1042. };
  1043. //数组sum求和方法
  1044. Array.prototype.sum = function(){
  1045. 	var result = 0;
  1046. 	for( var i=0;i<this.length;i++ ){
  1047. 		result += this[i];
  1048. 	}
  1049. 	return result;
  1050. };
  1051. //数组去重，不能比较DOM节点
  1052. Array.prototype.unique = function(){
  1053.    var a = {};//哈希表，用来存放不重复的数组
  1054.    for (var i=0; i<this.length; i++) {
  1055. 	   var v = this[i];
  1056. 	   if (typeof(a[v]) == 'undefined'){
  1057. 			a[v] = 1;
  1058. 	   }
  1059.    }
  1060.    this.length=0;//清空数组
  1061.    for (var k in a){//哈希表存放的不重复数据，存入数组中
  1062. 		this[this.length] = k;  //this.length = 0 , 1 , 2 ……
  1063.    }
  1064.    return this;
  1065. };
  1066. //删除指定位置的数组,n = (0,n)，可以是数字，可以是区间
  1067. Array.prototype.del = function(n) {
  1068.     if (n < 0) return this;
  1069. 	if(typeof n == 'object' && n.push()){//如果是数组（区间）
  1070. 		 return this.slice(0,n[0]).concat( this.slice( n[1]+1 , this.length) );
  1071. 	}
  1072.     return this.slice(0, n).concat( this.slice(n + 1, this.length) );
  1073. };
  1074. //===============自定义对象==============
  1075. //面向对象选项卡
  1076. //使用方法 new TabSwitch('div1');
  1077. /*
  1078. 	<div id="div1">
  1079. 		<input />
  1080. 		<input />
  1081. 		<input />
  1082. 		<div></div>
  1083. 		<div></div>
  1084. 		<div></div>
  1085. 	</div>
  1086. 结构：
  1087. */
  1088. function TabSwitch(obj){
  1089. 	var _this = this;
  1090. 	//var div1 = document.getElementById(id);
  1091. 	var div1 = obj;
  1092. 	this.aBtn = div1.getElementsByTagName('input');
  1093. 	this.aDiv = div1.getElementsByTagName('div');
  1094. 	for(var i=0;i<this.aBtn.length;i++){
  1095. 		this.aBtn[i].index=i;
  1096. 		this.aBtn[i].onclick=function(){
  1097. 			_this.fnClick(this);
  1098. 		};
  1099. 	}
  1100. }
  1101. TabSwitch.prototype.fnClick = function(oBtn){
  1102. 	for(var j=0;j<this.aBtn.length;j++){
  1103. 		this.aBtn[j].className='';
  1104. 		this.aDiv[j].style.display='none';
  1105. 	}
  1106. 	oBtn.className='active';
  1107. 	this.aDiv[oBtn.index].style.display='block';
  1108. };
  1109. //拖拽
  1110. //使用方法 new Drag($('press'),$('move'),{left:[100,200],top:[200,500]});(鼠标按住的目标，要移动的目标)
  1111. /*
  1112. var json = {
  1113. 			L:[100,300],
  1114. 			T:[200,500]
  1115. 			}
  1116. */
  1117. function Drag(pressTarget,MoveTarget,json){
  1118. 	var _this = this;
  1119. 	this.disX = 0;
  1120. 	this.disY = 0;
  1121. 	if(json){
  1122. 		this.json = json;
  1123. 	}
  1124. 	this.MoveTarget = MoveTarget;
  1125. 	pressTarget.onmousedown = function(e){
  1126. 		_this.fnDown(e);
  1127. 		return false;//chrome,firefox去除文字选中
  1128. 	};
  1129. }
  1130. Drag.prototype.fnDown = function(e){//鼠标按下（未松开）
  1131. 	var ev = e || window.event;
  1132. 	var _this = this;
  1133. 	this.disX = e.clientX - this.MoveTarget.offsetLeft;
  1134. 	this.disY = e.clientY - this.MoveTarget.offsetTop;
  1135. 	if(this.MoveTarget.setCaptrue){//IE，解决文字选中
  1136. 		this.MoveTarget.onmousemove = function(ev){
  1137. 			_this.fnMove(ev);
  1138. 			_this.json.movefn();
  1139. 		};
  1140. 		this.MoveTarget.onmouseup = function(){
  1141. 			var this_ = this;
  1142. 			_this.fnUp(this_);
  1143. 		};
  1144. 		this.MoveTarget.setCaptrue();//添加事件捕获
  1145. 	}else{
  1146. 		document.onmousemove = function(e){
  1147. 			_this.fnMove(e);
  1148. 			_this.json.movefn && _this.json.movefn();
  1149. 		};
  1150. 		document.onmouseup = function(){
  1151. 			var this_ = this;
  1152. 			_this.fnUp(this_);
  1153. 		};
  1154. 	}
  1155. };
  1156. Drag.prototype.fnMove = function(e){//鼠标移动，则div移动
  1157. 	var ev = e || window.event;
  1158. 	var L = this.json ? this.range(e.clientX - this.disX,this.json.L[0],this.json.L[1]) : (e.clientX - this.disX);
  1159. 	var T = this.json ? this.range(e.clientY - this.disY,this.json.T[0],this.json.T[1]) : (e.clientY - this.disY);
  1160. 	this.MoveTarget.style.left = L + 'px';
  1161. 	this.MoveTarget.style.top = T + 'px';
  1162. };
  1163. Drag.prototype.fnUp = function(this_){//鼠标松开，则停止
  1164. 		this_.onmousemove = null;
  1165. 		this_.onmouseup = null;
  1166. 		this_.setCaptrue && this_.releaseCapture();//释放捕获
  1167. };
  1168. Drag.prototype.range = function(iNow,iMin,iMax){
  1169. 	if(iNow>iMax){
  1170. 		return iMax;
  1171. 	}else if(iNow<iMin){
  1172. 		return iMin;
  1173. 	}else{
  1174. 		return iNow;
  1175. 	}
  1176. };
  1177. //拖拽改变大小
  1178. //使用方法 new scale($('press'),$('move'),{width:[100,200],height:[200,500]});(鼠标按住的目标，要移动的目标)
  1179. /*
  1180. var json = {
  1181. 			width:[100,300],
  1182. 			height:[200,500]
  1183. 			}
  1184. */
  1185. function Scale(pressTarget,MoveTarget,json){
  1186. 	if(json){
  1187. 		this.json = json;
  1188. 	}
  1189. 	this.MoveTarget = MoveTarget;
  1190. 	var _this = this;
  1191. 	pressTarget.onmousedown = function(e){
  1192. 		_this.onmousedownFn(e);
  1193. 		};
  1194. }
  1195. Scale.prototype.onmousedownFn = function(e){
  1196. 	var ev = e || window.event;
  1197. 	this.disX = e.clientX;
  1198. 	this.disY = e.clientY;
  1199. 	this.disW = this.MoveTarget.offsetWidth;
  1200. 	this.disH = this.MoveTarget.offsetHeight;
  1201. 	var _this = this;
  1202. 	document.onmousemove = function(ev){
  1203. 		_this.mouseoverFn(ev);
  1204. 		};
  1205. 	document.onmouseup = function(ev){
  1206. 		_this.mouseupFn(ev);
  1207. 		};
  1208. };
  1209. Scale.prototype.mouseoverFn = function(e){
  1210. 	var ev = e || window.event;
  1211. 	this.W = this.json ? this.range(ev.clientX - this.disX + this.disW,this.json.width[0],this.json.width[1]) : (ev.clientX - this.disX + this.disW);
  1212. 	this.H = this.json ? this.range(ev.clientY - this.disY + this.disH,this.json.height[0],this.json.height[1]) : (ev.clientY - this.disY + this.disH);
  1213. 	this.MoveTarget.style.width = this.W + 'px';
  1214. 	this.MoveTarget.style.height = this.H + 'px';
  1215. };
  1216. Scale.prototype.mouseupFn = function(){
  1217. 	document.onmousemove = null;
  1218. 	document.onmouseup = null;
  1219. };
  1220. Scale.prototype.range = function(iNow,iMin,iMax){
  1221. 	if(iNow>iMax){
  1222. 		return iMax;
  1223. 	}else if(iNow<iMin){
  1224. 		return iMin;
  1225. 	}else{
  1226. 		return iNow;
  1227. 	}
  1228. };
  1229. //===============库扩展==============
  1230.  
  1231. $().extend('abc',function(){
  1232. 	alert('1');
  1233. });
  1234. //图片延迟加载
  1235. $().extend('lazyImage',function(img){
  1236. 	$(img);
  1237. });
  1238.  
  1239. })(window,document);//传入window，避免过度寻找作用域链

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址