function getIndex(ele){

var parent=ele.parentNode;
var brothers=parent.children;

for(var i=0,len=brothers.length;i<len;i++){

if(ele==brothers[i]){

return i;

}

}

}

function falseArrToTrue(arr){

return Array.prototype.slice.call(arr);
}

function getElementsByClassName(obj,name){

var obj = obj || window.document;
var els=obj.getElementsByTagName("*");
var arr=[];

for(var i=0,len=els.length;i<len;i++){

if(els[i].className==name){

arr.push(els[i]);
}

}

return arr;
}

function addEvent(obj,type,fn){

if(obj.attachEvent){

obj.attachEvent("on"+type,function(event){

if(false==fn.call(obj)){

var event=event || window.event;
event.cancelBubble=true;
return false;

}

});
}

else if(obj.addEventListener){

obj.addEventListener(type,function(event){

if(false==fn()){

event.preventDefault();
event.cancelBubble=true;

}

},false);

}

}

function getStyle(obj,style){

return window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];

}

function Vjquery(arg){

this.elements=[];

switch(typeof arg){

case "string":

switch(arg.charAt(0)){

case "#":
var el=document.getElementById(arg.substring(1));
this.elements.push(el);
break;
case ".":
this.elements=getElementsByClassName(document,arg.substring(1));
break;
default:

this.elements=document.getElementsByTagName(arg);

}
break;

case "function":

addEvent(window,"load",arg);
break;

case "object":
this.elements.push(arg);
break;

}

}

Vjquery.prototype={

extend:function(key,value){

Vjquery.prototype[key]=value;

},

eq:function(n){

return $(this.elements[n]);

},

each:function(fn){

for(var i=0,len=this.elements.length;i<len;i++)

fn(i,this.elements[i]);

},

find:function(arg){

var res=[];
for(var i=0,len=this.elements.length;i<len;i++){

switch(arg.charAt(0)){

case "." :

var arr=getElementsByClassName(this.elements[i],arg.substring(1));
res=res.concat(arr);

var vqueryObj=new Vjquery();
vqueryObj.elements=res;
return vqueryObj;
break;

default :

var arr=falseArrToTrue(this.elements[i].getElementsByTagName(arg));
res=res.concat(arr);

var vqueryObj=new Vjquery();
vqueryObj.elements=res;
return vqueryObj;

}

}

},

index:function(){

return getIndex(this.elements.slice(-1)[0]);

},

click:function(fn){

for(var i=0,len=this.elements.length;i<len;i++){

addEvent(this.elements[i],"click",fn);

}

return this;

},

size:function(){

return this.elements.length;
},

bind:function(type,fn){

for(var i=0,len=this.elements.length;i<len;i++){

addEvent(this.elements[i],type,fn);

}

return this;

},

show:function(){

for(var i=0,len=this.elements.length;i<len;i++){

if(this.elements[i].nodeType==1){

this.elements[i].style.display="block";

}

}

return this;
},

hide:function(){

for(var i=0,len=this.elements.length;i<len;i++){

if(this.elements[i].nodeType==1){

this.elements[i].style.display="none";

}

}

return this;

},

toggle:function(f1,f2){

var _arguments=arguments;
var length=_arguments.length;
var index=0;

console.log(index);

this.click(function(){

_arguments[index]();
index=(++index)%length;

});

return this;

},

hover:function(overfn,outfn){

for(var i=0,len=this.elements.length;i<len;i++){

if(this.elements[i].nodeType==1){

addEvent(this.elements[i],"mouseover",overfn);
addEvent(this.elements[i],"mouseout",outfn);

}

}

return this;

},

css:function(name,value){ //参数有可能是json

if(typeof name=="string"){

for(var i=0,len=this.elements.length;i<len;i++){

if(this.elements[i].nodeType==1){

if(arguments.length==2){

this.elements[i].style[name]=value;
}

else if(arguments.length==1){

return getStyle(this.elements[0],name);
}

}
}

}

else if(typeof name=="object"){

for(var i=0,len=this.elements.length;i<len;i++){

for(var key in name ){

this.elements[i].style[key]=name[key];

}

}

}

return this;

},

attr:function(arg){

for(var i=0,len=this.elements.length;i<len;i++){

if(this.elements[i].nodeType==1){

if(arguments.length==2){

this.elements[i].setAttribute([arguments[0]],arguments[1]);
}

else if(arguments.length==1){

this.elements[i].getAttribute([arguments[0]]);
}

}

}

return this;

}

}

function $(str){

return new Vjquery(str);
}

自己封装jquery的一些方法 链式调用模式的更多相关文章

  1. Ajax请求Session超时的解决办法:拦截器 + 封装jquery的post方法

    目标:前端系统,后端系统等,统一处理Session超时和系统错误的问题. 可能需要处理的问题:Session超时.系统500错误.普通的业务错误.权限不足. 同步请求:            Sess ...

  2. JavaScript基础对象创建模式之链式调用模式(Chaining Pattern)(029)

    链式调用模式允许一个接一个地调用对象的方法.这种模式不考虑保存函数的返回值,所以整个调用可以在同一行内完成: myobj.method1("hello").method2().me ...

  3. 如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用

    1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...

  4. jquery中链式调用原理

    (1).链式调用 $("#mybtn").css("width","100px") .css("height",&quo ...

  5. [js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数

    一.我们从一个简单的构造函数+原型程序开始 var G = function(){}; G.prototype = { length : 5, size : function(){ return th ...

  6. 使用es6的then()方法封装jquery的ajax请求

    使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...

  7. 封装一个类似jquery的ajax方法

    //封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataT ...

  8. 34、[源码]-AOP原理-链式调用通知方法

    34.[源码]-AOP原理-链式调用通知方法

  9. JQuery 插件一般方法

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

随机推荐

  1. [C]语法, 知识点总结(一. 进制, 格式化输入/出, 指针)

    进制 概念: n进制, 最大的数是n-1, 逢n进1位. 数据类型 概念: 其实就是占的位数不同, 转换到计算机当中都是0和1. 常用: 类型名 占字节数 描述 char 1字节=8个二进制位 字符类 ...

  2. es6笔记(5)Map数据结构

    概要 字典是用来存储不重复key的Hash结构.不同于集合(Set)的一点,字典使用的是[key,value]的形式来存储数据. JavaScript的对象(Object:{})只能用字符串当做key ...

  3. lemon spj无效编译器解决方法

    反正我是被坑了很久,心里增的敲难过呀! 我曾经无数次的想把它解决掉: 啊啊啊啊啊啊! 什么嘛!什么嘛! 这个空白的框框里到底要填什么嘛!!! 你已经是一个成熟的lemon了,就不能自动识别给个选项吗! ...

  4. Javascript - 预编译与函数词法作用域

    预编译与函数词法作用域(Precompiled & Scoped) 预编译 Javascript脚本的宿主在执行代码之前对脚本做了预编译处理,比如浏览器对Js进行了预编译,编译器会扫描所有的声 ...

  5. TensorFlow 从零到helloWorld

    目录 1.git安装与使用 1.1 git安装 1.2 修改git bash默认路径 1.3 git常用操作 2.环境搭建   2.1 tensorflow安装   2.2 CUDA安装   2.3 ...

  6. 基于FPGA(DDS)的正弦波发生器

    记录背景:昨晚快下班时,与同事rk聊起怎么用FPGA实现正弦波的输出.我第一反应是利用高频的PWM波去滤波,但感觉这样的波形精度肯定很差:后来想起之前由看过怎么用FPGA产生正弦波的技术,但怎么都想不 ...

  7. Mysql读写分离-Amoeba Proxy

    参考:http://www.linuxidc.com/Linux/2015-10/124115.htm 一个完整的MySQL读写分离环境包括以下几个部分: 应用程序client database pr ...

  8. vue项目使用vw单位适配移动端方法

    传送门:  https://blog.csdn.net/zjw0742/article/details/79337336

  9. 【前端开发】关于闭包最通俗易懂的解释 for循环,定时器,闭包混合一块的那点事。

    for循环,定时器,闭包混合一块的那点事. 1,对于一个基本的for循环,顺序输出变量值. for(var i = 1; i < 4; i++){ console.log(i);//结果不多说了 ...

  10. Android 7.0 新增功能和api

    Android 7.0 Nougat 为用户和开发者引入多种新功能.本文重点介绍面向开发者的新功能. 请务必查阅 Android 7.0 行为变更以了解平台变更可能影响您的应用的领域. 要详细了解 A ...