6. jQuery¶
For detailed JavaScript tutorials, and as a great reference, see W3Schools jQuery section.
To get really good with jQuery, go over the W3Schools jQuery Tutorial, jQuery Effects for visual, and more!
Let’s start with a web page test_javascript.html
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>This is a document in which to test JavaScript</title> </head> <body> <h1>This is a document in which to test jQuery</h1> <p>Hi, this is a jQuery test document.</p> <p>Scripts should be loaded right before the closing body tag for the best performance.</p> <form> <label for="myTextField">Input Field: </label> <input type="text" name="myTextField" id="myTextField" value="defaultValue"><br /> <input type="button" name="button1" id="button1" value="button1"><br /> </form> <p>Put name in field and click button to add to table.</p> <table id="tableName"> <thead> <tr> <th>Name</th> </tr> </thead> <tbody> <tr></tr> </tbody> </table> <form> <h2 id="hideme">Hide Me</h2> <input type="button" name="button2" id="button2" value="button2"><br /> </form> <form> <p>Enter only upper and lower case letters below. From 1 to 10 characters.</p> <label for="validateMe">Validate this: </label> <input type="text" name="validateMe" id="validateMe" value=""><br /> <p id="result">Press to Validate</p> <input type="button" name="button3" id="button3" value="Validate"><br /> </form> <form> <p>Create a JSON formatted string based on a form entry.<br /> <label for="myName">Name: </label> <input type="text" name="myName" id="myName" value=""><br /> <p id="jsonResult">Press to JSON'ify</p> <input type="button" name="button4" id="button4" value="Validate"><br /> </form> <!-- jQuery. Search up CDn and jQuery for a link. --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="test_javascript.js"></script> </body> </html> |
In the same directory, create your JavaScript file test_javascript.js
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | /* * A few jQuery examples */ // Grab a list of all tags that match (jQuery selector) // The $ is actually a function name! Wacky, but legal. let paragraphs = $("p"); // See: http://www.w3schools.com/jquery/jquery_ref_selectors.asp // to get an idea of how we can have a lot of powerful selectors. // How many tags match? Use the array 'length' attribute. console.log("There are " + paragraphs.length + " paragraphs in this page."); // Print the text in each one. // jQuery items have a 'textContent' attribute for(let i = 0; i < paragraphs.length; i++) { let paragraphText = paragraphs[i].textContent; console.log(paragraphText); } // -- Add a row to the table based on a form field // Create a function to add a row to the table function myUpdateFunction(event) { // Grab field with id=myTextField and get teh value out of the form field // using the val() function: let fieldValue = $('#myTextField').val(); // Select the tbody in a table with id=tableName // Append to that tbody the following html (a row) $("#tableName tbody").append("<tr><td>"+fieldValue+"</td></tr>"); // Log for debuf info console.log(fieldValue); } // Attach an the function to a button click. This is a callback. Will run when // we click. let formButton1 = $('#button1'); formButton1.on("click", myUpdateFunction); // -- How to hide an item based on a button click // Create a function to hide an item function hideFunction(event) { $("#hideme").hide(500); } // Attach an action to a button click let formButton2 = $('#button2'); formButton2.on("click", hideFunction); // -- How to validate an item // Function to validate function validateFunction(event) { // Get the field let v1 = $('#validateMe').val(); // Create the regular expression let reg = /^[A-Za-z]{1,10}$/; // Test the regular expression to see if there is a match if (reg.test(v1)) { $('#result').text("Ok"); } else { $('#result').text("Bad"); }} // Attach an action to a button click let formButton3 = $('#button3'); formButton3.on("click", validateFunction); // -- JSON'ify a form // We'll use this a lot to interact with the back-end // Create function to JSON'ify function jsonFunction(event) { // Create an empty object let formObject = {}; // Set a field in the object to the value in this form field formObject.myName = $('#myName').val(); // Build the JSON string based on that object's fields let jsonString = JSON.stringify(formObject); // Set a field to the JSON result so we can see it. $('#jsonResult').text(jsonString); } // Attach an action to a button click let formButton4 = $('#button4'); formButton4.on("click", jsonFunction); |