Проблемы с производительностью/доступностью в этом коде 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

Ваш код выглядит нормально, но вы можете кэшировать элементы DOM JQuery, поэтому вам не нужно пересекать структуру DOM больше, чем необходимо. Вы можете также цепь событий, чтобы сделать меньше Lookups:

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

Одна опечатка там. $ («input») должен быть $ («input»), но после фиксации его работы. Я даже не думал о цепочке событий; хорошая идея. – ryanulit

Проблемы с производительностью/доступностью в этом коде jQuery/HTML?

ответ

Смежные вопросы