先端の新人として、jQueryを学ばないでください.

4820 ワード
JavaScript デザインモード
目次
1、なぜjQueryを学ぶのか
2、jQueryのパッケージ思想
2、jQueryはどのように要素を取得するか
3、jQueryのチェーン操作
4、jQueryはどのように要素を作成するか
5、jQueryはどのように要素を移動するか
what ?Are you kidding me?弟さん、今2020年ですが、まだjQueryを勉強していますか.バカじゃないの?
確かに、今は先端業界に就職したい新人はほとんどjQueryを勉強していません.みんなは基本的にVeeとReactを勉強していますが、私はどうしてこのブログを書くのですか.
1、なぜjQueryを学ぶのか
初めてjQueryに触れたのは2年前の4年生だったことを思い出します.当時の私はフロントエンドという道を考えていましたが、どこからかフロントエンドの学習路線図を手に入れました.HTML+CSS+JavaScriptから入門し、jQueryを独学したことがあります.当時はまだVue(フロントエンドに触れたばかりで、寡聞だったかもしれません)を聞いたことがありません.
当時、本やネット上の資料に従ってjQueryを一度知りましたが、今ではjQueryの$起手式、もう一つのチェーン操作しか覚えていません.残りは忘れてしまいました.今の時間から見ると、人気のあるフロントエンドフレームワークはVueとReactで、jQueryはもう時代遅れだから、jQueryを学ぶ必要はないと思っている人が多いかもしれません.
jQueryが時代遅れだとは言わないで、まず一つの事実を理解して、その年のjQueryがどれだけ怒っているかを見てみましょう.
jQueryは2006年に発表され、今では14年になりました.先端業界以来、数千万の先端のフレームワークとライブラリを持っています.誰が比べることができますか.VueとReactの2つの比較的新しいフレームワークも5、6年にすぎません.何年も暑くなることができるのは未知数です.この点から見ると、jQueryはかなり優秀な点があるに違いありません.
次にjQueryが世界で広く使われているのも、他のどのフレームワークとは比べものにならないほどで、世界の80%前後のサイトがjQueryを使っています.ほらを吹いていますか?信じられないならcomで見てみると、2020年、世界トップ10000のサイトのうち、8000+のサイトがjQueryを使用しています.前年同期比Vueは1000未満だった.
しかし、jQueryは確かに時代遅れだと言わざるを得ない.時代遅れの原因は、それ自体が悪いからではなく、フロントエンドがDOMをあまり操作していないからだ.
以上のように、jQueryは極めて古典的で、今まで生きてきたのはきっとその優秀なところがあるに違いない.jQueryの勉強を排斥しないで、思想を理解してもいい.
jQueryについて初歩的な理解がある以上、jQueryのパッケージ思想と関連APIと基本的な使用を見てみましょう.チェン一峰:jQuery設計思想
2、jQueryのパッケージ思想
jQueryは極めて簡単で、この言葉はVueとReactに対して言えます.jQueryのソースコードはパッケージされたJavaScriptのオリジナルdom APIであり、VueとReactはdomの操作を推奨しない.MVVMの思想に基づいており、その下位ソースコードはjQueryより複雑であるに違いない.
jQueryのパッケージ思想を少し理解すれば、jQueryのソースコードがどれだけ簡単なのか、その思想が多精髄であることがわかります.例えばjQueryのチェーン操作はどうやってできますか?
$('#div').addClass('red').addClass('blue');    //    

window.$ = window.jQuery = function(selector){    //jQuery     
    let nodes = document.querySelctorAll(selector);
    
    return {    //  ，                 
        adClass:function(className){
            for (let i=0;i

jQueryの他の関連APIもこのようにカプセル化されていますが、上記のようにjQueryのカプセル化は簡単ですか?実際に用いられる閉パケットは,カプセル化されたAPIを呼び出すたびにそのメソッドを呼び出すオブジェクトを返すことでチェーンプログラミングを実現する.
jQueryの他の方法のパッケージはここでは書かないで、後で完全なドキュメントを出すつもりで、更新があればここにリンクを添付します.
2、jQueryはどのように要素を取得するか
jQueryを使用する前に、プロジェクトに導入することに注意してください.BootCDNで探したり、jQueryの公式サイトで探したりすることができます.

jQueryの な と な い は、「あるページ を し、それを らかの を う」ことです.これは、 のJavascriptライブラリとは なる な です.jQueryを する のステップは、 jQuery()( $)に を し、 された を ることです.
$(document)            //        
$('#myId')             //  ID myId     
$('div.myClass')       //   class myClass div  
$('input[name=first]') //   name    first input  

//    jQuery      ：
$('a:first')         //        a  
$('tr:odd')          //        
$('#myForm :input')  //       input  
$('div:visible')     //     div  
$('div:gt(2)')       //      div  ，     
$('div:animated')    //            div

3、jQueryのチェーン
jQueryの な の つは、 にページ を した 、それを の を うことができ、すべての を することができ、チェーンの で くことができます. えば:
$('div').find('h3').eq(2).html('Hello');

これはjQueryの も され、 も な です.その は、 ステップのjQuery であり、 されるのはjQueryオブジェクトであるため、 なる を することができる.
jQueryはまた した.end()メソッドは、 セットを させることができます.
$('div').find('h3').html('Hello').end() //        h3      
    .html('World'); //       World

4、jQueryはどのように を するか
よくあるのは、このノードの をHTMLタグ で することです.
$("
")

テキストノードとして されます. ノードの と に、テキストの を できます.
$("
      
")

ノードとして 、 ノードの と じ 
$("
      
")

jQueryによる コードの 
$("
    DIV    
")

これがjQueryがノードを する ですが、 に された は にメモリに され、 にはページドキュメントに して する があります.ここでは に しています.よく られるのは、この しく された をページのある のサブ としてその に し、append()とappendTo()です.
5、jQueryはどのように を するか
jQueryは、2つの を し、 のウェブページ の を します.1つの は、 を することであり、もう1つの は、ターゲット が の に するように の を することである.div を した 、p の ろに する があります.
1の は することである.InsertAfter()は、div をp の ろに します.
$('div').insertAfter($('p'));

2の は することである.after()は、div の にp を します.
$('p').after($('div'));

には,この2つの の は じであり, の いは の いにすぎないようだ.しかし、 には、 される が なるという きな いがあります. 1の はdiv を し、 2の はp を す. に じて、どの を うかを ぶことができます.
このモードを した は、 で4 あります.
.insertAfter() .after()：        ，       

.insertBefore() .before()：        ，       

.appendTo() .append()：        ，       

.prependTo() .prepend()：        ，
vue mockデータ
vue知識点整理——ルーティング(vue-router)