前端之家收集整理的这篇文章主要介绍了
原生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;
}
}
)[^>]*|#([\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遍历:
方法,故命名为userChildren。
Object.prototype.userChildren = function(){
var chid=this.childNodes;
var eleMatch = [];
for(var i=0,l=chid.length;iIoUsElementSibling;
}