Download presentation
Presentation is loading. Please wait.
1
Introduction to jQuery
2
WHY? The purpose of jQuery is to make it much easier to use JavaScript on your website. There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable. Many of the biggest companies on the Web use jQuery, such as: Google Microsoft IBM Netflix
3
What You Should Already Know
HTML CSS JavaScript
4
What is jQuery? jQuery is a lightweight, "write less, do more", JavaScript library. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
5
What is jQuery? The jQuery library contains the following features:
HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX Utilities Tip: In addition, jQuery has plugins for almost any task out there.
6
jQuery Get Started Adding jQuery to Your Web Pages
There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com Include jQuery from a CDN, like Google
7
Downloading jQuery There are two versions of jQuery available for downloading: Production version - this is for your live website because it has been minified and compressed Development version - this is for testing and development (uncompressed and readable code) Both versions can be downloaded from jQuery.com. <head> <script src="jquery min.js"></script> </head>
8
jQuery CDN (Content Delivery Network)
Both Google and Microsoft host jQuery. To use jQuery from Google or Microsoft, use one of the following: Google CDN: <head> <script src=" </head> Microsoft CDN: <head> <script src=" </head>
9
jQuery Syntax The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).action() A $ sign to define/access jQuery A (selector) to "query (or find)" HTML elements A jQuery action() to be performed on the element(s) Examples: $(this).hide() - hides the current element. $("p").hide() - hides all <p> elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test".
10
The Document Ready Event
$(document).ready(function(){ // jQuery methods go here... });
11
jQuery Selectors jQuery selectors allow you to select and manipulate HTML element(s) The element Selector The jQuery element selector selects elements based on the element name. You can select all <p> elements on a page like this: $("p") Example $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
12
jQuery Selectors The #id Selector Html elements
<div id = “test”><p>Hello</p></div> $("#test") Example $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });
13
jQuery Selectors The .class Selector Html elements
<div class = “test”><p>Hello</p></div> $(“.test") Example $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
14
jQuery Selectors Syntax Description $("*") Selects all elements
$(this) Selects the current HTML element $("p.intro") Selects all <p> elements with class="intro" $("p:first") Selects the first <p> element $("ul li:first") Selects the first <li> element of the first <ul> $("ul li:first-child") Selects the first <li> element of every <ul> $("[href]") Selects all elements with an href attribute $("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank" $("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank" $(":button") Selects all <button> elements and <input> elements of type="button" $("tr:even") Selects all even <tr> elements $("tr:odd") Selects all odd <tr> elements
15
jQuery Event Methods What are Events? Examples:
moving a mouse over an element selecting a radio button clicking on an element Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload
16
jQuery Syntax For Event Methods
click() $("p").click(function(){ // action goes here!! }); $("p").click(function(){ $(this).hide(); });
17
jQuery Syntax For Event Methods
dblclick() $("p").dblclick(function(){ $(this).hide(); });
18
jQuery Syntax For Event Methods
mouseenter() $("#p1").mouseenter(function(){ alert("You entered p1!"); }); mouseup() $("#p1").mouseup(function(){ alert("Mouse up over p1!"); });
19
jQuery Syntax For Event Methods
hover() $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); });
20
jQuery Syntax For Event Methods
focus() $("input").focus(function(){ $(this).css("background-color", "#cccccc"); }); blur() $("input").blur(function(){ $(this).css("background-color", "#ffffff"); });
21
The on() Method $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } });
22
jQuery Effects - Hide and Show
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); <!DOCTYPE html> <html> <head> <script src=" <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); </script> </head> <body> <p>If you click on the "Hide" button, I will disappear.</p> <button id="hide">Hide</button> <button id="show">Show</button> </body> </html>
23
jQuery Effects - Hide and Show
<!DOCTYPE html> <html> <head> <script src=" <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); }); </script> </head> <body> <button>Hide</button> <p>This is a paragraph with little content.</p> <p>This is another small paragraph.</p> </body> </html>
24
jQuery toggle() $("button").click(function(){ $("p").toggle(); });
<!DOCTYPE html> <html> <head> <script src=" <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); </script> </head> <body> <button>Toggle between hiding and showing the paragraphs</button> <p>This is a paragraph with little content.</p> <p>This is another small paragraph.</p> </body> </html>
25
jQuery Fading Methods fadeIn() fadeOut() fadeToggle() fadeTo()
jQuery has the following fade methods: fadeIn() fadeOut() fadeToggle() fadeTo()
26
jQuery fadeIn() Method
<!DOCTYPE html> <html> <head> <script src=" <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); </script> </head> <body> <p>Demonstrate fadeIn() with different parameters.</p> <button>Click to fade in boxes</button><br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br> <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br> <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div> </body> </html> $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); });
27
jQuery fadeOut() Method
<!DOCTYPE html> <html> <head> <script src=" <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); </script> </head> <body> <p>Demonstrate fadeOut() with different parameters.</p> <button>Click to fade out boxes</button><br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br> <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body> </html> $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); });
28
jQuery fadeToggle() Method
<!DOCTYPE html> <html> <head> <script src=" <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); </script> </head> <body> <p>Demonstrate fadeToggle() with different speed parameters.</p> <button>Click to fade in/out boxes</button><br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div> <br> <div id="div2" style="width:80px;height:80px;background-color:green;"></div> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body> </html> $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); });
29
jQuery fadeTo() Method
<!DOCTYPE html> <html> <head> <script src=" <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeTo("slow", 0.15); $("#div2").fadeTo("slow", 0.4); $("#div3").fadeTo("slow", 0.7); }); </script> </head> <body> <p>Demonstrate fadeTo() with different parameters.</p> <button>Click to fade boxes</button><br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br> <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body> </html> $("button").click(function(){ $("#div1").fadeTo("slow", 0.15); $("#div2").fadeTo("slow", 0.4); $("#div3").fadeTo("slow", 0.7); });
30
jQuery and AJAX: load() method
Syntax: $(selector).load(URL,data,callback); demo_test.html <h2>jQuery and AJAX is FUN!!!</h2> <p id="p1">This is some text in a paragraph.</p> Example $("#div1").load("demo_test.html"); $("#div1").load("demo_test.txt #p1");
31
jQuery and AJAX: load() method
<!DOCTYPE html> <html> <head> <script src=" <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").load("demo_test.txt #p1"); }); </script> </head> <body> <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div> <button>Get External Content</button> </body> </html
32
jQuery and AJAX: load() method
The optional callback parameter specifies a callback function to run when the load() method is completed. 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 $("button").click(function(){ $("#div1").load("demo_test.html", function(responseTxt, statusTxt, xhr){ if(statusTxt == "success") alert("External content loaded successfully!"); if(statusTxt == "error") alert("Error: " + xhr.status + ": " + xhr.statusText); }); });
33
jQuery and AJAX: load() method
<!DOCTYPE html> <html> <head> <script src=" <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>
34
jQuery - Filters Use jQuery to filter/search for specific elements.
35
jQuery - Filters <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script>
36
jQuery - Filters <script> $(document).ready(function(){
<!DOCTYPE html> <html> <head> <script src=" <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); </script> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; tr:nth-child(even) { background-color: #dddddd; </style> </head>
37
jQuery - Filters <body> <h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or s:</p> <input id="myInput" type="text" placeholder="Search.."> <br><br> <table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th> </th> </tr> </thead> <tbody id="myTable"> <td>John</td> <td>Doe</td> <td>Mary</td> <td>Moe</td> <td>July</td> <td>Dooley</td> <td>Anja</td> <td>Ravendale</td> </tbody> </table> <p>Note that we start the search in tbody, to prevent filtering the table headers.</p> </body> </html>
38
jQuery – Filters: lists
<!DOCTYPE html> <html> <head> <script src=" <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myList li").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); </script> </head> <body> <h2>Filterable List</h2> <p>Type something in the input field to search the list for specific items:</p> <input id="myInput" type="text" placeholder="Search.."> <br> <ul id="myList"> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth</li> </ul> </body> </html>
39
jQuery – Filters: lists
<!DOCTYPE html> <html> <head> <script src=" <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myDIV *").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); </script> </head> <body> <h2>Filter Anything</h2> <p>Type something in the input field to search for a specific text inside the div element with id="myDIV":</p> <input id="myInput" type="text" placeholder="Search.."> <div id="myDIV"> <p>I am a paragraph.</p> <div>I am a div element inside div.</div> <button>I am a button</button> <button>Another button</button> <p>Another paragraph.</p> </div> </body> </html>
40
jQuery – Exercise Show messages here if ไม่กรอกข้อมูลทั้ง 2 ช่อง
ให้แสดงข้อความเตือนว่า กรุณากรอกข้อมูลทั้งหมด if กรอก Username แต่ไม่กรอก Password กรุณากรอก Password if กรอก Password แต่ไม่กรอก Username กรุณากรอก Username If กรอกครบแล้ว ให้แสดงข้อความว่า “Great” Show messages here
Similar presentations
