JQuery

JQuery

 

 

JQuery

  • The $(document).ready() method allows us to execute a function when the document is fully loaded. 
  • $(selector).action()
  • all property names must be camel-cased when used with the animate() method  ex: paddingLeft instead of padding-left, marginRight instead of margin-right.
  • A callback function is executed after the current effect is finished.    ex:$(selector).hide(speed,callback);
  • The callback function has two parameters: the index of the current element in the list of elements selected and the original (old) attribute value
  • append()
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    function appendText() {
        var txt1 = "<p>Text.</p>";              // Create text with HTML
        var txt2 = $("<p></p>").text("Text.");  // Create text with jQuery
        var txt3 = document.createElement("p");
        txt3.innerHTML = "Text.";               // Create text with DOM
        $("body").append(txt1, txt2, txt3);     // Append new elements
    }
    </script>
    </head>
    <body>
    
    <p>This is a paragraph.</p>
    <button onclick="appendText()">Append text</button>
    
    </body>
    </html>

     

  • The filter() method lets you specify a criteria.
  •  the load() method's the callback function can have different parameters:

  • responseTxt - contains the resulting content if the call succeeds
  • statusTxt - contains the status of the call
  • xhr - contains the XMLHttpRequest object
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
                if(statusTxt == "success")
                    alert("External content loaded successfully!");
                if(statusTxt == "error")
                    alert("Error: " + xhr.status + ": " + xhr.statusText);
            });
        });
    });
    </script>
    </head>
    <body>
    
    <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
    
    <button>Get External Content</button>
    
    </body>
    </html>
  • $.get(URL,callback);
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $.get("demo_test.asp", function(data, status){
                alert("Data: " + data + "\nStatus: " + status);
            });
        });
    });
    </script>
    </head>
    <body>
    
    <button>Send an HTTP GET request to a page and get the result back</button>
    
    </body>
    </html>
    

     

  •  $.post(URL,data,callback);
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $.post("demo_test_post.asp",
            {
              name: "Donald Duck",
              city: "Duckburg"
            },
            function(data,status){
                alert("Data: " + data + "\nStatus: " + status);
            });
        });
    });
    </script>
    </head>
    <body>
    
    <button>Send an HTTP POST request to a page and get the result back</button>
    
    </body>
    </html>
    
    
    //////////////("demo_test_post.asp")////////////////////////
    <!-- <%
    dim fname,city
    fname=Request.Form("name")
    city=Request.Form("city")
    Response.Write("Dear " & fname & ". ")
    Response.Write("Hope you live well in " & city & ".")
    %>-->