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 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
vue各种事件监听实例(小结)
Jun 24 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
Python 正则表达式入门(中级篇)
2016/12/07 Python
python中的计时器timeit的使用方法
2017/10/20 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
Python读取YAML文件过程详解
2019/12/30 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
python基于openpyxl生成excel文件
2020/12/23 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
初中三年学生的学习自我评价
2013/11/13 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
党员十八大心得体会
2014/09/12 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
赔偿协议书
2015/01/27 职场文书
社区服务活动报告
2015/02/05 职场文书
监护人证明
2015/06/19 职场文书
学子宴致辞大全
2015/07/27 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
Nginx的rewrite模块详解
2021/03/31 Servers
java多态注意项小结
2021/10/16 Java/Android