<!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. CentOS7安装了图形界面为默认如何修改默认登录到控制台

    在安装的时候,选择了图形界面安装,一段时间后,想还是直接登录到控制台,需要的时候在手动登录到图形界面, 在CentOS7中的设置方法不同与之前的版本 在之前的版本中是修改配置文件 sudo nano ...

  2. IDEA手动导入jar包到maven本地库

    第一步:下载需要的jar包 第二步:file project structure-liberaries 第三步:点击+号-选择java,再选择刚才下载的jar包,ok 此时我们把jar包加到项目了,但 ...

  3. H5商城项目源码 （可预览 测试有效）

    商城简介 这个商城项目由首页模块,发现模块,购物车模块以及我的等四大模块组成了33个相关内容界面 预览下载直通车 预览地址 首页模块 首页拥有搜索模块.分类模块.内容模块组成 发现模块 发现模块主要是 ...

  4. 从 PyTorch DDP 到 Accelerate 到 Trainer，轻松掌握分布式训练

    概述 本教程假定你已经对于 PyToch 训练一个简单模型有一定的基础理解.本教程将展示使用 3 种封装层级不同的方法调用 DDP (DistributedDataParallel) 进程,在多个 G ...

  5. JAVA8 常见用法

    1 . 集合List<T> 去单个元素,返回集合 List<Tbhr01> tbhr01List = new ArrayList<Tbhr01>(); List&l ...

  6. NetApp DataONTAP 集群模式 学习笔记1

    一．NetApp存储操作系统 Data ONTAP是NetApp最流行的存储操作系统,它运行在NetApp FAS(Fabric Attached Storage)系统上.FAS系统是被设计为共享的存 ...

  7. .NET 8 预览版 1：NativeAOT 升级和新的Blazor United

    .NET团队 今天在官方博客上 发布了.NET 8的第一个预览版,.NET 8 是一个长期支持 (LTS) 版本[1],.NET 的版本包括产品.库.运行时和工具,是 Microsoft 内部和外部多 ...

  8. 关于dynamic类型

    动态类型是从C#4才开始有的,随着DLR一起引人的. 大部分时候的行为如同object类型,对应的IL代码也是object类型. 它的特点是编译时会忽略在dynamic上进行的操作,如调用方法,读写属 ...

  9. CF825F - String Compression

    题意:压缩字符串,把字符串分成若干个子串,每个子串可以被压缩成"循环次数 \(+\) 循环节"的形式,求最小长度. dp 求 lcp 先 \(O(n^2)\) dp 求出所有后缀对 ...

  10. el-select 获取change点击index

    <el-select> <el-option v-for="(item, index) in optionlist" @click.native ="h ...