Java Script with JQuery How Java Script fits
- Slides: 25
Java. Script with JQuery
How Java. Script fits into the client/server architecture
The j. Query website at j. Query. com
What j. Query offers Dozens of methods that make it easier to add Java. Script features to your web pages Methods that are tested for cross-browser compatibility
How to include j. Query files in a web page How to include the j. Query file from your computer <script src="jquery-3. 2. 1. js"></script> How to include j. Query from a CDN <script src="http: //code. jquery. com/jquery-3. 2. 1. min. js"> </script>
How to code j. Query selectors By element type $("h 2") By id $("#email_address") By class attribute $(". warning")
How to call j. Query methods How to get the value from a text box var email. Address = $("#email_address"). val(); How to set the text in an element $("#email_address_error"). text( "Email address is required"); How to set the text for the next sibling $("#email_address"). next(). text( "Email address is required");
How to code j. Query event methods How to code the ready event method $(document). ready(function() { alert("The DOM is ready"); }); How to code the click event method for all h 2 elements $("h 2"). click(function() { alert("This heading has been clicked"); }); How to use the click event method within the ready event method $(document). ready(function() { $("h 2"). click(function() { alert("This heading has been clicked"); }); // end of click event handler }); // end of ready event handler
The Email List application using j. Query
The HTML for the Email List with j. Query app <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Join Email List</title> <link rel="stylesheet" href="email_list. css"> <script src="http: //code. jquery. com/jquery-3. 2. 1. min. js"> </script> <script src="email_list. js"></script> </head> <body> <main> <h 1>Please join our email list</h 1> <form id="email_form" name="email_form" action="join. php" method="get"> <label for="email_address 1"> Email Address: </label> <input type="text" id="email_address 1" name="email_address 1"> <span>*</span>
The HTML for the Email List j. Query app (cont. ) <label for="email_address 2"> Re-enter Email Address: </label> <input type="text" id="email_address 2" name="email_address 2"> <span>*</span> <label for="first_name">First Name: </label> <input type="text" id="first_name" name="first_name"> <span>*</span> <label> </label> <input type="button" id="join_list" value="Join our List"> </form> </main> </body> </html>
The j. Query for the Email List application $(document). ready(function() { $("#join_list"). click(function() { var email. Address 1 = $("#email_address 1"). val(); var email. Address 2 = $("#email_address 2"). val(); var is. Valid = true; // validate the first email address if (email. Address 1 == "") { $("#email_address 1"). next(). text( "This field is required. "); is. Valid = false; } else { $("#email_address 1"). next(). text(""); }
The j. Query for the Email List app (continued) // validate the second email address if (email. Address 2 == "") { $("#email_address 2"). next(). text( "This field is required. "); is. Valid = false; } else if (email. Address 1 != email. Address 2) { $("#email_address 2"). next(). text( "This entry must equal first entry. "); is. Valid = false; } else { $("#email_address 2"). next(). text(""); }
The Email List j. Query (continued) // validate the first name entry if ($("#first_name"). val() == "") { $("#first_name"). next(). text( "This field is required. "); is. Valid = false; } else { $("#first_name"). next(). text(""); } // submit the form if all entries are valid if (is. Valid) { $("#email_form"). submit(); } }); // end click }); // end ready
The user interface for the Image Swap application
The script elements for the image swap <script src="jquery-3. 2. 1. min. js"></script> <script src="image_swaps. js"></script>
The HTML for the images <main> <h 1>Ram Tap Combined Test</h 1> <ul id="image_list"> <li><a href="images/h 1. jpg" title="James Allison: 1 -1"> <img src="thumbnails/t 1. jpg" alt=""></a></li> <li><a href="images/h 2. jpg" title="James Allison: 1 -2"> <img src="thumbnails/t 2. jpg" alt=""></a></li>. . . <li><a href="images/h 6. jpg" title="James Allison: 1 -6"> <img src="thumbnails/t 6. jpg" alt=""></a></li> </ul> <h 2 id="caption">James Allison 1 -1</h 2> <p><img src="images/h 1. jpg" alt="" id="image"></p> </main>
The CSS for the li elements li {padding-right: 10 px; display: inline; }
A Slide Show application with fading out and in
The script elements for the slide show <script src="jquery-3. 2. 1. min. js"></script> <script src="slide_show. js"></script>
The HTML for the slide show <section> <h 1>Fishing Slide Show</h 1> <h 2 id="caption">Casting on the Upper Kings</h 2> <img id="slide" src="images/casting 1. jpg" alt=""> <div id="slides"> <img src="images/casting 1. jpg" alt="Casting on the Upper Kings"> <img src="images/casting 2. jpg" alt="Casting on the Lower Kings"> <img src="images/catchrelease. jpg" alt="Catch and Release on the Big Horn"> <img src="images/fish. jpg" alt="Catching on the South Fork"> <img src="images/lures. jpg" alt="The Lures for Catching"> </div> </section>
The critical CSS for the slide show #slides img { display: none; }
Zak’s recommendations for Java. Script websites Dynamic Drive The Java. Script Source Two types of j. Query components that you can add to your website j. Query plugins j. Query UI widgets
A j. Query plugin for a carousel called bx. Slider
j. Query UI widgets for tabs and accordions
Workflow jquery
Jquery optimization selectors
Jquery selectors tutorial
Parallax transition
Prepend jquery
Jquery mobile
J
Jquery functionality
Xml to json jquery
Jquery sqlite example
Security that fits everywhere
The equation y=12.21x+37.42 fits the scatter plot
Judicial branch clip art
Rit uid
Limits fits and tolerances
Types of fit
Practice 11-1 tangent lines
Which fits best in the empty box above?
Inductive and analytical learning problem
Chapter 11 circles
Limit fit tolerance
Maximum clearance between hole and shaft
What does structure fits function mean
Strange fits of passion have i known
A belt fits tightly around two pulleys
50h8 tolerance
