1 / 24

jQuery

jQuery. CSCI 216 Tina Ostrander. What is jQuery ?. A library of JavaScript functions Features Select and manipulate HTML Manipulate CSS JavaScript Effects and animations HTML DOM traversal and modification AJAX Utilities. Getting Started. Include jQuery in the source file

trynt
Download Presentation

jQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. jQuery CSCI 216 Tina Ostrander

  2. What is jQuery? • A library of JavaScript functions • Features • Select and manipulate HTML • Manipulate CSS • JavaScript Effects and animations • HTML DOM traversal and modification • AJAX • Utilities

  3. Getting Started • Include jQuery in the source file • Define jQuery functions • Save this file as index.htm in a 216/jQuery subdirectory on ned • Try it! <!DOCTYPE html> <html> <head> <title>Fun with jQuery</title> </head> <body> <h2>Hello, jQuery!</h2> <button id='btnOuch'>Say Ouch</button> <script src="http://code.jquery.com/jquery.js"></script> <script> $("#btnOuch").click(function(){ alert("Ouch! That hurt."); }); </script> </body> </html>

  4. Example 1: A Closer Look • $("#btnOuch") selects the element with ID btnOuch • click() binds a click event to selected element • The function executes when the click event is fired <script> $("#btnOuch").click(function(){ alert("Ouch! That hurt."); }); </script>

  5. How jQuery Works • The jQuery syntax is used to select HTML elements and perform some action on those element(s). • Basic syntax: $(selector).action() • A dollar sign to define jQuery • A (selector) to find HTML elements • An action() to be performed on the element(s) http://www.w3schools.com/jquery/jquery_syntax.asp

  6. jQuerySelectors For a full reference please see jQuery Selectors Reference

  7. Comparison • Compare the following: What are the advantages of the jQuery method? $("a").click(function(){ alert("You clicked a link!"); }); • <a href="#" onclick="alert(‘You clicked a link!')">Link</a>

  8. Example 2 <script> $("h2").click(function(){ $(this).hide("slow"); }); </script> What will this do? What happens if you have more than one h2? Try it!

  9. Example 3 Hide all blue paragraphs when btnHideBlue is clicked <script> $("#btnHideBlue").click(function(){ $("p.blue").hide("slow"); }); </script> <button id='btnHideBlue'>Hide Blue</button>

  10. jQuery Events For a full jQuery event reference, please see jQuery Events Reference

  11. Example 4 Append text to paragraph lemon on mouseover <script> $("#lemon").mouseover(function(){ $(this).append(" Cookie! "); }); </script> <p id='lemon'>Lemon drops biscuit chocolate…</p>

  12. Manipulating CSS For a full jQuery CSS reference, please see jQuery CSS Methods Reference • For more on the css function, see http://api.jquery.com/css/

  13. Example 5 Change color of paragraph lemon when btnColor is clicked <script> $("#btnColor").click(function(){ $("#lemon").addClass("blue"); }); </script> <style type="text/css"> .red{ color:red; } .blue{ color:blue; } </style>

  14. Example 6 • <script> • $("#btnColorCheck").click(function(){ alert($("#lemon").css("color")); • }); • </script> What color is the paragraph? Display the color of the paragraph lemon when btnColorCheck is clicked.

  15. Example 7 Highlight (background-color = yellow) any paragraph that is double-clicked <script> $("p").dblclick(function(){ $(this).css("background-color", "yellow"); }); </script>

  16. jQuery Effects

  17. Example 8 Create a toggle button that shows/hides paragraph lemon. <script> $("#btnToggle").click(function(){ $("#lemon").slideToggle("slow"); }); </script>

  18. Example 9 <script> $("#btnFade").click(function(){ $("#lemon").fadeTo("slow", 0.5); }); </script> Fade paragraph lemon to 50% opacity when btnFade is clicked.

  19. Manipulating HTML For a full jQuery HTML reference, please see jQuery HTML Methods Reference

  20. Example 10 <script> $("#btnReplace").click(function(){ $("#lemon").html("Lollipop soufflé ice cream tootsie roll donut..."); }); </script> Replace text in paragraph lemon when btnReplace is clicked.

  21. Ajax • The jQuery$.post() method loads data from the server using an HTTP POST request. • Syntax $.post(URL, {data}, function(data){…}); $.post("myScript.php", {name:txt}, function(result) {    $("span").html(result);  }); ajax.php http://www.w3schools.com/jquery/ajax_post.asp

  22. Ajax show_product.php <?php $id = $_POST['id']; mysql_connect("localhost", "omuser", "omuser") or die("Error connecting"); mysql_select_db("om") or die("Error selecting DB"); $query = "SELECT * FROM items WHERE item_id = $id"; $result = mysql_query($query); if (mysql_num_rows($result) == 0) { echo "Product ID $id not found."; return; } $row = mysql_fetch_array($result); echo "<strong>Item ID:</strong> {$row['item_id']}<br>"; echo "<strong>Title:</strong> {$row['title']}<br>"; echo "<strong>Artist:</strong> {$row['artist']}<br>"; echo "<strong>Price:</strong> {$row['unit_price']}<br>"; Get this from the Ajax call

  23. Ajax ajax.php $('#show').click(function(){ varprodId= $('#id').val(); $.post( "show_product.php", {id:prodId}, function(result) { $('#detail').html(result); } ); }); When the button is clicked Get the text box value Ajax POST Name of the PHP script The key/value to be passed Update the "detail" div With the output of the PHP script

  24. Resources • http://jquery.com/ • http://www.w3schools.com/jquery • http://jqueryui.com/

More Related