1 / 14

Mastering jQuery: Simplifying Web Development with Advanced Features

Explore the benefits of using web development toolkits like jQuery to hide browser differences, simplify code, and access advanced features. Learn jQuery selectors and patterns, manipulate jQuery objects, handle events, leverage AJAX with ease, and enhance user interactions with interactive elements. Dive into jQuery autocomplete and jQuery plugins for efficient development. Start your journey with jQuery, discover examples of its usage, and find inspiration from various jQuery plugins available online.

melyssa-newman
Download Presentation

Mastering jQuery: Simplifying Web Development with Advanced Features

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. Set 5: Web Development Toolkits IT452 Advanced Web and Internet Systems

  2. Why Use a Toolkit? Hide browser differences. Simplifies code. Advanced features. Why re-invent the wheel? • Choices • jQuery www.jQuery.com • Yahoo! UI Library (YUI) developer.yahoo.com/yui • Google Web Toolkit • Dojo • Prototype • … more

  3. jQuery Selectors “Get all paragraphs that are children of ID ‘target’” • Vanilla Javascript: • jQuery Selector: • var children = document.getElementById(“target”); • var keep = new Array(); • var ii = 0; • for( xx in children ) • if( children[xx].tagName == “P” ) • keep[ii++] = children[xx]; • var keep = $(“#target p”);

  4. jQuery Selector Patterns • Selector Patterns • $(‘p’) - all <p> elements • $(‘#target’) - all elements with id “target” • $(‘div p’) - all <p> elements in a <div> • $(‘p.emph’) - all <p> elements of class “emph” • $(‘*’) - all elements in the DOM! • $(‘img[border=1]’) - all images with borders of 1 • …..

  5. The jQuery Object • Selectors return jQuery Objects • They can act like arrays • $(‘div’)[1] • $(‘div’).get(1) • $(‘div’).length • var arr = $(‘div’).get() All jQuery functions operate on jQuery objects Convert to an actual Array object

  6. The jQuery Object • Selectors return jQuery Objects • They can perform CSS and animation tricks • $(“a”).css("color", "red"); • $(“a”).css("border", "1px solid blue"); • $(“p”).text(“new text”); • $(‘#target’).hide() • $(“p”).animate( { opacity:0.2, marginLeft:”40px” }, 5000 ); \\ 5 seconds http://api.jQuery.com/category/css/ http://api.jQuery.com/category/effects/ Makes transparent and moves the object to the right…over 5 seconds time.

  7. The jQuery Object • Selectors return jQuery Objects • They have many convenience functions • $(‘#target’).parent() • .first() • .last() • .is(function) • .add(Object) • .next(Selector) • .filter(Selector) http://api.jQuery.com/category/traversing/ is() does arbitrary boolean testing .next(“:contains(‘you’)”) Gets the siblings that match the Selector in the DOM tree .filter(“:contains(‘you’)”) Reduce current matched elements to those that match the filter

  8. Event Handling $('#target').click(function() { alert('Handler for .click() called.'); }); Remove “on” from onclick Blur Focus Hover Mouseover Etc.

  9. Ajax with jQuery NO messing with browser differences! • The most basic call: $.get("data.txt", function(data) { alert("received reply! " + data); } ); • Full Options: varajaxSettings = { type: “POST", url: "data.txt", data: "name=chambers&location=USNA", success: function(data) { $('#target').append("<p>"+data+"</p>").css("color","blue"); }, error: function(xhr, status, error) { alert("error: " + error); } }; $.ajax(ajaxSettings); No more status code checking! NOTE: can send data

  10. Autocomplete with jQuery • Use a plugin for jQuery <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css"> <script type="text/javascript" src="jquery.autocomplete.js"></script> <script type="text/javascript"> function onload() { $("#query").autocomplete({ url: 'search.txt', useCache: false, filterResults: false, }); } </script> </head> <body onload="onload()"> <form> <p>Local data: <input type="text" id="query" /> </form> </body> You provide SERVER-SIDE data. Plugin does everything else for you. NO AJAX SETTINGS! Sends

  11. jQuery Autocomplete (Fake Perl) #!/usr/bin/perl use strict; use CGI qw( :standard ); use CGI::Carp qw(warningsToBrowser fatalsToBrowser); print "Content-Type: text/plain; charset=UTF-8\n\n"; open(IN,"search.txt") || die "Cannot open search.txt ($!)\n"; while( my $line = <IN> ) { print "$line"; } close IN; What do you need to change? • Need to get ‘query’ • Do SQL query based on that • Send back results

  12. What else can we do? • Photo Slideshows • Tab Views • Calendars, Date Pickers • Buttons galore • File Uploading • Drag and Drop • … many more

  13. How do I start? Goal is to practice learning from documentation. Show the “getting started” part And “Examples” from each thing

  14. Some Sites with jQuery Plugins • http://jquerylist.com/ • http://jquerystyle.com/ • http://jquery.malsup.com/ • http://bassistance.de/jquery-plugins/ • (cool photo slider) http://slidesjs.com/

More Related