自己封装jquery的一些方法 链式调用模式
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的一些方法 链式调用模式的更多相关文章
- Ajax请求Session超时的解决办法:拦截器 + 封装jquery的post方法
目标:前端系统,后端系统等,统一处理Session超时和系统错误的问题. 可能需要处理的问题:Session超时.系统500错误.普通的业务错误.权限不足. 同步请求: Sess ...
- JavaScript基础对象创建模式之链式调用模式(Chaining Pattern)(029)
链式调用模式允许一个接一个地调用对象的方法.这种模式不考虑保存函数的返回值,所以整个调用可以在同一行内完成: myobj.method1("hello").method2().me ...
- 如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用
1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...
- jquery中链式调用原理
(1).链式调用 $("#mybtn").css("width","100px") .css("height",&quo ...
- [js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数
一.我们从一个简单的构造函数+原型程序开始 var G = function(){}; G.prototype = { length : 5, size : function(){ return th ...
- 使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...
- 封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataT ...
- 34、[源码]-AOP原理-链式调用通知方法
34.[源码]-AOP原理-链式调用通知方法
- JQuery 插件一般方法
如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...
随机推荐
- B-树(B+树) 学习总结
一,B-树的定义及介绍 为什么会有B-树? 熟悉的树的结构有二叉树查找树或者平衡二叉树……平衡二叉树保证最坏情况下各个操作的时间复杂度为O(logN),但是为了保持平衡,在插入或删除元素时,需要进行旋 ...
- [转载]微软VS2015支持Android和iOS编程
Visual Studio 2015 Preview http://www.zhihu.com/question/26594936/answer/33397319 http://www.visuals ...
- 基础知识点 关于 prototype __proto__
基础知识点 关于 prototype __proto__ 供js新手参考 JavaScript 的一些基础知识点: 在 JavaScript 中,所有对象 o 都拥有一个隐藏的原型对象(在 Fire ...
- HTML5 移动开发(CSS3设计移动页面样式)
1.如何创建CSS样式表 2.CSS3的卓越特性 3.基于设备属性改变样式的媒体查询 4.如何使用属性改变元标签创建更美观移动页面 层叠样式表是移动WEB开发中的一个重要组成部分,本次分享将学到如 ...
- ZYNQ. LwIP.PHY.KSZ9031RNX
新一块板子 米尔科技的 z-turn 使用的PHY芯片是Micrel的 KSZ9031RNX 而不是zedboard上的Marvell的. 直接使用lwip的echo server demo时会报错 ...
- mybatis关联查询数据模型分析——(七)
1. 数据模型分析思路 1.每张表记录的数据内容 分模块对每张表记录的内容进行熟悉,相当 于你学习系统 需求(功能)的过程. 2.每张表重要的字段设置 非空字段.外键字段 3.数据库级别表与表 ...
- mysql innobackupex 备份及恢复
----------------------------------全量备份恢复-------------------------------------1.生成一个完整的备份 innobackupe ...
- Python api认证
本节内容: 基本的api 升级的api 终极版api 环境:Djanao, 项目名:api_auto, app:api 角色:api端,客户端,黑客端 1.基本的api [api端] #api_aut ...
- 纯js遍历json获取值动态为select添加option
遍历json数组 并动态为select添加option 直接上代码,重要部分有注解 <!DOCTYPE html> <html lang="en"> < ...
- device-pixel-radio
移动web开发之像素和DPR 今天看到一个面试题,为iphone6s的自适应,答案是@media(min-device-width:414px) and(max-device-width:736px) ...