Udemyサイトレッスン5-Jquery

7512 ワード

概要

jQueryはブラウザにまたがるJavaScriptライブラリで、HTMLとJavaScriptの間の操作を簡略化しています.[1]ジョン・レシガー(John Resig)が2006年1月のBarCamp NYCで最初のバージョンをリリースした.現在はDave Methvinが率いる開発チームが開発している.世界トップ10,000のアクセスが最も高いサイトのうち、65%がjQueryを使用しており、現在最も人気のあるJavaScriptライブラリです.

jQueryバージョン

原版のコードは統一フォーマットがあり、体積が大きく、読みやすく、テスト、学習、開発に使用されています.

の簡略版のコードはフォーマットを削除し、ボリュームが小さく、パブリッシュに使用されます.

jQueryが呼び出されたかどうかを確認


    
    if(typeof jQuery != "undefined"){           /*jQuery     undefined，     jQuery */

        alert("jQuery has been installed!");

    }else{

        alert("jQuery has not found!");
    }

jQueryはjsの利点に比べて、より少ないコードを使用して同じまたはより多くの機能を実現します。









    $("div").click(function(){          //$         jQuery  ，   js    ，      onclick = function(){}  。

        alert("the div has been clicked!"); 
    });

テキストの追加







    $("#circle").click(function(){          //  circle,  p        

        $("p").html("hello");
    });

iframeリンクのURLを表示





<disable_script>

    $("#circle").hover(function(){          

        alert($("iframe").attr("src"));
    });

</disable_script>
</code></pre>  <br><h2>  jQuery  css  </h2>  <pre><code><div id="circle"/>

<div class="square"/>

<div class="square"/>

<disable_script>

    $("div").click(function(){          

        $(this).css("width","400px"); //         ，    。
        $(this).fadeToggle() ; //    
    });

</disable_script>
</code></pre>  <pre><code><p>this is some text.</p>

<button id="mybutton">fadeOut</button>

<button id="mybutton2">fadeIn</button>

<disable_script>

    $("#mybutton").click(function(){          

        $("p").fadeOut("slow",function(){

            alert("fade our completed!");
        }); //fadeout     ，  function  ，  alert
    });

    $("#mybutton2").click(function(){          

        $("p").fadeIn() ; 
    });

</disable_script>
</code></pre>  <br><h2>jQuery     </h2>  <pre><code><div id="circle"/>

<disable_script>

    $("#circle").click(function(){          

        $(this).animate(                //this         
            {width:"300px",
            height:"300px",
            borderRadius:"150px", //   CSS  ，  -，  Radius     
            marginTop:"50px",     //   CSS  ，  -，  Top       
            marginLeft:"50px"},   //   CSS  ，  -，  Left     
            1500
        ) ; 
    });

</disable_script>
</code></pre>  <br><h2>AJAX</h2>  <br>AJAXは「Asynchronous JavaScript and XML」(   JavaScriptとXML  )であり、  の  を  したブラウザ ウェブページ    を す.Ajaxの  はジェシー・ジェームズ・ジャレットによって  された[1].<br>  のWebアプリケーションでは、ユーザー がフォーム(form)に  することができ、フォームをコミットすると、Webサーバに  を  します.サーバは、  されたフォームを  して  し、 しいページに り しますが、  の2つのページのほとんどのHTMLコードが じであるため、 くの   を  します.アプリケーションのコミュニケーションのたびにサーバに  を  する  があるため、アプリケーションの    はサーバの    に  する.これにより、ユーザインタフェースの  がネイティブアプリケーションよりもずっと くなります.<br>これとは なり、AJAXアプリケーションは、サーバに して  なデータのみを  して  し、クライアントでJavaScriptを  してサーバからの  を  することができます.サーバとブラウザの で  されるデータが  に  したため、サーバの  が くなりました.  に, くの    が  を すクライアントマシン で  するため,Webサーバの  も  する.<br>DHTMLまたはLAMPと  に、AJAXは  の  ではなく、  の    を   に  している.  にはXMLが まれているが,  にはデータフォーマットをJSONに き え,さらにデータ を らし,いわゆるAJAJを  することができる.クライアントとサーバも   である  はありません.AJAXベースの「  /  」 (derivative/composite)の  も  している.<pre><code><h1>Asyncronous JavaScript And XML</h2>

<disable_script>

    $.get("test.html",function(data){   //jQuery  ，  test.html   ，        
        alert(data);

    })

    $.ajax({                          //  ajax  ,          ，  http   ，   file      。
        url:"test.html"
    }).done(function(data){
        alert(data);
        $("h1").html(data);         //  h1  
        $("h1").append(data);       //  h1  
    })

</disable_script>
</code></pre>  <br><h2>     </h2>  <pre><code><disable_script>

    var regex = /great/i;            //     ，    great，     null ,   i      ,   g(global)            

    var string = "reges is Great!";

    var result = string.match(regex);

    alert(result);

</disable_script>
</code></pre>  <br><h2>       </h2>  <pre><code>

    <title>alan's website</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <disable_script type="text/javascript" src="jquery-3.3.1.min.js">

    </disable_script>

    <style>

        #wrapper {
            width: 500px;    
            margin: auto;
            margin-top: 20px;
            font-family:"Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;

        }

        input {
            width: 300px;
            height: 40px;
            padding-left: 8px;
            border-radius: 6px;
            font-size: 1.1em;
            border: 1px solid gray;
            margin-top: 10px;
            
        }

        label {
            
            width: 200px;
            float: left;
            padding-top: 18px;
            font-size: 1.2em;
        }
        
        #submit {

            width: 80px;
            height: 30px;
            margin-left: 330px;
            margin-top: 15px;

        }

        #error{

            color:red;
        }

    </style>






    <div id="wrapper">
        <p id="error"/>

        <form id="validationForm">                                   <!--   form           submit  -->

            <label for="email">Email</label>

            <input name="email" id="email"/>   <!--     name                -->

            <label for="telephone">Telephone</label>

            <input name="telephone" id="telephone"/>

            <label for="password1">password</label>

            <input name="password1" id="password1" type="password"/>         <!--type password  ，            -->

            <label for="password2">confirm password</label>

            <input name="password2" id="password2" type="password"/>   

            <input id="submit" type="submit" value="submit"/>

        </form>  

        <disable_script>

            $("#validationForm").submit(function(event){
                var errormessage = "";
                event.preventDefault();               //    ，         

                function isEmail(email) {
                    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                    return regex.test(email);
                }
                
                if(!isEmail($("#email").val())){

                    errormessage =  "the email address is not valid&lt;br /&gt;"
                }
                if(!$.isNumeric($("#telephone").val())){
                    errormessage +=  "the telephone number is not valid&lt;br /&gt;"

                }
                if($("#password1").val()!=$("#password2").val()){
                    errormessage +=  "please enter matching password&lt;br /&gt;"
                }
                $("#error").html(errormessage);

                if(errormessage==""){
                    alert("success!");
                }
                
            });
        
        </disable_script>
    </div>


</code></pre>

javascriptでDOMの一部を差し替える

自動AppleScriptまたはどのように以下の気が散る