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. python-selenium，关于页面滑动的操作

    //移动到元素element对象的“顶端”与当前窗口的“顶部”对齐 ((JavascriptExecutor) driver).executeScript("arguments[0].scr ...

  2. python的__str__()和__repr__()方法

    __str__()和__repe__()方法定义一个值通过print打印时返回时的显示样式 l=list('hello') print(l) #['h', 'e', 'l', 'l', 'o'] cl ...

  3. 尚硅谷面试第一季-12Linux常用服务类相关命令

    课堂重点: 实操命令及运行结果: (centos 6) service network status chkconfig --list chkconfig --level 5 network off ...

  4. c和c++main函数的参数

    1.代码 int main(int argc,char **argv[]) { ; } 2.分析 argc:代码参数个数 argv:二级指针,很多个字符串,这里代表参数列表 3.分析 这个代码最终被编 ...

  5. 关于二进制——lowbit运算

    lowbit(n)意思即为找出n在二进制表示下最后一位1即其后面的0所组成的数值,别的东西算法书上有,这里提出一个重要的公式 lowbit(n)=n&(~n+1)=n&(-n),这个有 ...

  6. 新建一个Windows Service的方法

    http://www.cnblogs.com/YanPSun/archive/2010/05/22/1741381.html http://blog.csdn.net/m15188153014/art ...

  7. FireMonkey 源码学习（3）

    五.TTextLayoutNG 在FMX.TextLayout.GPU.pas文件中,实现了几个基础功能,其中: (1)渲染单元 在TextLayout中,每一批同字体和颜色的1~n个字符,组成一个最 ...

  8. Ubuntu18.04 安装搜狗输入法后无法启动的问题

    ibus 改选成fcitx后搜狗输入法照样没出来. 这里需要im-config 没有的话需要安装: sudo apt install im-config 然后在Terminal中执行 im-confi ...

  9. loj#2510. 「AHOI / HNOI2018」道路 记忆化，dp

    题目链接 https://loj.ac/problem/2510 思路 f[i][a][b]表示到i时,公路个数a,铁路个数b 记忆化 复杂度=状态数=\(nlog^2n\) 代码 #include ...

  10. SpringBoot 统一异常处理

    统一异常处理: @ControllerAdvice public class GlobalExceptionHandler { private Logger logger = LoggerFactor ...