模拟jQuery的一些功能

  1 function getStyle(obj,attr){
  2     if(obj.currentStyle){
  3         return obj.currentStyle[attr];
  4     }
  5     else{
  6         return getComputedStyle(obj,false)[attr];
  7     }
  8 }
  9
 10 function getByClass(oParent,sClass){
 11     var arr = [];
 12     var aEle = oParent.getElementsByTagName("*");
 13     for(var i = 0;i < aEle.length;i ++){
 14         if(aEle[i].className == sClass){
 15             arr.push(aEle[i])
 16         }
 17     }
 18     return arr;
 19 }
 20
 21 function myAddEvent(obj,sEv,fn){
 22     //改造后return false 能同时具有阻止冒泡和默认事件的作用
 23     if(obj.attachEvent){
 24         obj.attachEvent("on"+sEv,function(){
 25             if(false == fn.call(obj)){
 26                 event.cancelBubble = true;
 27                 return false;
 28             }
 29         });
 30     }
 31     else{
 32         obj.addEventListener(sEv,function(ev){
 33             if(false == fn.call(obj)){
 34                 ev.cancelBubble = true;
 35                 ev.preventDefault();
 36             }
 37         },false);
 38     }
 39 }
 40
 41 function jQuery(vArg){
 42     this.elements = [];
 43     switch(typeof vArg){//typeof
 44         case "function":
 45             myAddEvent(window,"load",vArg);
 46             break;
 47         case "string":
 48             switch(vArg.charAt(0)){
 49                 case "#":
 50                     var obj = document.getElementById(vArg.substring(1));
 51                     this.elements.push(obj);
 52                     break;
 53                 case ".":
 54                     this.elements = getByClass(document,vArg.substring(1));
 55                     break;
 56                 default:
 57                     this.elements = document.getElementsByTagName(vArg);
 58             }
 59             break;
 60         case "object":
 61             this.elements.push(vArg);
 62     }
 63 }
 64
 65 function $(vArg){
 66     return new jQuery(vArg);
 67 }
 68
 69
 70 jQuery.prototype.click = function(fn){
 71     for(var i = 0;i < this.elements.length;i ++){
 72         myAddEvent(this.elements[i],‘click‘,fn);
 73     }
 74     return this;//支持链式操作
 75 };
 76
 77 jQuery.prototype.css = function(attr,value){
 78     if(arguments.length == 2){
 79         for(var i = 0;i < this.elements.length;i ++){
 80             this.elements[i].style[attr] = value;
 81         }
 82     }
 83     else{
 84         if(typeof attr == "string"){//typeof
 85             return getStyle(this.elements[0],attr);//获取时不能链式操作,因为到这里就返回了。带单位
 86         }
 87         else{
 88             for(var i = 0;i < this.elements.length;i ++){
 89                 var k = "";
 90                 for(k in attr){
 91                     this.elements[i].style[k] = attr[k];
 92                 }
 93             }
 94         }
 95     }
 96     return this;
 97 };
 98 //0  >>  fn1
 99 //1  >>  fn2
100 //3  >>  fn3
101 jQuery.prototype.toggle = function(){
102     var _arguments = arguments;
103     for(var i = 0;i < this.elements.length;i ++){
104         addToggle(this.elements[i]);
105     }
106     function addToggle(obj){
107         var count = 0;
108         myAddEvent(obj,"click",function(){
109             _arguments[count++ % _arguments.length].call(obj);
110         });
111     }
112     return this;
113 };
114
115 jQuery.prototype.attr = function(name,value){
116     if(arguments.length == 2){
117         for(var i = 0;i < this.elements.length;i ++){
118             this.elements[i][name] = value;
119         }
120     }
121     else{
122         return this.elements[0][name];
123     }
124     return this;
125 };
126
127 jQuery.prototype.eq = function(num){
128     return $(this.elements[num]);//普通的dom对象变成jQuery对象。单一dom对象的处理方式
129 };
130
131 jQuery.prototype.find = function(str){
132     var aResult = [];
133     for(var i = 0;i < this.elements.length;i ++){
134         switch(str.charAt(0)){
135             case ".":
136                 var aEle = getByClass(this.elements[i],str.substring(1));
137                 aResult = aResult.concat(aEle);
138             default:
139                 var aEle = this.elements[i].getElementsByTagName(str);
140                 appendArr(aResult,aEle);
141         }
142     }
143     var newJquery = $();
144     newJquery.elements = aResult;//数组dom对象的处理方式
145     return newJquery;
146 };
147
148 function appendArr(arr1,arr2){
149     for(var i = 0;i < arr2.length;i ++){
150         arr1.push(arr2[i]);
151     }
152 }
153
154 jQuery.prototype.index = function(){
155     return getIndex(this.elements[0]);
156 };
157
158 function getIndex(obj){
159     var aBrother = obj.parentNode.children;
160     for(var i = 0;i < aBrother.length;i ++){
161         if(aBrother[i] == obj){
162             return i;
163         }
164     }
165 }
166
167 jQuery.prototype.bind = function(sEv,fn){
168     for(var i = 0;i < this.elements.length; i++){
169         myAddEvent(this.elements[i],sEv,fn);
170     }
171 };
172
173 //extend
174 jQuery.prototype.extend = function(name,fn){
175     jQuery.prototype[name] = fn;
176 };
177
178 $().extend("size",function(){
179     return this.elements.length;
180 });
181
182 $().extend("animate",function(json){
183     for(var i = 0;i < this.elements.length;i ++){
184         startMove(this.elements[i],json);
185     }
186     function startMove(obj,json,fnEnd){
187         clearInterval(obj.timer);
188         obj.timer = setInterval(function(){
189             var oStop = true;
190             for( var attr in json){
191                 var cur = 0;
192                 if(attr == "opacity"){
193                     cur = Math.round( parseFloat( getStyle(obj,attr) ) * 100 );
194                 }
195                 else{
196                     cur = parseInt( getStyle(obj,attr) );
197                 }
198
199                 var speed = (json[attr] - cur) / 7;
200                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
201
202                 if(cur != json[attr]){
203                     oStop = false;
204                 }
205                 if(attr == "opacity"){
206                     obj.style.filter = ‘alpha(opacity:‘+(cur+speed)+‘)‘;
207                     obj.style.opacity = (cur + speed) / 100;
208                 }
209                 else{
210                     obj.style[attr] = cur + speed + "px";
211                 }
212             }
213             if(oStop){
214                 clearInterval(obj.timer);
215                 fnEnd&&fnEnd();
216             }
217         },30);
218     }
219 });
220
221 $().extend(‘drag‘,function(){
222     for(var i = 0;i < this.elements.length;i++){
223         drag(this.elements[i]);
224     }
225     function drag(obj){
226         var disX = 0;
227         var disY = 0;
228         obj.onmousedown = function(ev){
229             //这里位置的计算一定是mousedown的时候
230             var oEvent = ev || event;
231             disX = oEvent.clientX - parseInt( getStyle(obj,"left") );
232             disY = oEvent.clientY - parseInt( getStyle(obj,"top") );
233
234             if(obj.setCapture){
235                 obj.onmousemove = mouseMove;
236                 obj.onmouseup = mouseUp;
237                 obj.setCapture();
238             }
239             else{
240                 document.onmousemove = mouseMove;
241                 document.onmouseup = mouseUp;
242             }
243             function mouseMove(ev){
244                 var oEvent = ev || event;
245
246                 obj.style.top = oEvent.clientY - disY + "px";
247                 obj.style.left = oEvent.clientX - disX + "px";
248             }
249             function mouseUp(){
250                 this.onmousemove = this.onmouseup = null;
251                 if(obj.releaseCapture){
252                     obj.releaseCapture();
253                 }
254             }
255             return false;
256         };
257     }
258 });
时间: 2024-08-28 19:57:02

模拟jQuery的一些功能的相关文章

C语言:模拟实现printf,要求功能:print(&quot;ccc\ts!&quot;,&#39;b&#39;,&#39;i&#39;,&#39;t&#39;,&quot;welcome to you&quot;);

#define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <stdlib.h> #include <stdarg.h> int my_printf(const char *fmt, ...) { const char *s; char c; va_list ap;//参数列表 va_start(ap, fmt);//取的fmt指针给ap while (*fmt) { /*if (*fmt != 's' |

创建函数利用可变参数列表的形式模拟实现printf的功能

★创建函数利用可变参数列表的形式模拟实现printf的功能. 模拟简单的输入单个字符和字符串时的输出形式 如:输入:%c %c %c %c %c\t%s,'h','e','l','l','o',"welcome to here!" 输出:h e l l o   welcome to here! #include<stdio.h> #include<stdlib.h> #include<stdarg.h>    //需引入stdarg的头文件以便建立可

JS 模拟Jquery

<script type=text/javascript charset=utf-8> // 模拟jquery底层链式编程 // 块级作用域 //特点1 程序启动的时候 里面的代码直接执行了 //alert('我执行了'); //特点2 内部的成员变量 外部无法去访问 (除了不加var修饰的变量) //a = 10 ; (function(window , undefined){ // $ 最常用的对象 返回给外界 大型程序开发 一般使用'_'作为私用的对象(规范) function _$(a

js框架封装,模拟jQuery封装

模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解:一:结构部分首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获取dom元素:其后设置入口函数jQuery,返回一个F的实例:然后对jQuery.prototype进行设置:其后修改F的原型指向jQuery的原型,最后暴露出去两个接口$和jQuery:二:jQuery.fn.extend = jQuery.extend = function(){}通过向jQue

Struts2 整合jQuery实现Ajax功能(1)

技术领域很多东西流行,自然有流行的道理,这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美. 首先明确个概念: jQuery是什么:是使用javascript语言开发的,用于满足项目前台各种操作需要的js程序文件.也就是说,jQuery基本上就是个js程序集,基础核心是jQuery.js文件. l        当然根据不同的版本具体的表现形式: jQuery.1.6.js或者jquery-1.5.1.js 这个是版本号的不同,具体有哪些区别,还没发现. l      

C# WinForm UserControl模拟Form的AcceptButton功能

很多UserControl程序使用当中,用户经常会输入数值后执行回车直接提交操作.比如查询,输入查询条件后直接回车,用户希望看到的是查询结果,而不用再点击查询按钮,但是 UserControl是没有AcceptButton属性的,即不能指定回车后触发的按钮. 方法一.修改按钮属性为pulic 在属性窗口中修改UserControl指定Button的modifier为pulic,然后设置所在窗体的AcceptButton为UserControl上的按钮. 或者在代码中修改,即在uc.Designe

基于jQuery带备忘录功能的日期选择器

今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <header class="htmleaf-header">

模拟jQuery简单封装ajax

1 /*模拟jQuery的写法 (简单写法)*/ 2 var $={}; 3 /*ajax*/ 4 $.ajax = function (options) { 5 /* 6 * 请求 7 * 1.请求接口 type get post 默认的是get 决定是否设置请求头 8 * 2.接口地址 url 不确定 字符串 如果用户没有传 默认的接口地址为当前路径 9 * 3.是否是异步 async 默认的就是异步 true;false 是同步请求 10 * 4.提交数据 data 默认的是对象 {nam

Java基础知识强化之IO流笔记53:IO流练习之 自定义类模拟BufferedReader的readLine()功能案例

1. 用Reader模拟BufferedReader的readLine()功能:   readLine():一次读取一行,根据换行符判断是否结束,只返回内容,不返回换行符 2. 代码实现和思路分析: 1 package cn.itcast_08; 2 3 import java.io.IOException; 4 import java.io.Reader; 5 6 /* 7 * 用Reader模拟BufferedReader的readLine()功能 8 * 9 * readLine():一次