這個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代碼中的性能/可訪問性問題？

回答

相關問題