Jquery 简单实现demo
Posted mk2016
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery 简单实现demo相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .img{ width: 450px; height: 300px; display: block; margin:30px auto 0; } .btn-wrap{ text-align: center; } .btn{ margin-top: 50px; width:100px; height: 40px; font-size: 16px; border-radius: 5px; outline: none; background: #ff8533; color: #fff; border:none; } .btn-show{ margin-right: 20px; } </style> <body> <img class="img" id="img" alt="图片" src="images/totoro.jpg"/> <div class="btn-wrap"> <input type="button" class="btn btn-show" id="btn1" value="显示"> <input type="button" class="btn btn-hide" id="btn2" value="隐藏"> </div> </body> <script type="text/javascript"> var $=function(selector,context){ return new $.fn.init(selector,context); } $.fn=$.prototype; $.fn={ init:function(selector,context){ var nodeList=(context||document).querySelectorAll(selector); this.length=nodeList.length; for(var i=0;i<this.length;i++){ this[i]=nodeList[i]; } return this; }, each:function(fn){ var len=this.length; for(var i=0;i<len;i++){ fn.call(this[i],i,this[i]); } return this; }, hide:function(){ this.each(function(){ this.style.display="none"; }) return this; }, click:function(fn){ this.each(function(){ this.addEventListener(‘click‘,fn,false); }) }, show:function(){ this.each(function(){ this.style.display="block"; }) return this; }, addClass:function(clsName){ this.each(function(){ var str = this.className; this.className=str+‘ ‘+clsName; }) return this; }, removeClass:function(clsName){ this.each(function(){ var str = this.className; var rex=new RegExp(clsName,‘g‘); var str1=str.replace(rex,‘‘); this.className=str1; }) return this; } } $.fn.init.prototype=$.fn; $(‘.btn-hide‘).click(function(){ $(‘#img‘).hide().addClass(‘ss‘).removeClass(‘htg‘); }) $(‘.btn-show‘).click(function(){ $(‘#img‘).show().addClass(‘htg‘).removeClass(‘ss‘); }) </script> </html>
以上是关于Jquery 简单实现demo的主要内容，如果未能解决你的问题，请参考以下文章