visibility：在切换元素可见性的同时会保持元素在普通流中的位置和空间。它有两个值：visible（默认的）和hidden（不可见的）， 例如： 复制代码 代码如下: <p>Hello <b>John</b>, how are you today?</p> 浏览器中是：Hello John, how are you today? 接着我们把John所在b的visibility设置为hidden后，就会变成这样 Hello , how are you today? display:为我们控制元素的布局提供了更丰富的选择。可以是inline、block或是none(它完全从文档中隐藏了元素,结果跟从文档中删除了该元素的情形看起来一样)。还是上面的例子，如果我们用了display:none。那么结果是 Hello , how are you today? 下面给出书中两个简单函数用于显示和隐藏元素 复制代码 代码如下://使用display隐藏元素 function hide(elem) { //找出元素display的当前状态 var curDisplay = getStyle(elem, 'display'); //记录它的display状态 if(curDisplay != 'none') elem.$oldDisplay = curDisplay; //设置display为none elem.style.display = 'none'; } //使用display显示元素 function show(elem) { //设置display属性为它的原始值 elem.style.display = elem.$oldDisplay || ' '; } 接下来我们来研究下透明度opacity，这可以给元素添加一个很cool的效果...看下下面这个设置元素透明度的函数。 复制代码 代码如下://设置元素的透明度(级别从0-100) function setOpacity(elem, level) { //如果存在filters这个属性，则它是IE if(elem.filters) { elem.style.filters = 'alpha(opacity=' + level + ')'; } else { //否则,使用W3C的opacity属性 elem.style.opacity = level / 100; } } 有了这些调整元素位置、尺寸和可见性的方法，我们就能把它们结合起来创建动画。 复制代码 代码如下:function slideDown(elem) { //从0高度开始滑动 elem.style.height = '0px'; //先显示元素(但是看不到它，因为它的高度为0) show(elem); //找到元素的完整的潜在高度 var h = fullHeight(elem); //我们在1秒钟内执行一个20帧的动画 for(var i = 0; i <= 100; i += 5) { //保证我们能够保持正确的'i'的闭包函数 (function() { var pos = i; //设置timeout以让它能在指定的时间点运动 setTimeout(function() { //设置元素新的高度 elem.style.height = (pos / 100) * h + 'px'; }, (pos + 1) * 10); })(); } } 这里有个闭包的概念，理解起来可能有些难度，感兴趣深入的园友可以去Google下，这里就不多讨论了。 接下来用setOpacity函数写个"渐显"函数： 复制代码 代码如下:function fadeIn(elem) { //从0透明度开始 setOpacity(elem, 0); //先显示元素(但是看不到它,因为它的透明度是0) show(elem); //我们在1秒钟内执行一个20帧的动画 for(var i = 0; i < 100; i += 5) { //保证我们能够保持正确的'i'的闭包函数 (function(){ var pos = i; //设置timeout以让它能在指定的事件内运行 setTimeout(function() { setOpacity(elem, pos); }, (pos + 1) * 10); })(); } } 为了代码的正确性,我写完后都去测试一下，因为发现书中会有些小错误,刚测试完上面的slideDown方法，应该把var h = fullHeight(elem);放到函数内容的第一句，不然没效果.... 第二部分的复习就到这里，慢慢消化，学东西可不能急于求成哦。

　　推荐阅读

　　jquery validate使用攻略 第四步

默认情况下，验证提示信息用label元素来显示, 并且会添加css class, 通过css可以很方便设置出错控件以及错误信息的显示方式。 /* 输入控件验证出错*/ form input.error { border:solid 1px red;} /* 验证错误提示信>>>详细阅读

本文标题：javascript与CSS复习(二)

地址：http://www.17bianji.com/kaifa2/JS/26117.html

 1/2    1