JQuery显示隐藏页面元素的方法总结


Posted in Javascript onApril 16, 2015

在jquery中显示隐藏div方法方法有很多种,如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作,下面我来介绍。

show()方法

显示出隐藏的 <p> 元素。

$(".btn2").click(function(){

  $("p").show();

});

toggle()方法

toggle() 方法切换元素的可见状态。
如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $(".btn1").click(function(){

  $("p").toggle(1000);

  });

});

</script>

</head>

<body>

<p>This is a paragraph.</p>

<button class="btn1">Toggle</button>

</body>

</html>

slideDown()方法

以滑动方式显示隐藏的 <p> 元素:

$(".btn2").click(function(){

  $("p").slideDown();

});

hide() 方法

隐藏可见的 <p> 元素:

$(".btn1").click(function(){

  $("p").hide();

});

这个函数经常与show一起使用

css()方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性
如需返回指定的 CSS 属性的值,请使用如下语法:

css("propertyname");

$("p").css("display","none");

看一个实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<script type="text/javascript"> 

$(document).ready(  function(){}); 

function hiden(){ 

$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast 

} 

function slideToggle(){ 

$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上 

} 

function show(){ 

$("#divObj").show();//显示,参数说明同上 

} 

function toggle(){ 

$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上 

 

} 

function slide(){ 

$("#divObj").slideDown();//窗帘效果展开 

} 

 

</script> 

</head> 

 

<body> 

<h3>div里内容的显示隐藏特效</h3> 

<input type="button" value="隐藏" onclick="hiden()"/> 

 <input type="button" value="显示" onclick="show()"/> 

 <input type="button" value="窗帘效果显示2" onclick="slide()"/> 

 <input type="button" value="窗帘效果的切换" onclick="slideToggle()"/> 

  <input type="button" value="隐藏显示效果切换" onclick="toggle()"/> 

<div id="divObj" style="display:none"> 

        1.测试例子<br/> 

        2.测试例子<br/> 

        3.测试例子<br/> 

        4.测试例子<br/> 

        5.测试例子<br/> 

        6.测试例子<br/> 

        7.测试例子<br/> 

        8.测试例子<br/> 

        9.测试例子<br/> 

        0.测试例子<br/> 

    </div> 

</body> 

</html>
Javascript 相关文章推荐
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
详解JavaScript中的链式调用
Nov 27 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 #Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 #Javascript
jQuery Ajax使用实例
Apr 16 #Javascript
javascript等号运算符使用详解
Apr 16 #Javascript
php常见的页面跳转方法汇总
Apr 15 #Javascript
jquery图片切换实例分析
Apr 15 #Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 #Javascript
You might like
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
PHP如何将XML转成数组
2016/04/04 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
佳能英国官方网站:Canon UK
2017/08/08 全球购物
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
物流仓管员岗位职责
2013/12/04 职场文书
医院辞职信范文
2014/01/17 职场文书
喝酒检查书范文
2014/02/23 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
加班费申请报告
2015/05/15 职场文书
捐书仪式主持词
2015/07/04 职场文书
会议新闻稿
2015/07/17 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫