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 相关文章推荐
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
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与浏览器缓存的分析
2013/06/03 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
详解Python进程间通信之命名管道
2017/08/28 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
python实现日志按天分割
2019/07/22 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
管理专员自荐信
2014/01/26 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
学习教师法的心得体会
2014/09/03 职场文书
2014年优秀党员材料
2014/12/18 职场文书
个人合作协议范本
2015/08/06 职场文书
Python道路车道线检测的实现
2021/06/27 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS