个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-27 22:37:21 25 4
gpt4 key购买 nike

以下代码在 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>

最佳答案

您的代码看起来不错，但您可以缓存 jQuery DOM 元素，这样您就不必过多地遍历 DOM 结构。您还可以链接事件以减少查找次数:

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

你也可以缓存this以避免额外的jQuery调用:

var context = $(this);

如果您想访问屏幕阅读器，则不应使用 display:none 隐藏。我建议使用类似 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");
        } 
    });
});

关于jquery - 此 jQuery/HTML 代码中的性能/可访问性问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1915845/

25 4 0
文章推荐： c++ - 模板如何影响 C++ 中的隐式声明规则？
文章推荐： JQuery PNG 修复插件 - 效果不是很好？
文章推荐： c++ - 为什么这两个版本的代码给出不同的输出
文章推荐： JavaScript +css - 更改主类别的复选框 css，如果它下面的任何元素被选中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com