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. 相关文章
3. 扩展 其他隐藏方式 及区别
1 opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
2 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3 display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样
display: none; 与 jq show方法之间的联系的更多相关文章
- Android学习笔记之dispatchTouchEvent和OnInterceptTouchEvent和OnTouchEvent三个方法之间的联系...
PS:好久没有写博客了,项目正式开始启动了,但是怎么也打不起精神来...可能还是不适应放假留校...这下一年只能回家一次了...伤感...写篇博客舒坦下... 学习内容: Android中disp ...
- 李洪强iOS开发之OC[018]对象和方法之间的关系
// // main.m // 18 - 对象和方法之间的关系 // // Created by vic fan on 16/7/14. // Copyright © 2016年 李洪强. A ...
- 并查集类的c++封装，比較union_find algorithm四种实现方法之间的性能区别
问题描写叙述: 在计算机科学中,并查集是一种树型的数据结构,其保持着用于处理一些不相交集合(Disjoint Sets)的合并及查询问题.有一个联合-查找算法(union-find algorithm ...
- jq筛选方法
jq筛选方法(参照手册) 过滤: 1) eq(index|-index):获取第N个元素 负值表示从末尾开始匹配 <!-- 获取匹配的第二个元素 --> <p> This is ...
- 关于让simulink中display组件显示二进制的方法
关于让simulink中display组件显示二进制的方法 1.首先需要配置gateway out模块,勾选propagate data type to output 2.配置display模块 fo ...
- jquery中使元素显示和隐藏方法之间的区别
在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方 ...
- synchronized修饰的方法之间相互调用
1:synchronized修饰的方法之间相互调用,执行结果为There hello ..因为两个方法(main,hello)的synchronized形成了互斥锁. 所以当main方法执行完之后 ...
- 二.OC基础--1，对象的存储细节,2，#pragma mark指令,3，函数和对象方法的区别,4，对象和方法之间的关系 ,5.课堂习题
1,对象的存储细节, 1. 当创建一个对象的时候:Person *p1 = [Person new],做了三件事情: 1,申请堆内存空间: 2,给实例变量初始化: 3,返回所申请空间的首地址; 2. ...
- display:none;visibility:hidden;opacity:0;之间的区别
什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...
随机推荐
- ElasticSearch(二)CentOs6.4下安装ElasticSearch
一.准备工作 Elastic 需要 Java 8 环境.如果你的机器还没安装 Java,先需要安装java环境,同时还注意要保证环境变量JAVA_HOME正确设置. 链接:https://pan.ba ...
- python简说（二十三）发邮件
import yagmailusername='uitestp4p@163.com'password='houyafan123'#生成授权码,qq.163.126都是授权码 mail_server = ...
- MSF基础应用
实践目标 掌握metasploit的基本应用方式. 具体需要完成(1)ms08_067;(2)ms11_050:(3)Adobe(4)成功应用任何一个辅助模块. 报告 虚拟机:可以找我拷贝(我一般都在 ...
- 【Python042--魔法方法：算术运算】
一.算术魔法方法的举例 1.加法(__add__)的算术运算调用减法(__sub__)的算术运算,减法(__sub__)的算术运算调用加法(__add__)的算术运算 class New_Init(i ...
- Received empty response from Zabbix Agent at[172.16.1.51]. Assuming that agent dropped connection because of access permissions
Centos7.5 Zabbix创建主机ZBX爆红 原因:/etc/zabbix/zabbix_agentd.conf配置文件的Server写错了 解决方法: [root@db01 ~]# vim / ...
- Restful framework【第八篇】频率组件
基本使用 频率: -限制每个ip地址一分钟访问10次 -写一个类 from rest_framework.throttling import SimpleRateThrottle class Visi ...
- repo总结【转】
本文转载自:https://blog.csdn.net/weixin_38599972/article/details/78982408 1. repo start ##创建并切换分支repo st ...
- L2-001：dijskstra + 多条最短路径 + 记录中间路径
题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805073643683840 思路: dijkstra算出最短路 ...
- HDU 5852 Intersection is not allowed!（LGV定理行列式求组合数）题解
题意:有K个棋子在一个大小为N×N的棋盘.一开始,它们都在棋盘的顶端,它们起始的位置是 (1,a1),(1,a2),...,(1,ak) ,它们的目的地是 (n,b1),(n,b2),...,(n,b ...
- nginx 配置 https 请求
1,先去这个网站申请一下证书 https://certmall.trustauth.cn/Home/Member/index/id/1521167511.html 上面会教你怎么去做. 2,就是配置自 ...