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. pyqt5 界面切换

    QStackedWidget 只需要关联好对应的信号和槽,调用setCurrentIndex函数,想切哪个界面就切到哪个界面

  2. pycharm+PyQt5+python最新开发环境配置，踩坑过程详解

    安装工具:Pycharm 专业版2017.3PyQT5python3 pyqt5-tools 设置扩展工具的参数找到setting->tools->external tools,点击加号新 ...

  3. 基于RHEL6.3 安装MySQL踩过的坑

    MySQL版本:Percona-Server-5.6.29 OS:RHEL6.3 安装出错 [mysql@oracle ~]$ /home/mysql/scripts/mysql_install_db ...

  4. PyCharm 设置护眼背景色

    PyCharm 设置护眼背景色 一.方法 File -> Seting -> Editor -> Color Scheme -> General -> Text -> ...

  5. 第一章-硬件组成及linux发展历史(1)

    一.服务器与计算机的组成? 计算机组成主要有:CPU.硬盘.内存.电源.显示器.鼠标.键盘 服务器组成主要有:CPU.硬盘.内存.电源.RAID卡.远程控制卡 CPU: 即:中央处理器,是一块超大规模 ...

  6. Codeforces 839C Journey - 树形动态规划 - 数学期望

    There are n cities and n - 1 roads in the Seven Kingdoms, each road connects two cities and we can r ...

  7. Junit 的Assertions的使用

    import static org.hamcrest.CoreMatchers.allOf; import static org.hamcrest.CoreMatchers.anyOf; import ...

  8. 01 Hello World！

    from tkinter import Label#获取组件对象 widget=Label(None,text='Hello GUI world!')#生成 widget.pack()#布置 widg ...

  9. init: wait for '/dev/block/bootdevice/by-name/cache' timed out and took 5007ms【学习笔记】

    平台信息:内核:4.9.112系统:android one平台:qcom sdm439 作者:庄泽彬(欢迎转载,请注明作者) 一.android设备在开机的时候打印了如下的log,由于系统使用了AB分 ...

  10. openwrt源码下的feeds.conf.default有何作用?

    答: 可以往openwrt下添加一些最新的软件包,这样make menuconfig后就可以发现很多软件包了. 该文件中的内容格式如下例: src-git packages https://git.l ...