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. PXC备份方式总结

    记录一下. 1.mysqldump数据导出 关于GTID: GTID是MySQL5.6以后,加入了全局事务 ID (GTID) 来强化数据库的主备一致性,故障恢复,以及容错能力. A global t ...

  2. Python3 freetds.conf odbcinst.ini odbc.ini 之间的关系

    Python3 freetds.conf odbcinst.ini odbc.ini 之间的关系 三者分别是FreeTDS和UnixODBC的配置文件: 1,FreeTDS中的freetds.conf ...

  3. go实例—函数或方法的可变长参数

    支持可变长参数列表的函数可以支持任意个传入参数,比如fmt.Println函数就是一个支持可变长参数列表的函数. 需要注意的是,可变长参数应该是函数定义的最右边的参数,即最后一个参数 package ...

  4. No symbol "xxx" in current context解决

    当gdb的版本低于相应的gcc版本的时候,就会出现debug的时候出现No symbol "*" in current context或者The address where a.o ...

  5. 写给大忙人的spring cloud 1.x学习指南

    这几天抽空搞了下spring cloud 1.x(2.0目前应该来说还不成熟),因为之前项目中使用dubbo以及自研的rpc框架,所以总体下来还是比较顺利,加上spring boot,不算笔记整理,三 ...

  6. python简说（九）函数

    一.列表生成式 s =[1,2,3,4,5,6,7,8]for i in s: print(i+1)res = [ i+1 for i in s]res = [str(i) for i in s] 二 ...

  7. CSS的进一步深入（更新中···）

    在之前我们学了6种选择器和三种CSS样式的引入,学习选择器就是为了更好的选择文本,学习CSS的引入是为了使文本增加各种样式和属性, 下面我们简单来学习一下为文本加样式和一些属性和属性值: 1.文本的样 ...

  8. Python3基础 list for+continue 输出1-50之间的偶数

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. Vue学习【第四篇】：Vue 之webpack打包工具的使用

    什么是webpack webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.css甚 ...

  10. 一些常用的mysql语句实例-以后照写2

    specification: 规范, 规格, 产品规范, 产品规格, 技术规范, 产品说明书. 如: create_specification, 等等 创建数据库时, 显式地指明, 字符集: crea ...