JQuery 1征服(Library、JQuery、JavaScriptと比較)

27517 ワード
2回目のクエリ library JavaScript JavaScript jquery JavaScript Jクエリーの比較 テキストリンク
去年javascriptで少し勉強して、少し練習したjQueryをもう一度掘り起こしたいです.この文章は本当にAから始まる.ほとんど基礎がないからだ.🐥
まずは秘訣...あまりにも雄大に見えるので...学習方法を紹介し、筆者は公式文書を重視している.コーディングの最も重要な言語は英語(これは私たちの教授がよく言う言葉)だと言われています.正式な書類を読むためか、英語で構成された書類を読むためです.TMIなのですが、パソコンを勉強している間はよくGoogleゲームをしていて、英語の本をたくさん読んでいたので、結局英語も勉強せず、TOEIC点数が上がってしまいました(?)
しかし、決して正式な書類で勉強を始めることはありません.勉強を始めるには、まず勉強しなければならないことが何なのかを見つけなければなりません.正式な書類の硬い英語の説明では理解できません.
だから私は必ずYouTubeで検索して、いくつかのビデオを見て、それから勉強を始めなければなりません.これは予習です.良いカリキュラムシリーズがあれば、それを中心に勉強し、なければ、プラットフォームや言語がトレンドであり、いつ優位に立って、現在の業界でどのように使用されているかを知っておく必要があります.後で公式文書を見て、私がどのように勉強に使うかを考えることができます.
ネットワーク応用分野の傾向の変化が速すぎるため,事前調査が必要である.時代遅れのことを勉強してはいけません.
そういう意味で、JQueryについて面白い文章を書きたいと思います.
https://www.samsungsds.com/kr/insights/jQuery.html
YouTubeで一番好きな人は🧑🏻‍💻生活コード🧑🏻‍💻あなたです.彼の講義をもとに堅固な基礎を築き、私のプロジェクトに直接使用した.それからプロジェクトを行い、辞書のように正式な書類を開けて、お腹を満たします.
調べてみると、生活コードさんがJQueryレッスンを受けていました.8年前...!
今日はその夜更かしを見ていました.🌕! 🌞!
ライブラリとは?(library)
常用コードを再利用可能な形式に加工することでプログラミング効率を向上させるコード.
jQueryって何?
JavaScriptライブラリは、強力なエンティティの選択方法と、選択したエンティティを制御する方法を提供します.
Helloworld-最初のjQuery
🌞 使用方法
  • ダイレクトサービス
    https://jquery.com/download/からjqueryソースコードをダウンロードします.
    上のファイルをサーバにアップロードし、javascriptをWebページに挿入します.
  • GoogleのJavaScriptライブラリを使用
    https://developers.google.com/speed/libraries#jquery 
    • <html>
     <body>
         <div class="welcome"></div>
         <div class="welcome"></div>
         <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
         <script type="text/javascript">
                 $('.welcome').html('hello world! coding everybody!').css('background-color','yellow');
         </script>
     </body>
 </html>
    JavaScriptとjQueryの比較
    タブをクリックしてフォーカスを変更する例
    👀 JavaScript
    <html>
    <head>
        <script type="text/javascript">
            function addEvent(target, eventType,eventHandler, useCapture) {
                if (target.addEventListener) { // W3C DOM
                    target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
                } else if (target.attachEvent) {  // IE DOM
                    var r = target.attachEvent("on"+eventType, eventHandler);
                }
            }
 
     
            function clickHandler(event) {
                var nav = document.getElementById('navigation');
                for(var i = 0; i < nav.childNodes.length; i++) {
                    var child = nav.childNodes[i];
                    if(child.nodeType==3)
                        continue;
                    child.className = '';
                }
                event.target.className = 'selected';
            }
  
            addEvent(window, 'load', function(eventObj) {
                var nav = document.getElementById('navigation');
                for(var i = 0; i < nav.childNodes.length; i++) {
                    var child = nav.childNodes[i];
                    if(child.nodeType==3)
                        continue;
                    addEvent(child, 'click', clickHandler);
                }
            })
        </script>
        <style type="text/css">
            #navigation li {
                list-style:none;
                float:left;
                padding:5px;
            }
            #navigation {
                cursor:pointer;
            }
            #navigation .selected {
                background-color:red;
                color:white;
            }
        </style>
    </head>
    <body>
        <ul id="navigation">
            <li>HTML</li>
            <li>CSS</li>
            <li>javascript</li>
            <li class="selected">jQuery</li>
            <li>PHP</li>
            <li>mysql</li>
        </ul>
    </body>
</html>
    🕵🏻‍♀️ jQuery
    <html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            $('#navigation li').live('click', function() {
                $('#navigation li').removeClass('selected');
                $(this).addClass('selected');
            })
        </script>
        <style type="text/css">
            #navigation li {
                list-style:none;
                float:left;
                padding:5px;
            }
            #navigation {
                cursor:pointer;
            }
            #navigation .selected {
                background-color:red;
                color:white;
            }
        </style>
    </head>
    <body>
        <ul id="navigation">
            <li>HTML</li>
            <li>CSS</li>
            <li>javascript</li>
            <li class="selected">jQuery</li>
            <li>PHP</li>
            <li>mysql</li>
        </ul>
    </body>
</html>
    バッチダウンロードのための画像のスクレーピング
    OCP -オープンクローズド原理