jQuery 隐藏/显示
1.如何隐藏部分文本(简单案例)
//样式
<style type="text/css">
div.ex {
background-color: #e5eecc;
padding: 7px;
border: solid 1px #c3c3c3;
width: 300px;
}
</style>
//jq代码
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function() {
$('.hide').on('click', function() {//获取按钮给它添加点击事件
$(this).parents('.ex').hide('slow');//点击按钮后它的父元素隐藏 slow:缓慢隐藏,实现动画效果
//也可将slow换成数字,如hide(1000):表示隐藏的整个过程用时1000毫秒(即一秒钟)
})
})
</script>
//html代码
<body>
<h3>中国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人:张先生<br /> 北三环中路 100 号<br /> 北京
</p>
</div>
<h3>美国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人:David<br /> 第五大街 200 号<br /> 纽约
</p>
</div>
</body>
2.使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
//jq代码
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
$('#hide').on('click',function(){//获取隐藏按钮给它添加点击事件
$('#p1').hide('slow');//点击按钮后p标签隐藏 slow:缓慢隐藏,实现动画效果
});
$('#show').on('click',function(){//获取显示按钮给它添加点击事件
$('#p1').show('slow');//点击按钮后p标签显示 slow:缓慢显示,实现动画效果
})
})
</script>
//html代码
<body>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<p id="p1">如果点击“隐藏”按钮,我就会消失。</p>
</body>
3.使用 toggle() 方法来切换 hide() 和 show() 方法。
//jq代码
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
$(':button').on('click',function(){
$('p').toggle(1000);//表示点击的时候如果p标签显示就让它隐藏,反正则显示
})
})
</script>
//html代码
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
jQuery 隐藏/显示的更多相关文章
- 前端(jQuery)(4)-- jQuery隐藏显示与淡入淡出、滑动、回调
1.隐藏与显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- Banner中利用Jquery隐藏显示下方DIV块
实现方式1: <!DOCTYPE html><html><head> <meta charset="UTF-8"> &l ...
- jquery 隐藏 显示 动画效果
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js&qu ...
- JQuery隐藏显示详情功能
放置两个DIV:初始DIV :在Repetr绑定设置文字隐藏(三元运算符):'<%# Eval("字段2").ToString().Length>11?Eval(&qu ...
- 基于特定值来推断隐藏显示元素的jQuery插件
jQuery-Visibly是一款小巧简单的jQuery隐藏显示元素插件.该插件依据某个元素的值,例如以下拉框的值.输入框的值等来推断是否显示某个指定的元素. 用于推断的值能够是单个值,或者是多个值, ...
- JQuery中隐藏/显示事件函数
1.$("button").click(function(){ $("p").hide(); });2.如果您的网站包含许多页面,并且您希望您的 jQuery ...
- 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题
此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...
- jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏
jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...
- js和jquery实现显示隐藏
(选择的重要性) 当点击同一个按钮的时候实现显示影藏 <a id="link" class="b-btn-four task-resolve add-sub-tas ...
随机推荐
- mysql在linux下修改存储路径
通过下面几步即可修改路径,这里的路径都是测试的路径,一般默认安装路径在/var/lib/mysql下,真正配置按照真实路径配置. 1.修改/etc/sysconfig/selinux文件:#SELIN ...
- [C++11][数据结构]自己的双链表实现
这个双链表,是我模仿stl的list制作的,只实现了一些基本功能,像merge,transfer这些就没有实现,用户可以用基本操作来自己做外部实现. 我没有选用stl的[begin,end)迭代器模式 ...
- BestCoder 2nd Anniversary
A题 Oracle http://bestcoder.hdu.edu.cn/contests/contest_chineseproblem.php?cid=703&pid=1001 大数相加: ...
- 使用bind方法确定接收者
var buffer = { entries : [], add : function(s){ this.entries.push(s); }, concat : function(){ return ...
- HBase change split policy on an existing table
hbase(main)::> create 'test_table_region', 'username' row(s) in 1.2150 seconds hbase(main)::> ...
- BZOJ4712 : 洪水
首先不难列出DP方程: $dp[x]=\min(w[x],h[x])$ $h[x]=\sum dp[son]$ 当$w[x]$增加时,显然$dp[x]$不会减少,那么我们求出$dp[x]$的增量$de ...
- Node.js用ES6原生Promise对异步函数进行封装
Promise的概念 Promise 对象用于异步(asynchronous)计算..一个Promise对象代表着一个还未完成,但预期将来会完成的操作. Promise的几种状态: pending:初 ...
- css3新特性
1.css3选择器 我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式.参考下述代码: Body > .mainTabContainer div > s ...
- JSP 简介
160901 1. 一句话介绍什么是JSP? 和java相关的技术,可以开发出动态的,高性能的Web应用程序,的一门开发语言 2. 优点即特点,那么jsp的优点有哪些呢? JSP实现的We ...
- JavaScript:数组大全
栈/队列 数组es3: pop删除最后一项(栈) shift删除第一项(队列) push增加到最后(栈) unshift增加到最前(队列) reverse翻转 join转字符串 slice截取(切片) ...