1.如何隐藏部分文本（简单案例）

//样式

<style type="text/css">
            div.ex {
                background-color: #e5eecc;
                padding: 7px;
                border: solid 1px #c3c3c3;
                width: 300px;
            }
        </style>

//jq代码

<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
        <script type="text/javascript">
            
            $(function() {
                $('.hide').on('click', function() {//获取按钮给它添加点击事件
                    $(this).parents('.ex').hide('slow');//点击按钮后它的父元素隐藏  slow：缓慢隐藏，实现动画效果

　　　　　　　　//也可将slow换成数字，如hide(1000):表示隐藏的整个过程用时1000毫秒（即一秒钟）
                })
            })
        </script>

//html代码

<body>

        <h3>中国办事处</h3>
        <div class="ex">
            <button class="hide" type="button">隐藏</button>
            <p>联系人：张先生<br /> 北三环中路 100 号<br /> 北京
            </p>
        </div>

        <h3>美国办事处</h3>
        <div class="ex">
            <button class="hide" type="button">隐藏</button>
            <p>联系人：David<br /> 第五大街 200 号<br /> 纽约
            </p>
        </div>

    </body>

2.使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

//jq代码

<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#hide').on('click',function(){//获取隐藏按钮给它添加点击事件
                    $('#p1').hide('slow');//点击按钮后p标签隐藏  slow：缓慢隐藏，实现动画效果
                });
                $('#show').on('click',function(){//获取显示按钮给它添加点击事件
                    $('#p1').show('slow');//点击按钮后p标签显示  slow：缓慢显示，实现动画效果
                })
            })
        </script>

//html代码

<body>
        <button id="hide" type="button">隐藏</button>
        <button id="show" type="button">显示</button>
        <p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
        
    </body>

3.使用 toggle() 方法来切换 hide() 和 show() 方法。

//jq代码

<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
        <script type="text/javascript">

            $(function(){
                $(':button').on('click',function(){
                    $('p').toggle(1000);//表示点击的时候如果p标签显示就让它隐藏，反正则显示
                })
            })
        </script>

//html代码

<body>
        <button type="button">切换</button>
        <p>这是一个段落。</p>
        <p>这是另一个段落。</p>
    </body>

jQuery 隐藏/显示的更多相关文章

  1. 前端（jQuery）（4）-- jQuery隐藏显示与淡入淡出、滑动、回调

    1.隐藏与显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. Banner中利用Jquery隐藏显示下方DIV块

    实现方式1: <!DOCTYPE html><html><head>    <meta charset="UTF-8">    &l ...

  3. jquery 隐藏 显示 动画效果

    <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js&qu ...

  4. JQuery隐藏显示详情功能

    放置两个DIV:初始DIV :在Repetr绑定设置文字隐藏(三元运算符):'<%# Eval("字段2").ToString().Length>11?Eval(&qu ...

  5. 基于特定值来推断隐藏显示元素的jQuery插件

    jQuery-Visibly是一款小巧简单的jQuery隐藏显示元素插件.该插件依据某个元素的值,例如以下拉框的值.输入框的值等来推断是否显示某个指定的元素. 用于推断的值能够是单个值,或者是多个值, ...

  6. JQuery中隐藏/显示事件函数

    1.$("button").click(function(){ $("p").hide(); });2.如果您的网站包含许多页面,并且您希望您的 jQuery ...

  7. 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题

    此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...

  8. jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

    jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...

  9. js和jquery实现显示隐藏

    (选择的重要性) 当点击同一个按钮的时候实现显示影藏 <a id="link" class="b-btn-four task-resolve add-sub-tas ...

随机推荐

  1. SQL SERVER中的扩展属性

    以前在SQL SERVER建表时,总看到扩展属性,但一直未使用过.今天研究下: 增加扩展属性: 语法: sp_addextendedproperty [ @name = ] { 'property_n ...

  2. gcc命令中参数c和o混合使用的详解[转载]

    gcc -c a.c  编译成目标文件a.o gcc -o a a.o  生成执行文件a.exe gcc a.c  生成执行文件a.exe gcc -o a -c a.c    编译成目标文件a gc ...

  3. JS 之Blob 对象类型

    原文 http://blog.csdn.net/oscar999/article/details/36373183 什么是Blob? Blob 是什么? 这里说的是一种Javascript的对象类型. ...

  4. dos2unix对shell脚本程序的解救

    删除多个文件,不询问是否删除:rm -rf *.log (利用通配符) dos2unix 文件名:由于windows系统中文件的结束符和linux下文件的结束符不同,一些对语法要求较严格的脚本语言就会 ...

  5. [数据库]redis与redis操作

    网上搜了以下redis的入门操作,全TM的关于怎么安装配置和性能特点的. 基本的CRUD(Create, Read, Update, Delete)就谁也没说,简直气疯了. 先记录下自己常用的命令,后 ...

  6. ZeroMQ接口函数之 ：zmq_z85_encode – 使用Z85算法对一个二进制秘钥进行加密，输出可打印的文本

    ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq-z85-encode zmq_z85_encode(3)          ØMQ Manual - ØMQ/4. ...

  7. mallmold开源商城系统网银在线chinabank支付插件

    最近没事捣鼓项目,找了个轻型商城系统mallmold,用起来还觉的挺不错的,尤其是mallmold中文版,赞一个.中文版集成了大部分主流支付系统,但因是个人网站,没法获得对应的服务,最终选择了网银在线 ...

  8. javascript面向对象(二)：构造函数的继承

    本文来自阮一峰 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有 ...

  9. centos建立回收站

    linux下的回收站在每一个当前用户目录./local/share/Trash中. 也可以给linux添加一个回收站. mkdir /tmp/trash_tmp 建立一个回收站目录 vi /bin/t ...

  10. H TC並沒有成為下一個摩托羅拉或諾基亞。

    關於2014年第四季度,H T C在三季度財報說明中提到,“年度旗艦H T CO ne(M 8)與中端機型H T C D esire系列在競爭日趨激烈的智能手機市場保持穩定的銷售,市占率有所提升,延續 ...