<!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="data: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的更多相关文章

  1. jQuery.Callbacks之demo

    jQuery.Callbacks是jquery在1.7版本之后加入的,是从1.6版中的_Deferred对象中抽离的,主要用来进行函数队列的add.remove.fire.lock等操作,并提供onc ...

  2. Maven+Spring+Hibernate+Shiro+Mysql简单的demo框架(二)

    然后是项目下的文件:完整的项目请看  上一篇 Maven+Spring+Hibernate+Shiro+Mysql简单的demo框架(一) 项目下的springmvc-servlet.xml配置文件: ...

  3. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  4. jquery简单封装

    对Raphael画图标的一个jquery简单封装 公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封 ...

  5. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

  6. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  7. C#可扩展编程之MEF学习笔记（一）：MEF简介及简单的Demo

    在文章开始之前,首先简单介绍一下什么是MEF,MEF,全称Managed Extensibility Framework(托管可扩展框架).单从名字我们不难发现:MEF是专门致力于解决扩展性问题的框架 ...

  8. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  9. JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

  10. MEF简介及简单的Demo

    MEF简介及简单的Demo 文章开始之前,首先简单介绍一下什么是MEF,MEF,全称Managed Extensibility Framework(托管可扩展框架).单从名字我们不难发现:MEF是专门 ...

随机推荐

  1. P22_条件渲染

    条件渲染 wx:if 在小程序中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: 也可以用 wx:elif 和 wx:else 来添加 else 判 ...

  2. python_变量类型

    列表:用[]标识,可以用下标进行访问,可以更改值 List = [123,'book'] print List 元组:用()标识,可以用下标进行访问,但是不能更改元素值,相当于只读 tuple = ( ...

  3. The Missing Semester - 第一讲 学习笔记

    The Missing Semester - 第一讲 学习笔记 第一讲 课程概览与 shell 课程视频地址: https://www.bilibili.com/video/BV1Eo4y1d7KZ/ ...

  4. ubuntu 20.04 远程桌面（win10 控制 Ubuntu 20.04）

    转载csdn: https://blog.csdn.net/lucky7213/article/details/107008246/

  5. location.search

    问号 ? 之后的部分   location.search

  6. OpenLayers地图标注及弹窗实现

    1. 引言 地图标注是在地图中进行文字或图标的标注,从而显示对应的信息 本文基于OpenLayers实现地图上图文的标注与弹窗显示 OpenLayers官网:OpenLayers - Welcome ...

  7. (五)REDIS-哨兵与集群

    概念介绍: Sentinel(哨兵)是Redis的高可用性解决方案,主要是通过一个或多个Sentinel实例组成的Sentinel系统对任意多个主服务器以及这些主服务器的所有从服务器进行监视,当某个主 ...

  8. Android 数据回显

    public class EchoDataUtils { /** * 保存文件到手机内存 * @param context * @param number * @param psw * @return ...

  9. MyBatisPlus(springBoot版）-尚硅谷

    Pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  10. [GKCTF2021]RRRRSA

    [GKCTF2021]RRRRSA 题目 from Crypto.Util.number import * from gmpy2 import gcd flag = b'xxxxxxxxxxxxx' ...