在引入Jquery 1.6(+)的情况下,动态设置div隐藏显示的小案例
html代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!--引入jquery文件-->
<script src="../jquery-1.6.4.js"></script>
</head>
<body>
<div id="myDiv" title="wode" style="width:100px;height:100px;background:red;" ></div>
<input type="button" id="hiddenBtn" value="hidden" >
<input type="button" id="showBtn" value="show" >
</body>
</html>
相应的js代码:
<script> $(document).ready(function(){ $("#hiddenBtn").click(function(){ //方式1:原生态html dom方式 //document.getElementById("myDiv").style.display="none"; //方式2:通过css样式 //$("#myDiv").css({display:"none",background:"blue"}); //方式3:通过jquery api方法hide() //$("#myDiv").hide(); //方式4:通过设置attr $("#myDiv").attr("style","display:none");//将会丢失style的其他的值,显示的时候需要重新设置原有样式,不好用。 //方式5:通过设置prop(有问题,通过测试$("#myDiv").prop("style")返回的是CSSStyleDeclaration对象) //$("#myDiv").prop("style","display:none") //无效,暂时不知怎么解决。 }); $("#showBtn").click(function(){ //方式1:原生态html dom方式 document.getElementById("myDiv").style.display="block"; //方式2:通过设置css样式 //$("#myDiv").css({display:"block",background:"blue"}); //方式3:通过jquery api方法hide() //$("#myDiv").hide(); //方式4:通过设置attr $("#myDiv").attr("style","display:block;width:100px;height:100px;background:red"); //方式5:通过设置prop //$("#myDiv").prop("style","display:block") //将返回CSSStyleDeclaration,暂时无效 }); }); </script>
其中比较完全可行的是前三种方式;
而通过attr设置style属性时,将会丢失原有的样式,因此不大好用,而通过prop方式设置style则返回的东西视乎不是我们想要的,暂时舍弃,推荐使用前三种方式。
在使用jquery1.6(+)是对于标签的固有属性最好使用prop方式:
因为标签可以自定义属性,我获取自定义属性的时候,采用attr方式。
如:<a href="a.html" title="aaa" />
当需要取 href属性时,采用$("a").prop("href");
当取自定义属性title时 ,采用 $("a").attr("title");
对于属性值为true和false的,如checkbox , select ,标签用prop,用attr返回的未必是需要的值。