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

前端之家收集整理的这篇文章主要介绍了原生js仿jquery一些常用方法(必看篇)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1.显示/隐藏

return this的好处在于链式调用

2.滑动

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

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.捕获/设置

标签,会很长,省略

4.CSS方法

<div class="jb51code">
<pre class="brush:js;">
//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.添加元素

6.删除/替换元素

自带,省略。

7.设置css类

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

9.选择器

)[^>]*|#([\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

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

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

方法,故命名为userChildren。 Object.prototype.userChildren = function(){ var chid=this.childNodes; var eleMatch = []; for(var i=0,l=chid.length;iIoUsElementSibling; }

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

方法

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

原文链接:https://www.f2er.com/jquery/45709.html

猜你在找的jQuery相关文章