display: none; 与 jq show方法之间的联系

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，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样