<!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. Codeforces Round #849 (Div. 4)

    A. Codeforces Checking 题意 每个案例给一个字符,如果在 "codeforces" 中出现过,输出 YES,否则输出 NO code /** * @autho ...

  2. 力扣---1148. 文章浏览 I

    Views 表:+---------------+---------+| Column Name   | Type    |+---------------+---------+| article_i ...

  3. 国际财务系统基于ShardingSphere的数据分片和一主多从实践

    作者:京东物流 张广治 1 背景 传统的将数据集中存储至单一数据节点的解决方案,在性能和可用性方面已经难于满足海量数据的场景,系统最大的瓶颈在于单个节点读写性能,许多的资源受到单机的限制,例如连接数. ...

  4. C++_关键字explicit

    首先, C++中的explicit关键字只能用于修饰只有一个参数的类构造函数, 它的作用是表明该构造函数是显示的, 而非隐式的, 跟它相对应的另一个关键字是implicit, 意思是隐藏的,类构造函数 ...

  5. 【译】.NET 7 中的性能改进（一）

    原文 | Stephen Toub 翻译 | 郑子铭 一年前,我发布了.NET 6 中的性能改进,紧接着是.NET 5..NET Core 3.0..NET Core 2.1和.NET Core 2. ...

  6. JZOJ 4296. 有趣的有趣的家庭菜园

    [NOIP2015模拟11.2]有趣的有趣的家庭菜园 题面 思路一 暴力 \(30\) 分! 很容易打,但是要注意: 开 \(\texttt{long long}\) 是非严格高于(等于是被允许的) ...

  7. Python批量绘制遥感影像数据的直方图

      本文介绍基于Python中gdal模块,实现对大量栅格图像批量绘制直方图的方法.   首先,明确一下本文需要实现的需求:现需对多幅栅格数据文件进行依据其像元数值的直方图绘制,具体绘制内容即各栅格图 ...

  8. Docker安装和卸载（centos）

    Docker安装和卸载 一,已安装Docker,卸载Docker 1.方法一 sudo yum remove docker \ docker-client \ docker-client-latest ...

  9. 跟女朋友介绍十个常用的 Python 内置函数，她夸了我一整天

    内置函数是什么 了解内置函数之前,先来了解一下什么是函数 将使用频繁的代码段进行封装,并给它起一个名字,当我们使用的时候只需要知道名字就行 函数就是一段封装好的.可以重复使用的代码,函数使得我们的程序 ...

  10. Python (进阶 第二部)

    目录 函数 闭包 匿名函数 迭代器 高阶函数 推导式 递归函数 函数 函数的定义:  功能( 包括一部分代码,实现某种功能,达成某个目的) 函数的特点:  函数可以反复调用 ,提高代码的复用性,提高开 ...