这次给大家带来js仿jquery步骤详解，js仿jquery的注意事项有哪些，下面就是实战案例，一起来看一下。
最近迷上了原生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.clientHeight0){
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需要强调的是，选择器返回的结果或结果集包含的是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;ijquery事件函数原生js已有，另外，原生js实现jquery的一个常用函数 ajax 将会在下一篇写道。
原生js实现ajax方法
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
仿1号店整站 for ECSHOP
ECSHOP仿1号店整站源码，适合服装，综合，食品等商城使用。 安装方法：1、下载程序包，解压，并上传至网站根目录。。2、访问域名/install.并按照操作步骤安装即可.3、安装完成后，访问：域名/admin后台信息:用户名:admin密码:admin8884.数据库--还原数据即可....
下载
