JQuery 控制html元素显示或隐藏
2016-07-25 21:18
537 查看
在做项目中用到界面元素显示或隐藏的功能。比如:点击编辑按钮,切换复选框的显示隐藏。根据数据库中某一字段的不同值,在界面上显示不同的按钮组合。因此查找了如何控制界面元素的显示或隐藏方法。
一、通过jquery封装好的方法:
1、jQuery hide() 和show():
根据id为worksstate的input元素的value值,设置多个div显示隐藏。
2、jQuery toggle():
可以借助W3school的在线测试工具验证一下:
http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_show
二、通过设置元素的属性
3、设置id为one的元素的display属性为block:显示;设置id为three的元素的display属性为none:隐藏;
5、设置元素的visibility属性。
小小的元素显示隐藏,也有多种不同的方法实现,要根据自己的需求,找一个简便合适的方法。
最后放一个小彩蛋:
http://www.programgo.com/article/42365453569/;jsessionid=E472E10B45835C96C213F14CA5A28742
-----------------------------------------haha-----------------------------------
这篇文章给了我很大帮助,查了多个资料,这个最全,居然自己整理下来,几乎全一样。
一、通过jquery封装好的方法:
1、jQuery hide() 和show():
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });
function ShowOrHidden() { var state = document.getElementById("worksstate").value; if (state == "送拍") { $("#auctioned").show(); $("#shooted").hide(); $("#auction").hide(); $("#shoot").hide(); return false; } }
<input type=hidden id="worksstate" runat=server />
<div id="auction" name="name" > <asp:Button ID="btnAuction" runat="server" Text="送拍" onclick="btnShoot_Click" /> </div> <div id="shoot" name="name" > <input id="btn1" type="button" value="送展" /> </div> <div id="shooted" name="name" > <input id="Button2" type="button" value="已送展" /> </div> <div id="auctioned" name="name" > <input id="Button3" type="button" value="已送拍" /> </div>
根据id为worksstate的input元素的value值,设置多个div显示隐藏。
2、jQuery toggle():
$("button").click(function(){ $("p").toggle(); });
可以借助W3school的在线测试工具验证一下:
http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_show
二、通过设置元素的属性
3、设置id为one的元素的display属性为block:显示;设置id为three的元素的display属性为none:隐藏;
function ShowDelete() { $("#one").css('display','block');//显示 $("#three").css('display','none'); //隐藏 }4、获取界面上所有的input元素,如果input元素为复选框checkbox类型,就设置它们隐藏。
function HiddenCheckBox() { var inputs = document.getElementsByTagName("input"); //获取所有的input标签对象 var checkboxArray = []; //初始化空数组,用来存放checkbox对象。 for (var i = 0; i < inputs.length; i++) { var obj = inputs[i]; if (obj.type == 'checkbox') { obj.style.display = "none"; } } }
5、设置元素的visibility属性。
$(selector).css("visibility","hidden");//隐藏 $(selector).css("visibility","visible");//显示此种方式的隐藏虽然不显示了,但是元素依然占着位置。这是与上两种方式的不同之处。
小小的元素显示隐藏,也有多种不同的方法实现,要根据自己的需求,找一个简便合适的方法。
最后放一个小彩蛋:
http://www.programgo.com/article/42365453569/;jsessionid=E472E10B45835C96C213F14CA5A28742
-----------------------------------------haha-----------------------------------
这篇文章给了我很大帮助,查了多个资料,这个最全,居然自己整理下来,几乎全一样。
相关文章推荐
- jQuery使用on()方法给动态生成元素绑定事件
- jQuery Datatable后台分页
- jQuery选择器
- jQuery ajax 302跨域
- jquery实现擦除效果
- jQuery $(document).ready()和JavaScript onload事件
- 15 个最佳 jQuery 翻书效果插件
- jquery去掉空格的方法
- jQuery事件之鼠标事件
- jQuery中 $(this)与this的区别
- jQuery仿京东商城楼梯式导航定位菜单
- jQuery查看dom元素上绑定的事件列表
- 又一枚精彩的弹幕效果jQuery实现
- jquery 模糊匹配
- Java 利用jquery库cropper完成图片裁剪功能
- jquery中的this 到底是什么意思? $(this)
- Demo-jQuery下拉列表内容联动
- $()的三种方法-jquery
- Demo-checkbox全(不)选,反选
- Demo-jQuery获取焦点&文本框大小变化