Fatal编程技术网
  • jquery/
  • 帮助将jquery代码转换为普通/普通javascript

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

jquery

帮助将jquery代码转换为普通/普通javascript,jquery,textarea,watermark,placeholder,Jquery,Textarea,Watermark,Placeholder,转换它的目的是让我能够了解如何在没有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

转换它的目的是让我能够了解如何在没有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>


$（文档）.ready（函数（）{
//聚焦自动聚焦字段
$（'.auto-focus:first'）.focus（）；
//初始化自动提示字段
$（'INPUT.auto-hint，TEXTAREA.auto-hint'）.focus（函数（）{
if（$（this.val（）==$（this.attr（'title'））{
$（this.val（“”）；
$（this.removeClass（'auto-hint'）；
}
});
$（'INPUT.auto-hint，TEXTAREA.auto-hint'）.blur（函数（）{
if（$（this.val（）=''&$（this.attr（'title'）！=''）{
$（this.val（$（this.attr（'title'））；
$（this.addClass（'auto-hint'）；
}
});
$（'INPUT.auto-hint，TEXTAREA.auto-hint'）。每个（函数（）{
if（$（this.attr（'title'）=''）{return；}
if（$（this.val（）=''）{$（this.val（$（this.attr（'title'））；}
else{$（this.removeClass（'auto-hint'）；}
});
});
电邮：
我在这里找到了这个代码：

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

如果不使用jquery或类似的库，您将需要编写更多的代码。特别是，您需要做更多的工作来查找由整洁的CSS selecors
INPUT.auto-hint、TEXTAREA.auto-hint
等表示的DOM元素

要查找与上述选择器匹配的元素，您可能需要循环文档中的所有
input
元素–可以使用该方法找到这些元素。然后，您需要查看它们的属性，如果找到匹配项，则使用等来修改元素。然后，对所有
textarea
元素执行相同的操作

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

给你：

(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;
            }
        };
    }
})();
现场演示：

jQuery代码质量不好（只是为了记录在案）。很高兴知道，到底是什么不好？这段代码来自一个教程，请参阅上面的链接，所以如果它教给人们错误的东西，那就不好了）1。相同的查找-
$（'INPUT.auto-hint，TEXTAREA.auto-hint'）
-在一行中执行三次，而不仅仅是链接，2
this.value
和
this.title
比
$（this）.val（）
和
$（this）.attr（'title'）
，3更快，可读性更强。类型选择器的约定是小写（
input
，而不是
input
），4。常规比较是在一个操作数为空字符串（
x=''
）的情况下进行的-如果其中一个操作数的值不正确，则不应执行常规比较。相反，应该使用严格的比较。是的，我担心这篇教程教的是坏习惯。顺便问一句，为什么投反对票？是什么让这个问题变得更好？当否决投票时，最好说出原因，这样我们可以学到一些东西并改进问题。我猜：缺乏投资。您从第三方教程中获得了这段代码，并希望将其转换为非jQuery代码，但您并没有在这方面进行投资（您还没有向我们展示您自己尝试过这样做——不管您的JavaScript知识有多差）。我个人并不关心提问者在他们的问题上投入了多少——我只是一般地回答与JavaScript相关的问题
：）
。然而，有些人会因为这个原因投票反对……我不会删掉jQuery库的部分内容——实际上没有理由这样做，而且在这个过程中，您很可能会破坏某些东西。另外，jQuery是。你是对的，我的意思并不是要从字面上删去部分代码，而是要看看他们是如何做到的，而不是重新发明轮子。看看jQuery是如何做到的，这将是一种更难理解如何用javascript做事情的方法，而不仅仅是研究如何用javascript做事情。jQuery是一个框架，实际的javascript代码将被隐藏在任意数量的其他层后面。如果您想了解jQuery是如何工作的，一般来说，请务必查看代码。如果你想学习javascript，那不是学习javascript的好方法。你说这不是学习javascript的好方法，但你不知道他应该做什么。指出他不应该做什么，但不说他应该做什么，这是没有用的comment@Jamietre是正确的，我的答案并没有它应该的那么好，上面已经贴出了一个更好的答案（Sime's）。我假设询问者想删掉jquery库的一部分，而不是查找与他的jquery示例功能类似的代码。+1，但您确实掩盖了这样一个事实，即此代码需要放在正文的末尾，因为它是在求值时执行的，而不是打开时执行的。@josh True。很好的观察<代码>：）哇，代码比我想象的要少，删除jquery后，我现在完全理解了，谢谢。顺便说一句，这只是一个小小的改进，我偶然发现了“占位符”，但它不允许你调整它。它的功能很方便，但如果您想扩展它，那么您就必须编写类似于您编写的代码的内容。@Carl匿名函数包装器（它是一个IIFE，顺便说一句）用于范围目的。在我的代码中，三个变量——CLS、fields、field——都是局部变量。我使用IIFE来避免污染外部名称空间（可能是DOMContentLoaded处理程序名称空间，甚至是全局名称空间） 
<input type="text" placeholder="Name">