<!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. k8s中使用prometheus operator监控外部服务器部署的windows exporter

    k8s中使用prometheus operator监控外部服务器部署的windows exporter 0.文档说明 (1)Prometheus Operator是一个流行的k8s集群监控套件,项目地 ...

  2. LeetCode-357 统计各位数字都不同的数字个数

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/count-numbers-with-unique-digits 题目描述 给你一个整数 n ,统 ...

  3. LeetCode-2044 统计按位或能得到最大值子集的数目

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/count-number-of-maximum-bitwise-or-subsets 题目描述 给 ...

  4. git 日常基本使用

    // 将远程仓库下的所有分支拉取到本地 git fetch origin // 将dev分支合并到当前所在的分支 git merge dev // 基于当前分支克隆出新的本地分支 git checko ...

  5. sqlserver update join

    update a set a.UserAgent = b.UserAgent from InfoVisitDetails a inner join InfoVisitDetails b on a.IP ...

  6. snowland-smx密码算法库

    snowland-smx密码算法库 一.snowland-smx密码算法库的介绍 snowland-smx是python实现的国密套件,对标python实现的gmssl,包含国密SM2,SM3,SM4 ...

  7. P5318 【深基18.例3】查找文献题解（链式前向星）

    P5318 [深基18.例3]查找文献题解 用head记录这一起点的最后一条边, next记录这一起点的上一条边. 注意要按照参考文献的倒叙排序(要按顺序看,而链式前向星是逆着来的,也就是为什么最简单 ...

  8. Spanve：一种检测大规模空间转录组学数据中空间变异基因的有效统计方法

    文章题目 Spanve: an Effective Statistical Method to Detect Spatially Variable Genes in Large-scale Spati ...

  9. vue中当数据改变时更新DOM

    具体场景: 当vue中使用swiper, better-scroll时候,我们需要去new Swiper,new [better-scroll]来获取实例,通常我们页面的数据都是异步获取的, 会导致我 ...

  10. mysql8使用tmpfs内存磁盘当内存数据库的配置方法

    序: 内存关系数据库没有找到开源好用的,很多都是商用.虽然mysql有memory引擎,但写是整体锁表,没法用. 一直想将mysql放入内存中,搜索n次资料,没找到合适的,可能之前思路不对. 最近在测 ...