帮助将 jquery 代码转换为普通/纯 javascript答案

【问题标题】：Help converting jquery code to normal / plain javascript帮助将 jquery 代码转换为普通/纯 javascript
【发布时间】：2011-07-24 00:39:36
【问题描述】：

转换它的目的是让我可以了解它是如何在没有 jquery 的情况下完成的。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //  Focus auto-focus fields
        $('.auto-focus:first').focus();

        //  Initialize auto-hint fields
        $('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
            if($(this).val() == $(this).attr('title')){
                $(this).val('');
                $(this).removeClass('auto-hint');
            }
        });

        $('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
            if($(this).val() == '' && $(this).attr('title') != ''){
                $(this).val($(this).attr('title'));
                $(this).addClass('auto-hint');
            }
        });

        $('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
            if($(this).attr('title') == ''){ return; }
            if($(this).val() == ''){ $(this).val($(this).attr('title')); }
            else { $(this).removeClass('auto-hint'); }
        });
    });
</script>
</head>
<body>
<form>
Email: <input type="text" name="email" id="email" title="i.e. me@example.com" class="auto-hint" />
</form>
</body>
</html>

我在这里找到了这段代码： Html placeholder text in a textarea form

【问题讨论】：

那个 jQuery 代码质量不好（仅供记录）。
很高兴知道，它到底有什么不好？这段代码来自一个教程，见上面的链接，所以如果教错了就不好了）
1.相同的查找 - $('INPUT.auto-hint, TEXTAREA.auto-hint') - 连续执行 3 次，而不是仅仅被链接， 2. this.value 和 this.title 比 $(this).val() 和 $(this).val() 和 $(this).attr('title') 更快，更易读， 3. 约定类型选择器是小写的（input 而不是INPUT），4. 常规比较是在一个操作数为空字符串（x == ''）的情况下完成的 - 如果其中一个操作数是假的，则不应执行常规比较价值。相反，应该使用严格的比较。是的，我担心教程会教坏做法。
顺便说一句，为什么投反对票？什么能让这个问题变得更好？投反对票时，最好说明原因，这样我们就可以学到一些东西并改进问题。
我的猜测：缺乏投资。您拥有来自第三方教程的代码，并希望将其转换为非 jQuery 代码，但您没有对此进行投资（您没有向我们展示您自己尝试过这样做 - 无论您的 JavaScript 多么糟糕知识是）。我个人并不关心提问者在他们的问题上投入了多少——我只是喜欢回答与 JavaScript 相关的一般问题:)。但是，有些人会因为这个原因投反对票……

标签： jquery textarea watermark placeholder

【解决方案1】：

给你：

(function() {
    var clss= 'auto-hint',
        fields = document.getElementsByClassName(clss),
        field;

    for (var i = 0; i < fields.length; i++) {        
        field = fields[i];
        field.value = field.title;

        field.onfocus = function() {
            if (this.value === this.title) {
                this.value = '';
                this.className = '';
            }
        };

        field.onblur = function() {
            if (this.value === '') {
                this.value = this.title;
                this.className = clss;
            }
        };
    }
})();

现场演示： http://jsfiddle.net/pj5tG/

顺便说一句，HTML5 引入了placeholder 属性。它完成了完全相同的工作。但是，它在 IE 中不起作用（但它在 Firefox、Chrome、Safari 和 Opera 中起作用）。

<input type="text" placeholder="Name">

现场演示： http://jsfiddle.net/pj5tG/1/

【讨论】：

+1，但您确实掩盖了这个代码需要放在主体末尾的事实，因为它是在评估时执行的，而不是在 ready 上。
@josh 是的。良好的观察力。 :)
哇，它的代码比我想象的要少，并且删除了 jquery，我现在完全理解了，谢谢。只是一个小小的改进jsfiddle.net/E3H3g
顺便说一句，我确实偶然发现了“占位符”，但它不允许您对其进行调整。它的功能很方便，但是当您想很好地扩展它时，您已经编写了类似于您编写的代码的东西。
@Carl 匿名函数包装器（顺便说一句，它是一个 IIFE）用于范围目的。在我的代码中，三个变量——clss、fields、field——是局部变量。我使用 IIFE 来避免污染外部命名空间（可能是 DOMContentLoaded 处理程序命名空间，甚至是全局命名空间）。

【解决方案2】：

Jquery 很棒，如果你真的想要，你可以从他们的源代码 中删除代码。但是我不推荐，jquery对于js开发者来说是一个很棒的工具，而学习jquery本身就是一个你应该知道的技能。另外，我不知道 jquery 的许可证是什么，因此您可能无法仅分发/使用他们的部分代码。

【讨论】：

我不会破解 jQuery 库的某些部分——真的没有理由这样做，而且你很可能在这个过程中破坏某些东西。另外，jQuery 是dual MIT/GPL licensed。
你说得对，我的意思不是从字面上破解部分代码，而是看看他们是如何做到的，而不是重新发明轮子。
查看 jQuery 是如何做事的将比仅仅研究如何在 javascript 中做事更难弄清楚如何在 javascript 中做某事。 jQuery 是一个框架，真正的 javascript 部分会在道路尽头发生的事情将被埋在任何数量的其他层之后。如果您想弄清楚 jQuery 是如何工作的，一般来说，请务必查看代码。如果你想学习 javascript，那不是学习 javascript 的好方法。
你说这不是学习javascript的好方法，但你没有做他应该做的事情。指出他不应该做的事情而不说他应该做的事情并不是很有用的评论
@Jamietre 是正确的，我的答案不如应有的好，并且上面已经发布了更好的答案（Sime's）。我假设提问者想要删除 jquery 库的部分内容，而不是查找功能类似于他的 jquery 示例的代码。

【解决方案3】：

如果不使用 jQuery 或类似库，您也需要编写更多代码。特别是，您将不得不做更多的工作来找到由整洁的 CSS 选择器 INPUT.auto-hint, TEXTAREA.auto-hint 等表示的 DOM 元素。

要查找与上述选择器匹配的元素，您可能需要遍历文档中的所有input 元素——可以使用getElementsByTagName 方法找到。然后，您需要查看他们的className，如果找到匹配项，请使用getAttribute、setAttribute 等修改元素。之后，对所有 textarea 元素执行相同操作。

此时，您应该开始看到需要进行重构，提取基于类型和类定位元素的部分。此外，您现在应该重新考虑将 jQuery 添加到组合中；）

【讨论】：

我确切地知道你在说什么，但我还没有达到那个级别的 java 脚本知道如何让我自己使用框架。我遵循的准则之一是：如果您不能从头开始编写它，那么在您自己编写之前，您不得使用它。一种防止自己偷懒和作弊的方法。