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 & ".") %>-->