原生js仿jquery一些常用方法(必看篇)


Posted in Javascript onSeptember 20, 2016

最近迷上了原生js,能不用jquery等框架的情况都会手写一些js方法,记得刚接触前端的时候为了选择器而使用jquery。。。现在利用扩展原型的方法实现一些jquery函数:

1.显示/隐藏

//hide() 
Object.prototype.hide = function(){ 
 this.style.display="none"; 
 return this; 
} 
//show() 
Object.prototype.show = function(){ 
 this.style.display="block"; 
 return this; 
}

return this的好处在于链式调用。

2.滑动 省略speed和callback的传入,因为要加一串判断和处理回调,代码量大

//slideDown() 
Object.prototype.slideDown = function(){ 
 this.style.display = 'block'; 
 if(this.clientHeight<this.scrollHeight){ 
  this.style.height=10+this.clientHeight+"px"; 
  var _this = this; 
  setTimeout(function(){_this.slideDown()},10) 
 }else{ 
  this.style.height=this.scrollHeight+"px"; 
 } 
} 
//slideUp() 
Object.prototype.slideUp = function(){ 
 if(this.clientHeight>0){ 
  this.style.height=this.clientHeight-10+"px"; 
  var _this = this; 
  setTimeout(function(){_this.slideUp()},10) 
 }else{ 
  this.style.height=0; 
  this.style.display = 'none'; 
 } 
}

3.捕获/设置

//attr() 
Object.prototype.attr = function(){ 
 if(arguments.length==1){ 
  return eval("this."+arguments[0]); 
 }else if(arguments.length==2){ 
  eval("this."+arguments[0]+"="+arguments[1]); 
  return this; 
 } 
} 
//val() 
Object.prototype.val = function(){ 
 if(arguments.length==0){ 
  return this.value; 
 }else if(arguments.length==1){ 
  this.value = arguments[0]; 
  return this; 
 } 
} 
//html() 
Object.prototype.html = function(){ 
 if(arguments.length==0){ 
  return this.innerHTML; 
 }else if(arguments.length==1){ 
  this.innerHTML = arguments[0]; 
  return this; 
 } 
} 
//text()需要在html()结果基础上排除标签,会很长,省略

4.CSS方法

 

//css() 
Object.prototype.css = function(){ 
 if(arguments.length==1){ 
  return eval("this.style."+arguments[0]); 
 }else if(arguments.length==2){ 
  eval("this.style."+arguments[0]+"='"+arguments[1]+"'"); 
  return this; 
 } 
}

 5.添加元素

//append() 
Object.prototype.append = function(newElem){ 
 this.innerHTML += newElem; 
 return this; 
} 
//prepend() 
Object.prototype.prepend = function(newElem){ 
 this.innerHTML = arguments[0] + this.innerHTML; 
 return this; 
} 
//after() 
Object.prototype.after = function(newElem){ 
 this.outerHTML += arguments[0]; 
 return this; 
} 
//before() 
Object.prototype.before = function(newElem){ 
 this.outerHTML = arguments[0] + this.outerHTML; 
 return this; 
}

6.删除/替换元素

//empty() 
Object.prototype.empty = function(){ 
 this.innerHTML = ""; 
 return this; 
} 
//replaceWith() 
Object.prototype.replaceWith = function(newElem){ 
 this.outerHTML = arguments[0]; 
 return this; 
} 
//remove() js自带,省略。

7.设置css类

//hasClass() 
Object.prototype.hasClass = function(cName){ 
 return !!this.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); 
} 
//addClass() 
Object.prototype.addClass = function(cName){ 
 if( !this.hasClass( cName ) ){ 
  this.className += " " + cName; 
 } 
 return this; 
} 
//removeClass() 
Object.prototype.removeClass = function(cName){ 
 if( this.hasClass( cName ) ){ 
  this.className = this.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); 
 } 
 return this; 
}

上面的设置CSS类也可以利用html5新API classList及contains实现 但不兼容IE8以下及部分火狐浏览器

Object.prototype.hasClass = function(cName){ 
 return this.classList.contains(cName) 
} 
Object.prototype.addClass = function(cName){ 
 if( !this.hasClass( cName ) ){ 
  this.classList.add(cName); 
 } 
 return this; 
} 
Object.prototype.removeClass = function(cName){ 
 if( this.hasClass( cName ) ){ 
  this.classList.remove(cName); 
 } 
 return this; 
}

9.选择器

//id或class选择器$("elem") 
function $(strExpr){ 
 var idExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/; 
 var classExpr = /^(?:\s*(<[\w\W]+>)[^>]*|.([\w-]*))$/; 
 if(idExpr.test(strExpr)){ 
  var idMatch = idExpr.exec(strExpr); 
  return document.getElementById(idMatch[2]); 
 }else if(classExpr.test(strExpr)){ 
  var classMatch = classExpr.exec(strExpr); 
  var allElement = document.getElementsByTagName("*"); 
  var ClassMatch = []; 
  for(var i=0,l=allElement.length; i<l; i++){ 
   if(allElement[i].className.match( new RegExp( "(\\s|^)" + classMatch[2] + "(\\s|$)") )){ 
    ClassMatch.push(allElement[i]); 
   } 
  } 
  return ClassMatch; 
 } 
}

需要强调的是,选择器返回的结果或结果集包含的是htmlDOM,并非jquery的对象。大多数人都知道,document.getElementById("id")等价于jquery$("#id")[0],另外上面class选择器选择的结果如需使用,需要利用forEach遍历:

$(".cls").forEach(function(e){ 
 e.css("background","#f6f6f6") 
})

10.遍历 siblings()和children()获取的结果也需要结合forEach使用

//siblings() 
Object.prototype.siblings = function(){ 
 var chid=this.parentNode.children; 
 var eleMatch = []; 
 for(var i=0,l=chid.length;i<l;i++){ 
  if(chid[i]!=this){ 
   eleMatch.push(chid[i]); 
  } 
 } 
 return eleMatch; 
} 
//children() 原生js已含有该方法,故命名为userChildren。 
Object.prototype.userChildren = function(){ 
 var chid=this.childNodes; 
 var eleMatch = []; 
 for(var i=0,l=chid.length;i<l;i++){ 
  eleMatch.push(chid[i]); 
 } 
 return eleMatch; 
} 
//parent() 
Object.prototype.parent = function(){ 
 return this.parentNode; 
} 
//next() 
Object.prototype.next = function(){ 
 return this.nextElementSibling; 
} 
//prev() 
Object.prototype.prev = function(){ 
 return this.previousElementSibling; 
}

jquery事件函数原生js已有,另外,原生js实现jquery的一个常用函数 ajax 将会在下一篇写道。

原生js实现ajax方法

以上就是小编为大家带来的原生js仿jquery一些常用方法(必看篇)的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
javascript RegExp 使用说明
May 21 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
微信小程序rich-text富文本用法实例分析
May 20 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 #Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 #Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 #Javascript
jQuery简单倒计时效果完整示例
Sep 20 #Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 #Javascript
jQuery实现的网页换肤效果示例
Sep 20 #Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 #Javascript
You might like
php模拟登陆的实现方法分析
2015/01/09 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
js实现图片360度旋转
2017/01/22 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
详解vue axios二次封装
2018/07/22 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
python中子类调用父类函数的方法示例
2017/08/18 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
python scipy卷积运算的实现方法
2019/09/16 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
初中音乐教学反思
2014/01/12 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers