原生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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 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正则表达式使用的详细介绍
2013/04/27 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
Python的gevent框架的入门教程
2015/04/29 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
python 全局变量的import机制介绍
2017/09/07 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
python中强大的format函数实例详解
2018/12/05 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
详解python配置虚拟环境
2019/04/08 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
生产主管岗位职责
2013/11/10 职场文书
教师党员公开承诺书
2014/03/25 职场文书
招标授权委托书样本
2014/09/23 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
2016高考感言
2015/08/01 职场文书
Django 如何实现文件上传下载
2021/04/08 Python