本人写了一个类似于jq的小型库,不过只是写了部分方法而已。并没有jq那么全面,下面就介绍下有哪些方法可以使用

第一个是选择器,

选择器比较简单 只支持ID选择器 $(‘#id_name’)

Class选择器$(‘.class_name’)

标签选择器$(‘tag _name’)

并没有像jq那样拥有高级的选择器。

方法有

Js延迟加载

  1. Ready     $(document).ready(function(){

// 在这里写你的代码...

});

$(functoin(){

})

事件有

Click     $(‘div’).click(functoin(){

Alert(1)

})

Dblclick   ,   mousedown  mouseup ,  mouseover , mousemove  mouseout  mousemove keypress   keydown keyup  change  reset  submit  hover

效果有

Show  hide   toggle

Css 有

Css   offset  width  height  position

属性有

Attr  val  html  addClass   removeAttr

筛选有

Eq   find    index  get   first  lastss

动画有

Animate  stop

文档处理有

Append  remove  empty

工具方法有

Trim  ajax  setPage(分页) extend inArray   parseJSON   isFunction   isEmpty

isNumeric  type

cq核心源码

  1. /*
  2. 作者:姚观寿
  3. cq:类似于jq的一个小型库
  4. 时间:2016.6.19
  5.  
  6. */
  7. (function(window,undefined,document){
  8. var isIe678 = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE6.0")||
  9. (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE7.0")||
  10. (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE8.0");
  11.  
  12. function checkType(data_type){
  13. return Object.prototype.toString.call(data_type);
  14. }
  15.  
  16. function myAddEvent(obj , sEv , fn){
  17. try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
  18. obj.addEventListener(sEv,fn,false);
  19. }catch(e){
  20. try{ // IE8.0及其以下版本
  21. obj.attachEvent('on' + sEv ,function(){
  22. fn.call(obj);
  23. });
  24. }catch(e){
  25. // 早期浏览器
  26. obj['on' + sEv] = fn;
  27. }
  28. }
  29. }
  30.  
  31. function getTopOrLeft(obj,attr){
  32. var obj_attr = 0;
  33. while(obj){
  34. obj_attr+=obj[attr];
  35. obj=obj.offsetParent;
  36. }
  37. return obj_attr;
  38. }
  39.  
  40. function getStyle(obj , attr){
  41. var new_attr;
  42. if(attr=='opacity'){
  43. new_attr = parseFloat((window.getComputedStyle?getComputedStyle(obj,null)[attr]:obj.currentStyle[attr]));
  44. }else{
  45. new_attr = parseInt(window.getComputedStyle?getComputedStyle(obj,null)[attr]:obj.currentStyle[attr]);
  46. }
  47. if(isNaN(new_attr)){
  48. new_attr = 0;
  49. }
  50. return new_attr;
  51. /* return attr=='opacity'?parseFloat((window.getComputedStyle?getComputedStyle(obj,null)[attr]:obj.currentStyle[attr])):parseInt(window.getComputedStyle?getComputedStyle(obj,null)[attr]:obj.currentStyle[attr]); */
  52. }
  53.  
  54. function forEach(obj , fn ){
  55. var i=0, len = obj.length;
  56. for(;i<len;i++){
  57. fn(i);
  58. }
  59. }
  60. function getByClassName(oParent,className){
  61. var aEle = oParent.getElementsByTagName('*'),
  62. aResult = [];
  63. forEach(aEle,function(i){
  64. if(aEle[i].className == className ){
  65. aResult.push(aEle[i]);
  66. }
  67. });
  68. return aResult;
  69. }
  70.  
  71. function CopyArr(arr){
  72. var newArr = [];
  73. forEach(arr , function( i ){
  74. newArr.push(arr[i]);
  75. });
  76. return newArr;
  77. }
  78.  
  79. function getIndex( obj ){
  80. var sibing = obj.parentNode.children,
  81. index = null ;
  82. forEach(sibing , function(i){
  83. if(sibing[i] == obj ){
  84. return index = i-1;
  85. }
  86. });
  87. return index;
  88. }
  89.  
  90. function Tween(value, prop, animation_attr) {
  91. //初始化
  92. this.elem = animation_attr.elem;
  93. this.prop = prop;
  94. this.easing = "swing"; //动画缓动算法
  95. this.options = animation_attr.options;
  96. this.start = this.now = this.get();
  97. this.end = value;
  98. this.unit = "px"
  99. }
  100.  
  101. Tween.prototype = {
  102. get: function() {
  103. var computed = getStyle(this.elem, this.prop);
  104. return parseFloat(computed);
  105. },
  106. run:function(percent){
  107. var eased;
  108. this.pos = eased = swing(percent);
  109. this.now = (this.end - this.start) * eased + this.start;
  110.  
  111. this.elem.style[this.prop] = this.now +this.unit;
  112. return this;
  113. }
  114. }
  115.  
  116. //动画算法
  117. function swing(p) {
  118. var tmpe = 0.5 - Math.cos(p * Math.PI) / 2;
  119. return tmpe
  120. }
  121.  
  122. Tween.prototype = {
  123. get: function() {
  124. var computed = getStyle(this.elem, this.prop);
  125. return parseFloat(computed);
  126. },
  127. run:function(percent){
  128. var eased;
  129. this.pos = eased = swing(percent);
  130. this.now = (this.end - this.start) * eased + this.start;
  131.  
  132. if(this.prop=="opacity"){
  133. if(isIe678){
  134. this.elem.style.filter='alpha(opacity:'+(this.now*100)+')'
  135. }else{
  136. this.elem.style[this.prop] = this.now;
  137. }
  138. }else{
  139. this.elem.style[this.prop] = this.now +this.unit;
  140. }
  141. return this;
  142. }
  143. }
  144.  
  145. function AnimationFn(elem, properties, options, fn){
  146. /* elem.timerId = null;
  147. if (elem.timerId !=undefined && elem.timerId) {
  148. return false;
  149. }*/
  150.  
  151. var animation_attr = {
  152. elem : elem,
  153. props : properties,
  154. originalOptions : options,
  155. options : options,
  156. startTime : null,//动画开始时间
  157. tweens : []//存放每个属性的缓动对象,用于动画
  158. }
  159.  
  160. for (var k in properties) {
  161. animation_attr.tweens.push( new Tween(properties[k], k, animation_attr));
  162. }
  163. animation_attr.startTime=AnimationFn.fxNow || createFxNow();
  164. var tick = function() {
  165. var currentTime = AnimationFn.fxNow || createFxNow();
  166. remaining = Math.max(0, animation_attr.startTime + animation_attr.options.duration - currentTime),
  167. temp = remaining / animation_attr.options.duration || 0,
  168. percent = 1 - temp;
  169. var index = 0,
  170. length = animation_attr.tweens.length;
  171. for (; index < length; index++) {
  172. animation_attr.tweens[index].run(percent);
  173. }
  174.  
  175. if (percent <= 1 && length) {
  176. return remaining;
  177. } else {
  178. return false;
  179. }
  180.  
  181. }
  182. tick.elem = elem;
  183. //tick.anim = animation_attr;
  184. tick.fn = fn;
  185. AnimationFn.fx.timer(tick);
  186. }
  187.  
  188. function createFxNow() {
  189. setTimeout(function() {
  190. AnimationFn.fxNow = undefined;
  191. },0);
  192. return (AnimationFn.fxNow = Date.now());
  193. }
  194.  
  195. AnimationFn.fx = {
  196. timer: function(timer) {
  197. AnimationFn.timer=timer;
  198. if (timer()) { //timer() 只是调用一个而已,就是说有这个动画时候就执行函数 返回一个false 或者是 remaining;
  199. //开始执行动画 走这里
  200. AnimationFn.fx.start();
  201. }
  202. },
  203. start: function() {
  204. if (!AnimationFn.timer.elem.timerId) {
  205. AnimationFn.timer.elem.timerId = setInterval(AnimationFn.fx.tick, 13);
  206. }
  207. },
  208. stop:function(){
  209. clearInterval(AnimationFn.timer.elem.timerId);
  210. AnimationFn.timer.elem.timerId = null;
  211. AnimationFn.timer.fn&&AnimationFn.timer.fn.call(AnimationFn.timer.elem );
  212. },
  213. tick: function() {
  214. //不停的调用,直到定时器关闭
  215. var timer,
  216. i = 0;
  217. AnimationFn.fxNow = Date.now();
  218. if (!AnimationFn.timer()) {
  219. AnimationFn.fx.stop();
  220. }
  221. AnimationFn.fxNow = undefined;
  222. }
  223. }
  224.  
  225. function CQuery(vArg,chained_mode){
  226.  
  227. this.elements = [];
  228. switch(typeof vArg) {
  229. case 'function':
  230.  
  231. myAddEvent(window , 'load' , vArg);
  232. break;
  233. case 'string':
  234. switch(vArg.charAt(0)){
  235. case '#': //id
  236. var obj = document.getElementById(vArg.substring(1));
  237. this.elements.push(obj);
  238. break;
  239. case '.': //class
  240. var objs = getByClassName(document , vArg.substring(1));
  241. this.elements = objs;
  242. break;
  243. default: //tagName
  244. this.elements = document.getElementsByTagName(vArg);
  245. break;
  246. }
  247. break;
  248.  
  249. case 'object':
  250. switch(checkType(vArg)){
  251. case "[object HTMLDocument]":
  252. // this.elements = window;
  253. this.elements.push(window);
  254. break;
  255. default :
  256. this.elements.push(vArg); break;
  257. }
  258.  
  259. }
  260. return this === window&&new CQuery(vArg);
  261. }
  262.  
  263. CQuery.prototype = {
  264. ev:function(event , fn){
  265. var this_elements = this.elements;
  266. forEach(this.elements,function(i){
  267. myAddEvent(this_elements[i] , event , fn);
  268. });
  269. new_CQuery.elements = this.elements;
  270. return new_CQuery;
  271. },
  272. ready:function(fn){
  273.  
  274. myAddEvent(window, 'load' , fn);
  275. },
  276. click:function( fn ){
  277. return this.ev('click',fn);
  278. },
  279. dblclick : function( fn ){
  280. return this.ev('dblclick',fn);
  281. },
  282. mousedown : function( fn ){
  283. return this.ev('mousedown',fn);
  284. },
  285. mouseup : function( fn ){
  286. return this.ev('mouseup',fn);
  287. },
  288. mouseover : function( fn ){
  289. return this.ev('mouseover',fn);
  290. },
  291. mousemove : function( fn ){
  292. return this.ev('mousemove',fn);
  293. },
  294. mouseout : function ( fn ){
  295. return this.ev('mouseout',fn);
  296. },
  297. mousemove:function(fn){
  298. return this.ev('mousemove',fn);
  299. },
  300. keypress:function( fn ){
  301. return this.ev('keypress',fn);
  302. },
  303. keydown : function( fn ){
  304. return this.ev('keydown',fn);
  305. },
  306. keyup : function( fn ){
  307. return this.ev('keyup',fn);
  308. },
  309. change : function( fn ){
  310. return this.ev('change',fn);
  311. },
  312. reset : function( fn ){
  313. return this.ev('reset',fn);
  314. },
  315. submit : function( fn ){
  316. return this.ev('submit',fn);
  317. },
  318. show:function(){
  319. var this_elements=this.elements;
  320. forEach(this.elements,function(i){
  321. this_elements[i].style.display = 'block';
  322. });
  323. new_CQuery.elements = this.elements;
  324. return new_CQuery;
  325. },
  326. hide:function(){
  327. var this_elements = this.elements ;
  328. forEach(this.elements,function(i){
  329. this_elements[i].style.display = 'none';
  330. });
  331. new_CQuery.elements = this.elements;
  332. return new_CQuery;
  333. },
  334. hover:function(fnOver , fnOut){
  335. var this_elements = this.elements ;
  336. forEach(this.elements,function(i){
  337. myAddEvent(this_elements[i] , 'mouseover' , fnOver);
  338. myAddEvent(this_elements[i] , 'mouseout' , fnOut);
  339. });
  340. new_CQuery.elements = this.elements;
  341. return new_CQuery;
  342. },
  343. css:function(attr , value){
  344. if(arguments.length==2){ //设置样式
  345. var this_elements = this.elements
  346. forEach(this.elements , function(i){
  347. if(attr!='opacity'){
  348. this_elements[i].style[attr] = value;
  349. }else{
  350. this_elements[i].style[attr] = value;
  351. }
  352. });
  353. }else{ //获取样式
  354. return getStyle(this.elements[0] , attr);
  355. }
  356. new_CQuery.elements = this.elements;
  357. return new_CQuery;
  358. },
  359. toggle:function(){
  360. var argm = arguments,
  361. argmLen = arguments.length,
  362. this_elements = this.elements ;
  363. forEach(this.elements,function(i){
  364. var count = 0;
  365. myAddEvent(this_elements[i] , 'click' , function(){
  366. argm[count++%argmLen].call(this);
  367. }) ;
  368. });
  369. new_CQuery.elements = this.elements;
  370. return new_CQuery;
  371. },
  372. attr:function( attr , value){
  373. var this_elements = this.elements ;
  374. if(arguments.length==2){
  375. forEach(this.elements , function( i ){
  376. this_elements[i][attr] = value;
  377. });
  378. new_CQuery.elements = this.elements;
  379. return new_CQuery;
  380. }else{
  381. return this.elements[0][attr];
  382. }
  383. },
  384. eq:function( n ){
  385. return $(this.elements[n]);
  386. },
  387. find:function(str){
  388. var aResult = [] ,
  389. this_elements = this.elements;
  390. forEach(this.elements , function( i ){
  391. switch(str.charAt(0)){
  392. case '.' : //class
  393. var aEle = getByClassName(this.elements[i] , str.substring(1));
  394. aResult = aResult.concat(aEle);
  395. break;
  396. default :
  397. var aEle = this_elements[i].getElementsByTagName(str);
  398. aResult = aResult.concat(CopyArr(aEle));
  399. }
  400. });
  401. new_CQuery.elements = aResult;
  402. return new_CQuery;
  403. },
  404. index : function(){
  405. return getIndex(this.elements[0]);
  406. },
  407.  
  408. offset:function(){
  409.  
  410. if(arguments.length==0){
  411. var offset={
  412. top:getTopOrLeft(this.elements[0],'top'),
  413. left:getTopOrLeft(this.elements[0],'left')
  414. }
  415. return offset;
  416. }else{
  417. var this_elements = this.elements ;
  418. forEach(this.elements,function(i){
  419. this_elements[i].style.left = arguments.length[0].left;
  420. this_elements[i].style.top = arguments.length[0].top;
  421. });
  422. new_CQuery.elements = this.elements;
  423. return new_CQuery;
  424.  
  425. }
  426.  
  427. },
  428. position:function(){
  429. if(arguments.length==0){
  430. var offset={
  431. top:this.elements[0].offsetTop,
  432. left:this.elements[0].offsetLeft
  433. }
  434. return offset;
  435. }else{
  436. var this_elements = this.elements ;
  437. forEach(this.elements,function(i){
  438. this_elements[i].style.left = arguments.length[0].left;
  439. this_elements[i].style.top = arguments.length[0].top;
  440. });
  441. new_CQuery.elements = this.elements;
  442. return new_CQuery;
  443.  
  444. }
  445.  
  446. },
  447.  
  448. animate:function(prop, speed, easing, callback){
  449. var _arguments = arguments;
  450. this_elements = this.elements;
  451. if(checkType(arguments[1])=="[object Undefined]"){
  452. _arguments[1] = 400;
  453. forEach(this.elements , function( i ){
  454. AnimationFn(this_elements[i],_arguments[0], {
  455. duration: _arguments[1]
  456. })
  457. });
  458. }else if ((checkType(arguments[1])=="[object String]"||checkType(arguments[1])=="[object Number]")&&checkType(arguments[2])=="[object Undefined]"){
  459.  
  460. switch(arguments[1]){
  461. case 'slow' : _arguments[1] = 600 ; break;
  462. case 'normal': _arguments[1] = 400; break;
  463. case 'fast' : _arguments[1] = 200; break;
  464. default : if(checkType(arguments[1])=="[object String]"){
  465. _arguments[1] = 400;
  466. } break;
  467. }
  468. forEach(this.elements , function( i ){
  469. AnimationFn(this_elements[i],_arguments[0], {
  470. duration: _arguments[1]
  471. })
  472. });
  473. }else if((checkType(arguments[1])=="[object String]"||checkType(arguments[1])=="[object Number]"&&checkType(arguments[2])=="[object Undefined]")&&checkType(arguments[2])=="[object Function]"){
  474.  
  475. var _speed = 0;
  476. switch(arguments[1]){
  477. case 'slow' : _speed = 600 ; break;
  478. case 'normal': _speed = 400; break;
  479. case 'fast' : _speed = 200; break;
  480. default :
  481. if(checkType(arguments[1])=="[object String]"){
  482. _speed = 400;
  483. } break;
  484. }
  485. forEach(this.elements , function( i ){
  486. AnimationFn(this_elements[i],_arguments[0], {
  487. duration: _speed
  488. },_arguments[2])
  489. });
  490. }else if(checkType(arguments[1])=="[object Function]"){
  491.  
  492. var _speed = 400;
  493. forEach(this.elements , function( i ){
  494. AnimationFn(this_elements[i],_arguments[0], {
  495. duration: _speed
  496. },_arguments[1])
  497. });
  498. }
  499. new_CQuery.elements = this.elements;
  500. return new_CQuery;
  501. },
  502. stop:function(){
  503. var this_elements = this.elements;
  504. forEach(this.elements , function( i ){
  505. if(this_elements[i].timerId){
  506. clearInterval(this_elements[i].timerId);
  507. this_elements[i].timerId= null;
  508. }
  509. });
  510. new_CQuery.elements = this.elements;
  511. return new_CQuery;
  512. },
  513. append:function(html){
  514. var this_elements = this.elements;
  515. forEach(this.elements , function( i ){
  516. this_elements[i].innerHTML+=html;
  517. });
  518. new_CQuery.elements = this.elements;
  519. return new_CQuery;
  520. },
  521. remove:function(){
  522. var this_elements = this.elements;
  523. forEach(this.elements , function( i ){
  524. this_elements[i].parentNode.removeChild(this_elements[i]);
  525. });
  526. new_CQuery.elements = this.elements;
  527. return new_CQuery;
  528. },
  529. empty:function(){
  530. var this_elements = this.elements;
  531. forEach(this.elements , function( i ){
  532. for(var j=0, length = this_elements[i].children.length; j<length;j++){
  533. this_elements[i].removeChild(this_elements[i].children[j]);
  534. }
  535. });
  536. new_CQuery.elements = this.elements;
  537. return new_CQuery;
  538. },
  539. get:function(index){
  540. return this.elements[index];
  541. },
  542. val:function(){
  543. if(arguments.length==0){
  544. return this.elements[0].value;
  545. }else{
  546. var this_elements = this.elements;
  547. var _arguments = arguments;
  548. forEach(this.elements , function( i ){
  549. this_elements[i].value = _arguments[0];
  550. });
  551. new_CQuery.elements = this.elements;
  552. return new_CQuery;
  553. }
  554. },
  555. html:function(){
  556. if(arguments.length==0){
  557. return this.elements[0].innerHTML;
  558. }else{
  559. var this_elements = this.elements;
  560. var _arguments = arguments;
  561. forEach(this.elements , function( i ){
  562. this_elements[i].innerHTML = _arguments[0];
  563. });
  564. new_CQuery.elements = this.elements;
  565. return new_CQuery;
  566. }
  567. },
  568. addClass:function(class_name){
  569. var this_elements = this.elements;
  570. forEach(this.elements , function( i ){
  571. this_elements[i].className += ' '+class_name;
  572. });
  573. new_CQuery.elements = this.elements;
  574. return new_CQuery;
  575. },
  576. removeAttr:function(attr){
  577. var this_elements = this.elements;
  578. forEach(this.elements , function( i ){
  579. delete this_elements[i].attr;
  580. });
  581. new_CQuery.elements = this.elements;
  582. return new_CQuery;
  583. },
  584. first:function(){
  585. return this.elements[0];
  586. },
  587. last:function(){
  588. return this.elements[this.elements.length-1];
  589. },
  590. height:function(){
  591. if(arguments.lengt==0){
  592. return getStyle(this.elements[0],'height');
  593. }else{
  594. var this_elements = this.elements;
  595. forEach(this.elements , function( i ){
  596. this_elements[i].style.height = arguments[0];
  597. });
  598. new_CQuery.elements = this.elements;
  599. return new_CQuery;
  600. }
  601. },
  602. width:function(){
  603. if(arguments.lengt==0){
  604. return getStyle(this.elements[0],'width');
  605. }else{
  606. var this_elements = this.elements;
  607. forEach(this.elements , function( i ){
  608. this_elements[i].style.width = arguments[0];
  609. });
  610. new_CQuery.elements = this.elements;
  611. return new_CQuery;
  612. }
  613. }
  614.  
  615. }
  616.  
  617. CQuery.trim = function(str){
  618. return str.replace(/(^\s*)|(\s*$)/g, "");
  619. }
  620. CQuery.ajax = function(ajaxObj){
  621. if(ajaxObj.url==undefined){
  622. alert('您未设置url,请您设置提交的url') ;
  623. return false;
  624. };
  625.  
  626. //设置json数据或者文件
  627. (ajaxObj.async!==undefined)||((ajaxObj.async===false)||(ajaxObj.async = true));
  628.  
  629. ajaxObj.dataType=(ajaxObj.dataType===undefined)?'json':( ajaxObj.dataType = ajaxObj.dataType.toLowerCase( ), (ajaxObj.dataType== 'file'&&'flie')||('json'));
  630. //设置post或者get方式
  631. ajaxObj.type = (ajaxObj.type===undefined)?'post':(ajaxObj.type =ajaxObj.type.toLowerCase( ),(ajaxObj.type=='get'&&'get')||('post'));
  632.  
  633. var submit_url = '',
  634. submit_table_data='';
  635. str=ajaxObj.url; //这是一字符串
  636. var strs= new Array(); //定义一数组
  637. strs=str.split("?"); //字符分割
  638. submit_url = strs[0];
  639. //设置清理缓存
  640. ajaxObj.cache = (ajaxObj.cache===undefined)?true:(ajaxObj.cache&&true||false); //缓存
  641. if(!ajaxObj.cache) {
  642. time = 'time='+new Date().getTime();
  643. submit_table_data = (strs.length<=1)?time:(time+'&');
  644. for(var i=1, len = strs.length; i<len ;i++ ){
  645. submit_table_data += (i==len-1)?strs[i]:(strs[i]+'?');
  646. }
  647. }else{
  648. for(var i=1, len = strs.length; i<len ;i++ ){
  649. submit_table_data += (i==len-1)?strs[i]:(strs[i]+'?');
  650. }
  651. (submit_table_data=='')||(submit_table_data+='&');
  652. }
  653.  
  654. //数据连接
  655. switch(checkType(ajaxObj.data)){
  656. case "[object String]":
  657. submit_table_data += ajaxObj.data;
  658. break;
  659. case "[object Object]":
  660. var submit_key = [],
  661. submit_data = [];
  662. for(i in ajaxObj.data){
  663. submit_key.push(i);
  664. submit_data.push(ajaxObj.data[i]);
  665. }
  666. //ajaxObj.url+=re.exec(ajaxObj.url)?"&":"?";
  667. forEach(submit_data , function(index){
  668. submit_table_data+=((submit_data.length-1)==index)?submit_key[index]+'='+submit_data[index]:submit_key[index]+'='+submit_data[index]+'&';
  669. } ) ;
  670. }
  671.  
  672. //创建 xhr对象
  673. if(window.XMLHttpRequest){
  674. var xhr=new XMLHttpRequest();
  675. } else{
  676. var xhr=new ActiveXObject("Microsoft.XMLHTTP");
  677. }
  678.  
  679. //数据
  680. var fileLen=fileNumber=0;
  681. if(ajaxObj.type=='get'){
  682. if(ajaxObj.dataType== 'flie'){
  683. alert('文件上传需要设置post提交!');
  684. }
  685. xhr.open('get',submit_url+'?'+encodeURI(submit_table_data),ajaxObj.async);
  686. xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
  687. xhr.send();
  688. }else{
  689.  
  690. if(ajaxObj.dataType!='flie'){
  691. xhr.open('post',submit_url,true);
  692. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  693. // alert(ajaxObj.data);
  694. xhr.send(submit_table_data);
  695. }else{
  696. if(ajaxObj.fileObject===undefined){
  697. alert('未设置文件对象,需要传递一个文件对象进来');
  698. return ;
  699. }
  700.  
  701. xhr.open("post",ajaxObj.url,ajaxObj.async);
  702. //设置数据类型
  703. xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
  704. //文件表单对象
  705. var form = new FormData();
  706.  
  707. if(ajaxObj.fileObject.nodeName=='INPUT'){
  708. var file_name= ajaxObj.fileObject.name;
  709.  
  710. }else{
  711. var file_name = (ajaxObj.fileName===undefined)?'file':ajaxObj.fileName;
  712. }
  713. //文件对象
  714. fileObjs=ajaxObj.fileObject.files,
  715. fileLen=fileObjs.length;
  716. form.append(file_name,fileObjs[0]);
  717. xhr.send(form);
  718. }
  719. }
  720.  
  721. //响应监控
  722. xhr.onreadystatechange=function (){
  723. // alert('正在加载数据');
  724. (xhr.readyState!=1&&xhr.readyState!=2&&xhr.readyState!=3)||(ajaxObj.loading&&ajaxObj.loading(xhr.readyState),
  725. ajaxObj.complete&&ajaxObj.complete(xhr)
  726. );
  727. (xhr.readyState!=4)||((xhr.status==200)?(
  728. // 返回ajax数据给前端alert(xhr.responseText);
  729. ajaxObj.success&&ajaxObj.success(xhr.responseText),
  730. //判断是否有多个文件,如果有多个文件再次提交
  731. (fileNumber>(fileLen-1))||(
  732. fileNumber++,
  733. xhr.open("post",submit_url,ajaxObj.async),
  734. //设置数据类型
  735. xhr.setRequestHeader('X-Requested-With','XMLHttpRequest'),
  736. form.append(file_name,fileObjs[fileNumber]),
  737. xhr.send(form)
  738. )
  739. ):(ajaxObj.complete&&ajaxObj.complete(xhr),
  740. ajaxObj.error&&ajaxObj.error(xhr)
  741. ))
  742.  
  743. }
  744.  
  745. }
  746.  
  747. CQuery.setPage = function (page_arguments){
  748. //获取到初始化数据
  749. var id = page_arguments.id , //容器
  750. count = page_arguments.count , //总数
  751. now_index = page_arguments.index , //当前的索引
  752. success = page_arguments.success ; //成功之后的回调函数
  753. // control = (page_arguments.control !== undefined)?page_arguments.control:true;
  754. id.className = 'page';
  755. var a =new Array();
  756. //初始化数据 第一个按钮的数据
  757. if(now_index == 1){
  758. a.push("<a href='javascript:' class='unclick'>prev</a>");
  759. }else{
  760. a.push( "<a href='javascript:' >prev</a>");
  761. }
  762. //初始化中间的数据
  763. function setPageList(i,n_inx){
  764. if(i == n_inx){
  765. a.push("<a href='javascript:' class='on' >"+i+"</a>");
  766. }else{
  767. a.push("<a href='javascript:' >"+i+"</a>");
  768. }
  769. }
  770.  
  771. function trim(str) {
  772.  
  773. return str.replace(/(^\s*)|([^0-9])|(\s*$)/g,'');
  774. }
  775.  
  776. function forEach(start, end, fn){
  777. for(var i = start; i <= end; i++){
  778. fn&&fn( i );
  779. }
  780. }
  781. //中间的1到count 中的页数
  782. if(count<=9){
  783. //这里只有一种情况
  784. forEach(1, count, function(i){
  785. setPageList(i,now_index);
  786. })
  787. }else{
  788. //这里有三种情况
  789. if(now_index<=4){
  790. forEach(1, 5, function(i){
  791. setPageList(i,now_index);
  792. });
  793. a.push("...<a href='javascript:'''>"+count+"</a>");
  794. }else if(now_index >= (count-3)){
  795. a.push("<a>"+1+"</a>...");
  796. forEach(count-4, count, function(i){
  797. setPageList(i,now_index);
  798. });
  799. }else{
  800. a.push("<a href='javascript:'>1</a>...");
  801. forEach(now_index-2,now_index+2,function(i){
  802. setPageList(i,now_index);
  803. });
  804. a.push("...<a href='javascript:'>"+count+"</a>");
  805. }
  806. }
  807. //最后添加的按钮
  808.  
  809. if(now_index == count){
  810. a.push("<a href='javascript:' class='unclick'>next</a>");
  811. }else{
  812. a.push("<a href='javascript:'>next</a>");
  813. }
  814.  
  815. //到第几页
  816. a.push("<a class='no'>到第</a>");
  817. a.push("<a class='no'><input/ type='text'></a>");
  818. a.push("<a class='no'>页</a>");
  819. a.push("<a href='javascript:'>确定</a>");
  820.  
  821. id.innerHTML = a.join('');
  822. //添加事件
  823. var o_a = id.getElementsByTagName('a');
  824. for(var i = 0, len = o_a.length; i < len; i++){
  825. o_a[i].onclick = (function(i){
  826. if(i==0){
  827. return function(){
  828. /* if(page_arguments.motion){
  829. if(control){return false;}
  830. }*/
  831. now_index--;
  832. if(now_index < 1 ){
  833. now_index = 1;
  834. return false ;
  835. }
  836. page_arguments.index = now_index;
  837. //page_arguments.control = control;
  838. CQuery.setPage(page_arguments);
  839. success({count:count, index:now_index});
  840. return false;
  841. }
  842. }else if(i == (len-5)){
  843. return function(){
  844. /* if(page_arguments.motion){
  845. if(control){return false;}
  846. }*/
  847. now_index++;
  848. if(now_index > count ){
  849. now_index = count;
  850. return false ;
  851. }
  852. page_arguments.index = now_index;
  853. // page_arguments.control = control;
  854. CQuery.setPage(page_arguments);
  855. success({count:count, index:now_index});
  856. return false;
  857. }
  858. }else if(i == (len-4)){
  859. return function(){
  860. // alert(i)
  861. }
  862. }else if(i == (len-3)||i == (len-2)){
  863. return function(){
  864. // alert(i)
  865. }
  866. }else if(i == (len-1)){
  867. var o_input = id.getElementsByTagName('input')[0];
  868. var vl ="";
  869. o_input.onkeyup= function(){
  870. this.value = trim(this.value);
  871. if(this.value>=count){
  872. this.value = count;
  873. }
  874. if(this.value<=1){
  875. this.value = 1;
  876. }
  877. vl = this.value;
  878. }
  879. return function(){
  880. /* if(page_arguments.motion){
  881. if(control){return false;}
  882. }*/
  883. page_arguments.index = parseInt(vl)||1;
  884. // page_arguments.control = control;
  885. CQuery.setPage(page_arguments);
  886. success({count:count, index:page_arguments.index});
  887. }
  888. }else{
  889. return function(){
  890. /*if(page_arguments.motion){
  891. if(control){return false;}
  892. }*/
  893. page_arguments.index = parseInt(this.innerHTML);
  894. // page_arguments.control = control;
  895. CQuery.setPage(page_arguments);
  896. success({count:count, index:page_arguments.index});
  897. return false;
  898. }
  899. }
  900. })(i);
  901. }
  902. }
  903. CQuery.extend = function(obj){
  904. for(i in obj){
  905. CQuery[i] = obj[i];
  906. }
  907. }
  908. CQuery.inArray = function(arr_child,arr){
  909. var in_array_index = -1;
  910. forEach(arr,function(i){
  911. if(arr[i]==arr_child){
  912. in_array_index = i;
  913. return ;
  914. }
  915. });
  916. (arguments.length==2)||(in_array_index=-1);
  917. return in_array_index;
  918. }
  919. CQuery.parseJSON = function(json_data){
  920. return JSON.parse(json_data);
  921. }
  922. CQuery.isFunction =function(fn){
  923. if(checkType(data_type)==="[object Function]"){
  924. return true;
  925. }else{
  926. return false;
  927. }
  928. }
  929.  
  930. CQuery.isEmpty = function(obj){
  931. var is=false;
  932. if(checkType(data_type)!=="[object Object]"){
  933. return is;
  934. }
  935. for(i in obj){
  936. is=true;
  937. if(is==1){
  938. break;
  939. }
  940. }
  941. }
  942.  
  943. CQuery.isPlainObject=function(obj){
  944. if(checkType(data_type)==="[object Object]"){
  945. return true;
  946. }else{
  947. false;
  948. }
  949. }
  950. CQuery.isNumeric = function(num){
  951. if(checkType(data_type)==="[object Nunber]"){
  952. return true;
  953. }else{
  954. false;
  955. }
  956. }
  957.  
  958. CQuery.type = function(data){
  959. return typeof(data);
  960. }
  961. CQuery.error= function( msg ) {
  962. throw new Error( msg );
  963. }
  964. window.fn = function(){};
  965. window.$=window.jQuery = CQuery;
  966. fn.prototype = CQuery.prototype;
  967. fn.prototype.constructor = fn;
  968. window.new_CQuery = new fn();
  969. })(window,undefined,document);

使用例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="cq.js"></script>
<style>
div{
width:100px;
height:100px;
background:red;
position:absolute;
left:100px;
}
</style>
</head>
<body>
<script>
$(function(){
$('input').click(function(){
alert(1);
});
$('div').hover(function(){
console.log(0)
},function(){
console.log(2)
}).click(function(){
$(this).animate({width:200,
height:200
},function(){
$(this).animate({
left:300
})
})
})
});
</script>
<input type="button" value="按钮" />
<div></div>
</body>
</html>

Cq 的ajax和jq的ajax差不多

最简单的json提交方式为

Var json = $.ajax({

url:'ajaxform1.php',  //必填

data:'username=爱上的方式地方',

})

Alert(json)

最简单的文件上传为,这样与jq有些差别,大大减小了用户的传参

<input id=’fileId’  type=’file’ name = ‘file’>

$.ajax({

url:'ajaxform1.php',  //必填

success:function(data){

alert(data)

}

dataType:’file’ ,

fileObject:$(‘# fileId’).get(0)

})

参数说明

url: 请求的url

fileObject: 文件对象 需要传文件的时候才需要设置这个

dataType:有两个参数 是选择json数据传输还是file文件上传 默认是json

success: ajax通信成功后回调函数

async: 同步或者异步 false为同步 true为异步 默认是true

type:  post提交或者是get提交  默认是post

cache: 提交的时候是否清理url缓存 默认是不清理 为true   清理为false

loading : 状态函数 ajax响应1234 状态函数 readyState

complete : ajax通信无论成功还是失败都调用该函数

error :ajax通信出错或者是服务器出错调用该函数

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="../cq/cq.js"> </script>
<style>
div{
width:260px;
height:90px;
line-height:30px;
text-align:left;
border:3px #ccc dotted;
padding:30px 30px 0px 30px; color:#666
} .active{
color:green;
border-color:green;
}
</style>
</head>
<body>
<div id="box">
一次性可以拖拽上传多个文件,请把需要上传文件的拖拉到此处
</div>
<form> </form>
<script>
/*
ondrag script 当拖动元素时运行脚本
ondragend script 当拖动操作结束时运行脚本
ondragenter script 当元素被拖动至有效的拖放目标时运行脚本 3
ondragleave script 当元素离开有效拖放目标时运行脚本 类似于out
ondragover script 当元素被拖动至有效拖放目标上方时运行脚本 5
ondragstart script 当拖动操作开始时运行脚本
ondrop script 当被拖动元素正在被拖放时运行脚本 阻止浏览器拖拽默认事件只需要清除这两个事件浏览器就不会自动打开文件了
document.ondragover=document.ondrop=function(e){
e.preventDefault();
return;}
经过测试拖拽文件的时候发生事件循序为
ondragenter 只会触发一次事件,就是当文件拖拽到指定的元素的时候,如果不离开只会发生一次事件
ondragover 如果元素拖拽到指定的位置的时候会一直不停的触发事件
ondrop 只会触发一次事件是当文件拖拽到指定位置的时候并且放下去的时候,相当于mouseup事件
ondragenter->ondragover->ondrop
ondragleave 只会触发一次事件当元素离开有效拖放目标时运行脚本 out
*/ var box=document.getElementById("box"); document.ondragenter=function(e){
e.preventDefault();
console.log(3); } document.ondrop=document.ondragover=function(e){
e.preventDefault();
console.log(5);
// alert(2);
return ;
}
box.ondragover=function(e){
e.preventDefault();
console.log(5);
this.className='active';
}
box.ondrop=function(e){
this.className='';
e.preventDefault();
console.log(7);
//e.dataTransfer文件的parent对象 文件对象还要点e.dataTransfer.files[0] 第一个文件对象
console.log(e.dataTransfer);
/* ajax({
method:'post', //默认是get方式可选
url:'06.php', //必填
type:"file", //如果是设置文件则是上传文件,不设置默认是发送数据 //可选
//name:"file",//如果是设置了文件上传那么必须要填入表单设定的name
Ofile:e.dataTransfer, //如果是文件上传则(必填)需要穿一个文件对象过来,
loading:function(readyState){/*alert(readyState) }, //可选
success:function(dada){/*alert(dada); } //服务器响应函数必填
});*/
$.ajax({
url:'06.php', //必填
fileObject:e.dataTransfer,
dataType:'file'
}) return ;
} box.ondragleave =function(e){
this.className=' ';
e.preventDefault();
console.log(4);
return ;
}
</script>
</body>
</html>

一个类似于jq的小型库的更多相关文章

  1. 构建一个类jq的函数库

    jqfree core var $ = function(selector, context) { return new $.fn.init(selector, context); }; $.fn = ...

  2. Tomjson - 一个"短小精悍"的 json 解析库

    Tomjson,一个"短小精悍"的 json 解析库,tomjson使用Java语言编写,主要作用是把Java对象(JavaBean)序列化为json格式字符串,将json格式字符 ...

  3. (原创)发布一个C++版本的ORM库SmartDB(一)

    先简单说说ORM的优点: 提高开发效率,减少重复劳动,只和业务实体打交道,由业务实体自动生成sql语句,不用手写sql语句. 简单易用, 可维护性好. 隔离数据源,使得我们更换数据源时不用修改代码. ...

  4. 发布一个C++版本的ORM库SmartDB

    先简单说说ORM的优点: 提高开发效率,减少重复劳动,只和业务实体打交道,由业务实体自动生成sql语句,不用手写sql语句. 简单易用, 可维护性好. 隔离数据源,使得我们更换数据源时不用修改代码. ...

  5. windows forms 上一个类似于wpf snoop 的工具: Hawkeye

    windows forms 上一个类似于wpf snoop 的工具: Hawkeye 周银辉 WPF上有snoop这样的run time object editor让人用着很爽, 今天搜到了一个for ...

  6. 分析一个类似于jquery的小框架

    在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...

  7. 【Jetlang】一个高性能的Java线程库

    actor  Jetlang 提供了一个高性能的Java线程库,该库是 JDK 1.5 中的 java.util.concurrent 包的补充,可用于基于并发消息机制的应用. .net的MS CCR ...

  8. okhttputils【 Android 一个改善的okHttp封装库】使用(一)

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本文使用的OKHttp封装库是张鸿洋(鸿神)写的,因为在项目中一直使用这个库,所以对于一些常用的请求方式都验证过,所以特此整理下. ...

  9. okhttputils【 Android 一个改善的okHttp封装库】使用(三)

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 这一篇主要讲一下将OkHttpUtils运用到mvp模式中. 数据请求地址:http://www.wanandroid.com/to ...

随机推荐

  1. C++ 常用设计模式(学习笔记)

    1.工厂模式:简单工厂模式.工厂方法模式.抽象工厂模式 1).简单工厂模式:主要特点是需要在工厂类中做判断,从而创造相应的产品,当增加新产品时,需要修改工厂类. typedef enum { T80 ...

  2. Java的基本数据类型大小及其包装类

     Java的基本数据类型 变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间. 内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用来储存该类型数据. 因此,通过定义 ...

  3. Django App(五) load static files

    经过前面4篇的努力,已经基本完成了,polls站点的功能,但是所有界面都没有涉及样式,和JavaScript的导入.到目前为止了解到的Django是通过解析Url来完成对客户端的响应的,那么组成站点所 ...

  4. mysql数据库简单入门

    1.xampp  跨平台 优点:兼容性高 2. apache(服务器) 著名的集成环境(也叫集成安装包) 功能:一般在网站上运行,优点:稳定 缺点:性能上有瓶颈 nginx 优点:快 3. mysql ...

  5. Flex布局-项目的属性

    Flex项目有以下6个属性: order flex-grow flex-shrink flex-basis flex align-self order属性定义项目的排列顺序.数值越小,排列越靠前,默认 ...

  6. EasyUI datagrid 序列 化后时间 处理 九

    @{ ViewBag.Title = "Home Page"; Layout = null; } <!DOCTYPE html> <html> <he ...

  7. 使用Blend设计出符合效果的WPF界面

    之前不会用blend,感觉好难的,但美工给出的效果自己有没办法实现,所以研究了一下blend,感觉没有想象中的那么难 废话不多说,开始界面设计 今天拿到美工给的一个界面效果图 这个界面说实话,还可以吧 ...

  8. 学习笔记TF038:实现估值网络

    Q-Learning,学习Action对应期望值(Expected Utility).1989年,Watkins提出.收敛性,1992年,Watkins和Dayan共同证明.学习期望价值,从当前一步到 ...

  9. PythonStudy——可变与不可变 Variable and immutable

    ls = [10, 20, 30] print(id(ls), ls) ls[0] = 100 print(id(ls), ls) print(id(10)) print(id(20)) print( ...

  10. 二、tcp/ip基础知识

    一.TCP/IP的标准化 1.TCP/IP的含义 一般来说,TCP/IP是利用IP进行通信时所必须用到的协议群的统称. 具体点,IP或ICMP.TCP或UDP.TELENT或FTP.以及HTTP等都属 ...