jqueryコードを普通/普通のjavascriptに変換するヘルプ

-1

これを変換する目的はjqueryなしでどのように行われるかを知ることができるためです。jqueryコードを普通/普通のjavascriptに変換するヘルプ

<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. [email protected]" class="auto-hint" /> 
</form> 
</body> 
</html>

私はここで、このコードを見つけました： Html placeholder text in a textarea form

出典

2011-03-27 Carl Serl

jQueryのコードは（ちょうどレコードの）悪い品質であること。 –

知っておいてよかったです、それに悪いのは何ですか？このコードはチュートリアルのものです（上のリンクを参照してください）。 –

1.同じ検索 - $（ 'INPUT.auto-hint、TEXTAREA.auto-hint'） ' - は2. 'this.value'と' this.title'は、 '$（this）.val（）'と '$（this）.attr"より速くて読みやすくなっています。（ 'title'） '3.型セレクタの規約は小文字（' INPUT'の代わりに 'input'）です。4.通常の比較は空の文字列（' x == '' ' ） - オペランドの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/

出典

2011-03-27 19:40:47

+1しかし、このコードは、 '' ready'（http://docs.jquery.com/Tutorials）ではなく、評価時に実行されるため、このコードを本体の最後に配置する必要があるという点で、：紹介％24％28文書％29.ready％28％29）。 – josh3736

@josh真。良い観察。 '：）' –

うわー、それは私が思っていたよりも少ないコードだったし、jqueryを削除すると、今は完全に理解してくれて、ありがとう。ほんの少しの改善http://jsfiddle.net/E3H3g/ –

をjQueryの素晴らしいです、あなたが本当にしたい場合は、そのソース外のコードを切ることができます。しかし、私はそれをお勧めしませんが、jqueryはjs開発者のための素晴らしいツールであり、jquery自体を学ぶことは知っておくべきスキルです。また、私はjqueryのライセンスが何であるかわからないので、コードの一部のみを配布/使用することはできません。

出典

2011-03-27 19:22:43 Ben

jQueryライブラリの一部をハックしません。本当に理由はありませんし、その過程で何かを壊す可能性が非常に高いです。また、jQueryは[dual MIT/GPL licensed]（http://jquery.org/license）です。 – josh3736

あなたは正しいのですが、私は文字通りコードの一部をハックすることを意味するのではなく、ホイールを再改造するのではなく、どうやってそれをしたのかを見ることです。 – Ben

jQueryがどのように機能するかを見ると、javascriptで行う方法を調べるよりも、javascriptで何かを行う方法を見つけるのがずっと難しくなります。 jQueryはフレームワークであり、道路の終わりに起こるjavascriptの実際のビットは、任意の数の他のレイヤーの後ろに埋もれてしまいます。 jQueryの仕組みを理解したい場合は、一般的にコードを確認してください。もしあなたがjavascriptを学びたいなら、それはjavascriptを学ぶ素晴らしい方法ではありません。 –

jQueryなどのライブラリを使用せずに同じコードを実行すると、コードをもっと書く必要があります。特に、すっきりしたCSSセレクタによって表現されるDOM要素を見つけるためにはるかに多くの作業をしなければならないでしょう。INPUT.auto-hint, TEXTAREA.auto-hintなど

上記のセレクタに一致する要素を見つけるには、おそらくすべてのinput要素をドキュメント - getElementsByTagNameメソッドを使用して見つけることができます。次に、classNameを調べ、一致するものが見つかった場合はgetAttribute、setAttributeなどを使用して要素を修正します。その後、すべてのtextarea要素について同じ操作を行います。

この時点で、タイプとクラスに基づいて要素を配置する部分を抽出して、リファクタリングの必要性が見えるようになります。また、あなたは今、ミックスにはjQueryを追加再考する必要があります。）

出典

2011-03-27 19:29:42

私はあなたが話していることを正確に知っていますが、私はまだそのレベルのJavaスクリプトに到達していないので、自分のフレームワークを使用する方法を知っています。私が従うガイドラインの1つは、あなたが最初から書くことができない場合は、それを自分で書くことができるまで使用することができないということです。私が怠け者であり、不正行為をするのを防ぐ方法。 –

jqueryコードを普通/普通のjavascriptに変換するヘルプ

答えて

関連する問題