<!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. Svelte框架结合SpreadJS实现表格协同文档

    SpreadJS是葡萄城结合 40 余年专业控件技术和在电子表格应用领域的经验而推出的纯前端表格控件.作为一个类Excel控件,SpreadJS如何实现当前比较流行的表格协同呢?本篇文章将简单介绍一下 ...

  2. 1.2.HBuilder软件与uniapp文件介绍

    uni-app官网地址 下载HBuilder 教程

  3. P16_发布-小程序的推广与运行数据的查看

    协同工作和发布 - 发布上线 基于小程序码进行推广 相对于普通二维码来说,小程序码的优势如下: 在样式上更具辨识度和视觉冲击力 能够更加清晰地树立小程序的品牌形象 可以帮助开发者更好地推广小程序 获取 ...

  4. typora永久插入图片

    https://c.runoob.com/front-end/59 首先将图片通过在线转码工具转换成base64的编码,并用以下格式嵌入即可,格式如下: ![image] (base64) 但是由于这 ...

  5. Ubuntu/linux下最强大的下载工具－aria2

    aria2 是 Linux 下一个不错的高速下载工具 .由于它具有分段下载引擎,所以支持从多个地址或者从一个地址的多个连接来下载同一个文件.这样自然就大大加快了文件的下载速 度.aria2 也具有断点 ...

  6. 使用brew安装历史版本的几种方式

    背景 在 mac osx 下, 大部分的软件都是使用 homebrew 进行管理的, 可以方便的进行软件的安装,更新,删除等等, 大部分情况下 homebrew 的仓库只会存在一份最新的软件版本, 有 ...

  7. [NOIP2018 提高组] 保卫王国

    题解 两只 \(\log\) 的动态 \(dp\) ! 相比标算倍增 动态 \(dp\) 既实用又好理解 \(Code\) #include<cstdio> #include<ios ...

  8. 推荐系统[八]算法实践总结V1：淘宝逛逛and阿里飞猪个性化推荐：召回算法实践总结【冷启动召回、复购召回、用户行为召回等算法实战】

    0.前言:召回排序流程策略算法简介 推荐可分为以下四个流程,分别是召回.粗排.精排以及重排: 召回是源头,在某种意义上决定着整个推荐的天花板: 粗排是初筛,一般不会上复杂模型: 精排是整个推荐环节的重 ...

  9. Art of Illusion 一款**的开源 3D 建模和渲染软件

    原文地址:https://www.mvrlink.com/artofillusion/ Art of Illusion 是一个免费的开源 3D 建模和渲染工作室.它的许多功能可与商业程序中的功能相媲美 ...

  10. react的useRef

    在使用RN动画的时候,看到这样的代码: const App = () => { const fadeAnim = useRef(new Animated.Value(0)).current; / ...