1. 定义四种常用隐藏元素的方式，然后调用  jq 的 show 方法显示，观察各原先隐藏元素的   display   表现，结合 jq 源码，show 方法设置 元素 display  属性值为 隐藏时的 display

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    *{

      margin: 0;

      padding: 0;

    }

    ul,li{

      border: 1px solid red;

      color: red;

    }

    .hide{

      display: none;

    }

    .inline-block{

      display: inline-block;

    }

    .wrap li:nth-child(4){

      display: none;

    }

  </style>

</head>

<body>

  <ul class="wrap">

    <li style="display: none;">style="display: none;"</li>

    <li class="hide">class="hide" +  display:list-item;</li>

    <li class="hide inline-block">class="hide" +  display:inline-block;</li>

    <li>display:list-item;</li>

  </ul>

  <script src="jquery-1.9.1.min.js"></script>

  <script>

    $('.wrap li').show();

  </script>

</body>

</html>

2. 相关文章

jquery的show/hide/toggle详解

3. 扩展  其他隐藏方式 及区别

1 opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
2 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3 display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样

display: none; 与 jq show方法之间的联系的更多相关文章

  1. Android学习笔记之dispatchTouchEvent和OnInterceptTouchEvent和OnTouchEvent三个方法之间的联系...

    PS:好久没有写博客了,项目正式开始启动了,但是怎么也打不起精神来...可能还是不适应放假留校...这下一年只能回家一次了...伤感...写篇博客舒坦下... 学习内容:   Android中disp ...

  2. 李洪强iOS开发之OC[018]对象和方法之间的关系

    // //  main.m //  18 - 对象和方法之间的关系 // //  Created by vic fan on 16/7/14. //  Copyright © 2016年 李洪强. A ...

  3. 并查集类的c++封装，比較union_find algorithm四种实现方法之间的性能区别

    问题描写叙述: 在计算机科学中,并查集是一种树型的数据结构,其保持着用于处理一些不相交集合(Disjoint Sets)的合并及查询问题.有一个联合-查找算法(union-find algorithm ...

  4. jq筛选方法

    jq筛选方法(参照手册) 过滤: 1) eq(index|-index):获取第N个元素 负值表示从末尾开始匹配 <!-- 获取匹配的第二个元素 --> <p> This is ...

  5. 关于让simulink中display组件显示二进制的方法

    关于让simulink中display组件显示二进制的方法 1.首先需要配置gateway out模块,勾选propagate data type to output 2.配置display模块 fo ...

  6. jquery中使元素显示和隐藏方法之间的区别

    在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方 ...

  7. synchronized修饰的方法之间相互调用

    1:synchronized修饰的方法之间相互调用,执行结果为There hello  ..因为两个方法(main,hello)的synchronized形成了互斥锁.  所以当main方法执行完之后 ...

  8. 二.OC基础--1，对象的存储细节,2，#pragma mark指令,3，函数和对象方法的区别,4，对象和方法之间的关系 ,5.课堂习题

    1,对象的存储细节, 1. 当创建一个对象的时候:Person *p1 = [Person new],做了三件事情: 1,申请堆内存空间: 2,给实例变量初始化: 3,返回所申请空间的首地址; 2. ...

  9. display:none;visibility:hidden;opacity:0;之间的区别

    什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...

随机推荐

  1. django crontab 定时任务

    分 时 日 月 周 命令(最好用绝对路径)比如: * * * * * rm -fr /mnt/* //每分钟执行一次对/mnt目录下文件的删除*/2 * * * * rm -fr /mnt/* //每 ...

  2. sudo env

    $ sudo echo "Defaults        env_keep=\"PATH PYTHONPATH LD_LIBRARY_PATH CAFFE_ROOT\"& ...

  3. Git Add,Git别名等

    一,Git  Add 1.  git add -A   保存所有的修改 2.  git add .     保存新的添加和修改,但是不包括删除 3.  git add -u   保存修改和删除,但是不 ...

  4. 安装jumpserver

    Centos7.5 安装jumpserver 同步服务器时间 #下载 [root@jumpserver ~]# yum install ntpdate -y #同步时间 [root@jumpserve ...

  5. Bootstrap3基础 input-group-btn 按钮与输入框 横向组合

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  6. dede的使用-2

    自己开发站点的规律, 跟cms开发的规律应该是一样的, 而且应该学习和借鉴cms的开发规律方法和思想.比如也要分站点的内容性质, 是文章类站点, 还是图片类, 还是shopping类等. 也要分栏目. ...

  7. 弄懂linux shell对包含$的变量的执行过程?

    参考: http://www.linuxidc.com/Linux/2012-04/58095.htm 在包含变量的命令中, 命令是怎么执行的呢? 首先, 它会原封不动的, 只是按原样替换变量的内容. ...

  8. FJUT 毒瘤3（二分 + 最大匹配）题解

    毒瘤3 TimeLimit:1000MS  MemoryLimit:256MB 64-bit integer IO format:%lld   Problem Description 字节跳动有n款产 ...

  9. 【Dalston】【第二章】客户端负载均衡(Ribbon)

    对于大型应用系统负载均衡(LB:Load Balancing)是首要被解决一个问题.在微服务之前LB方案主要是集中式负载均衡方案,在服务消费者和服务提供者之间又一个独立的LB,LB通常是专门的硬件,如 ...

  10. 简单的栈溢出demo

    Code package startnow; /** * @auther draymonder */ public class StackOverFlowTest { public static vo ...