• each()
  • 插件机制
  • animation
  • ajax
  1. //each()
  2. //这里第一个参数指定将this指向每次循环到的那个元素身上,而第三个参数element其实就是this本身所以和第一个参数是一样的,而第二个参数是每次循环的下标
  3. zQuery.prototype.each=function(fn){
  4. for(var i=0;i<this.elements.length;i++){
  5. fn.call(this.elements[i],i,this.elements[i]);
  6. }
  7. };
  8. //插件机制
  9. $.fn=zQuery.prototype; //引用,如果只绑定一个插件,就直接写$.fn.toRed = function(){}...,相当于直接将toRed函数挂到zQuery.prototype上,可以进行zQuery对象调用
  10. //如果是挂多个插件,将函数参数中的json循环,挂在到zQuery.prototype中
  11. $.fn.extend=function(json){
  12. for(var key in json){
  13. //key == tored/toYellow
  14. //json[key] == fn
  15. zQuery.prototype[key]=json[key];
  16. }
  17. };
  18. $.ajax = ajax; //将ajax函数挂在到$.ajax上
  19. //animation
  20. zQuery.prototype.animate=function(json,options){
  21. for(var i=0;i<this.elements.length;i++){
  22. move(this.elements[i],json,options);
  23. }
  24. };
  25. //ajax封装
  26. function ajax(options){
  27. //-1.整理options
  28. options=options||{};
  29. options.data=options.data||{};
  30. options.type=options.type||'get';
  31. options.timeout=options.timeout||0;
  32. //0.整理data json --> string
  33. options.data.t=Math.random();
  34. var arr=[];
  35. for(var key in options.data){
  36. arr.push(key+'='+encodeURIComponent(options.data[key]));
  37. }
  38. var str = arr.join('&');
  39. //1.创建ajax
  40. if(window.XMLHttpRequest){
  41. var oAjax=new XMLHttpRequest();
  42. }else{
  43. var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
  44. }
  45. if(options.type=='get'){//get
  46. //2.建立连接
  47. oAjax.open('get',options.url+'?'+str,true);
  48. //3.发送
  49. oAjax.send();
  50. }else {//post
  51. //2.建立连接
  52. oAjax.open('post',options.url,true);
  53. //设置请求头
  54. oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  55. oAjax.send(str);
  56. }
  57. //4.接收
  58. oAjax.onreadystatechange=function(){
  59. if(oAjax.readyState==4){
  60. clearTimeout(timer);
  61. if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
  62. options.success && options.success(oAjax.responseText);
  63. }else{
  64. options.error && options.error(oAjax.status);
  65. }
  66. }
  67. }
  68. //5.超时
  69. if(options.timeout){
  70. var timer=setTimeout(function(){
  71. //数据不要了 ,你别加载
  72. oAjax.abort();//中断ajax请求,也会触发readyState==4
  73. },options.timeout);
  74. }
  75. }
  76. //运动函数的封装
  77. function move(obj,json,options){
  78. //整理可选参数
  79. options = options || {};
  80. options.duration = options.duration || 300;
  81. options.complete = options.complete || null;
  82. options.easing = options.easing || 'ease-out';
  83. var start={};
  84. var dis={};
  85. for(var key in json){
  86. start[key]=parseFloat(getStyle(obj,key));
  87. if(isNaN(start[key])){
  88. switch(key){
  89. case 'width':
  90. start[key]=obj.offsetWidth;
  91. break;
  92. case 'height':
  93. start[key]=obj.offsetHeight;
  94. break;
  95. case 'opacity':
  96. start[key]=1;
  97. break;
  98. case 'left':
  99. start[key]=0;
  100. break;
  101. case 'top':
  102. start[key]=0;
  103. break;
  104. //marginLeft/top... padding
  105. }
  106. }
  107. dis[key]=json[key]-start[key];
  108. }
  109. var count=Math.round(options.duration/30);
  110. var n=0;
  111. clearInterval(obj.timer);
  112. obj.timer=setInterval(function(){
  113. n++;
  114. for(var key in json){//办事部分包起来
  115. switch(options.easing){
  116. case 'linear':
  117. var a=n/count;// 匀速运动
  118. var cur=start[key]+dis[key]*a;
  119. break;
  120. case 'ease-in':
  121. var a=n/count;// 加速运动
  122. var cur=start[key]+dis[key]*(a*a*a);
  123. break;
  124. case 'ease-out':
  125. var a=1-n/count;// 减速运动
  126. var cur=start[key]+dis[key]*(1-a*a*a);
  127. break;
  128. }
  129. if(key=='opacity'){
  130. obj.style.opacity=cur;
  131. obj.style.filter='alpha(opacity='+cur*100+')';
  132. }else{
  133. obj.style[key]=cur+'px';
  134. }
  135. }
  136. if(n==count){
  137. clearInterval(obj.timer);
  138. options.complete && options.complete();
  139. }
  140. },30);
  141. }

【学】jQuery的源码思路6——增加each,animaion,ajax以及插件机制的更多相关文章

  1. 【学】jQuery的源码思路4——增加一些功能

    本文说一些简单的jQuery实现原理 eq() get() hide() show() index() find() //返回找到的一组元素中的第n个 zQuery.prototype.eq=func ...

  2. 【学】jQuery的源码思路5——增加class的操作

    hasClass, addClass, removeClass, toggleClass //addClass,加入class会对元素,利用正则,将class中多余的空格去掉 zQuery.proto ...

  3. 【学】jQuery的源码思路1——后代选择器

    jQuery的源码思路1--后代选择器 这里探讨一下jQuery中后代选择器的封装原理,并自己写一下 getEle('#div1 ul li .box');接受的参数就是个后代选择器,类似于这样: # ...

  4. 【学】jQuery的源码思路2——$符号是如何封装的

    jQuery中的$符号功能很强大,原因在于对函数参数的个数以及种类的控制,还有对于面向对象思想的运用 function jQuery(args){ //接受参数,并对其判断 this.elements ...

  5. 【学】jQuery的源码思路3——添加事件及其他

    这段添加的方法有: 各类事件函数 css() addEvent() toggle() //添加各种事件,将常用的事件名称放入数组,然后循环着加入到zQuery对象的原型上 var eventArr = ...

  6. 【深入浅出jQuery】源码浅析--整体架构

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  7. jQuery.Callbacks 源码解读二

    一.参数标记 /* * once: 确保回调列表仅只fire一次 * unique: 在执行add操作中,确保回调列表中不存在重复的回调 * stopOnFalse: 当执行回调返回值为false,则 ...

  8. jQuery.attributes源码分析(attr/prop/val/class)

    回顾 有了之前的几篇对于jQuery.attributes相关的研究,是时候分析jQuery.attr的源码了 Javascript中的attribute和property分析 attribute和p ...

  9. 【深入浅出jQuery】源码浅析2--奇技淫巧

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

随机推荐

  1. myeclipse和eclipse哪个好?

    eclipse是开发java的一款专业IDE,myeclipse本身是eclipse的插件(用于开发 javaee的平台),后来myeclipse干脆把eclipse集成进去了,所以现在你下载一个my ...

  2. 实现PageProcessor

    4.1 实现PageProcessor 这部分我们直接通过GithubRepoPageProcessor这个例子来介绍PageProcessor的编写方式.我将PageProcessor的定制分为三个 ...

  3. Network Assistant (Alpha)版使用说明

                                Network Assistant (网络助手)使用说明 本软件是一款帮助同学方便Ip更改,小蝴蝶断线重连,一键wifi,定时关机的软件.它集成 ...

  4. 十分钟了解分布式计算:Google Dataflow

    介绍 Google Cloud Dataflow是一种构建.管理和优化复杂数据处理流水线的方法,集成了许多内部技术,如用于数据高效并行化处理的Flume和具有良好容错机制流处理的MillWheel.D ...

  5. 行列式计算(C#)

    最近几天学习高等代数老师说要写个程序算行列式的结果,闲来无事就简单写了一下. 不多说了,上代码 using System; using System.Collections.Generic; usin ...

  6. 【php学习】PHP 入门经典第一章笔记

    第一章: php在线手册:http://php.net/manual/zh/index.php 在开始学习PHP之前,先来看一个合格的PHP程序员今后应具备哪些知识,这里只是笔者的一些总结,希望对读者 ...

  7. git 版本控制

    用gitbash进入类似命令行的窗口 用命令 cd e:/learngit 进入该目录,然后在此目录下初始化$ git init, 于是该文件夹就成为了一个工作区,里面的.git文件就是版本库(rep ...

  8. C的文件操作2

    [转] C语言文件操作  概述 所谓文件(file)一般指存储在外部介质上数据的集合,比如我们经常使用的mp3.mp4.txt.bmp.jpg.exe.rmvb等等.这些文件各有各的用途,我们通常将它 ...

  9. 每天的代码review和解决技术难题

    在此结构中,一个 PPC 处理器作为监管处理器,与大量的 SPE流处理器相连通,组成了一个工作流水线. 对于一个图形处理过程来说,某个 SPE 可负责提取数据,另一个 SPE 负责变换,再另一个负责存 ...

  10. C# Redis Server分布式缓存编程 --网络转载

    这篇文章我将介绍如果用最简洁的方式配置Redis Server, 以及如何使用C#和它交互编程 一. 背景介绍 Redis是最快的key-value分布式缓存之一 缺点: 没有本地数据缓冲, 目前还没 ...