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

Question

以下代码在IE，FF，Chrome和Safari中都可以正常工作，但是我想知道在将其扩展到许多用户时它实际上有多有效，以及屏幕阅读器/特殊需求用户/等等是否可以访问它？ 具体来说，有没有更好的方法来编写jQuery，以便它使用较少的$（this）引用，这是否会对使用性能造成影响？ 另外，是否将标签上的显示设置为无显示会限制使用屏幕阅读器的人员的可访问性？ 为此目的，我在页面加载时添加了title属性，但这是否有帮助/这是一个好主意吗？ 另外，我知道如果禁用javascript，所有这些都将是无用的，只是想知道这里。

<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>

Answer 1

您的代码看起来不错，但是您可以缓存jQuery DOM元素，因此您不必不必要地遍历DOM结构。 您还可以链接事件以减少查询次数：

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

您还可以缓存它以避免额外的jQuery调用：

var context = $(this);

如果要访问屏幕阅读器，则不应使用display:none隐藏。 我建议使用某些position:absolute; left:-10000px; 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");
        } 
    });
});

Answer 2

一个简单的事情就是设置var element = $(this); 在您的匿名函数的开头，并使用此变量。 这样可以避免多次查找。

对于屏幕阅读器，将标签设置为“ visibilty: hidden （或display: none ）将防止大声读取它们。 正确的方法似乎使position:absolute解决方案对普通用户而言显得格外合适。 以下链接提供了有关此信息的更多信息： http : //www.webaim.org/techniques/css/invisiblecontent/

Answer 3

您需要记住的一件事是缓存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");
        } 
    });
});

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2009-12-16 16:37:03

解决方案2
0 2009-12-16 16:35:22

解决方案3
0 2009-12-16 16:37:26

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2009-12-16 16:37:03

解决方案2 0 2009-12-16 16:35:22

解决方案3 0 2009-12-16 16:37:26

解决方案1
1 已采纳 2009-12-16 16:37:03

解决方案2
0 2009-12-16 16:35:22

解决方案3
0 2009-12-16 16:37:26