这个jQuery/HTML代码中的性能/可访问性问题？

下面的代码在IE，FF，Chrome和Safari中运行得很好，但是我想知道它在扩展到很多用户时的实际效率以及它是否可以被屏幕阅读器/特殊需求用户/等访问？具体来说，是否有更好的方式来编写jQuery，以便使用更少的$（this）引用，并且这甚至会导致使用任何性能问题？另外，如果将标签上的显示设置为无，则会限制使用屏幕阅读器的人员的可访问性。当为了这个目的而加载页面时，我添加了title属性，但是这样做甚至可以帮助/是否是一个好主意？另外，我知道，如果javascript被禁用，所有这些都没用，但只是想知道这里。这个jQuery/HTML代码中的性能/可访问性问题？

<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      fieldset { 
       border: none; 
       padding: 10px; 
       width: 600px; 
       margin-top: 5px; 
      } 

      label { 
       display: none; 
      } 

      input { 
       width: 150px; 
       margin: 5px; 
       float: left; 
       display: block; 
      } 

      br { 
       clear: both; 
      } 
     </style> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       GetInputLabels(); 
       $("input").focus(function() { 
        if ($(this).val() == $(this).prev("label").text()) { 
         $(this).val('').css("color", "#000"); 
        }     
       }); 
       $("input").blur(function() { 
        if ($(this).val() == '') { 
         $(this).val($(this).prev("label").text()).css("color", "#bbb"); 
        } 
       }); 
       function GetInputLabels() { 
        $("input").each(function() { 
         var label = $(this).prev("label").text(); 
         $(this).val(label).css("color", "#bbb").attr("title", label); 
        }); 
       } 
      }); 
     </script> 
    </head> 
    <body> 
     <form> 
      <fieldset> 
       <label for="fname">First Name</label> 
       <input id="fname" type="text" /> <br/> 

       <label for="lname">Last Name</label> 
       <input id="lname" type="text" /> <br/> 

       <label for="email">Email</label> 
       <input id="email" type="text" /> <br/> 
      </fieldset> 
     </form> 
    </body> 
</html>

来源

2009-12-16 ryanulit

您的代码看起来不错，但是您可以缓存jQuery DOM元素，因此您不必非常必要地遍历DOM结构。您也可以链事件，使更少的查找：

var input = $('input'); 
input.focus(fn).blur(fn)...

你也可以缓存这个，以避免额外的jQuery的电话：

var context = $(this);

如果您要访问的屏幕阅读器，你不应该隐藏使用display:none 。我建议使用lke position:absolute; left:-10000px;来代替。

这是你的脚本的优化版本：

你需要记住

jQuery(function($) { 

    var input = $('input'); 
    var GetInputLabels = function() { 
     input.each(function() { 
      var elem = $(this); 
      var label = elem.prev('label').text(); 
      elem.val(label).css("color", "#bbb").attr("title", label); 
     }); 
    } 

    GetInputLabels(); 

    input.focus(function() { 
     var elem = $(this); 
     if (elem == elem.prev('label').text()) { 
      elem.val('').css("color", "#000"); 
     }          
    }).blur(function() { 
     var elem = $(this); 
     if (elem.val() == '') { 
      elem.val(elem.prev("label").text()).css("color", "#bbb"); 
     } 
    }); 
});

来源

2009-12-16 16:37:03 David

这些答案适合我。谢谢大家。 – ryanulit

一件简单的事情就是在你的匿名函数的开头设置var element = $(this);并使用这个变量。这将避免多次执行查找。

至于屏幕阅读器，将标签设置为visibilty: hidden（或display: none）将阻止他们朗读。正确的方法似乎使他们脱离屏幕为正常用户与position:absolute解决方案。以下链接提供了更多关于此的信息：http://www.webaim.org/techniques/css/invisiblecontent/

来源

2009-12-16 16:35:22 Wookai

一个重要的事情就是缓存你的DOM查询。你也可以链接你的代码。

var inputs = null; 
function getInputs() { 
    if (inputs == null) { 
     inputs = $("input"); 
    } 

    return inputs; 
} 


$(document).ready(function() { 
    getInputs().each(function() { 
     var elm = $(this); 
     var label = elm.prev("label").text(); 
     elm.val(label).css("color", "#bbb").attr("title", label); 
    }).focus(function() { 
     var elm = $(this); 
     if (elm .val() == elm .prev("label").text()) { 
      elm .val('').css("color", "#000"); 
     }          
    }).blur(function() { 
     var elm = $(this); 
     if (elm.val() == '') { 
      elm.val(elm.prev("label").text()).css("color", "#bbb"); 
     } 
    }); 
});

来源

2009-12-16 16:37:26 ChaosPandion

那里有一个错字。 $（“输入”）应该是$（“输入”），但在修复后它可以工作。我甚至没有想过链接事件;好主意。 – ryanulit

这个jQuery/HTML代码中的性能/可访问性问题？

回答

相关问题