1 / 8

Jquery

Jquery. http://www.flickr.com/photos/yukop/7130306255/sizes/c/in/photostream/. A good language for questioning JavaScripters. What?. JQuery is a library of JavaScript functions. JQuery ensures identical functionality across platforms . JQuery works by

lupita
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 http://www.flickr.com/photos/yukop/7130306255/sizes/c/in/photostream/ A good language for questioning JavaScripters

  2. What? • JQuery is a library of JavaScript functions. • JQuery ensures identical functionality across platforms. • JQuery works by • Using CSS selectors to select a set of DOM elements • Apply functions to each selected element • Examples • $('p').hide(); • $('.highlight').attr('background-color', 'red');

  3. Installing JQuery • Include the library • Download JQuery (a js file) to your server and link to it from your HTML documents • <script src=“jquery.min.js”> • Link to a hosted JQuery implementation • <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> • <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js">

  4. The $ function • Access to the JQuery library is through the jQuery function • jQuery() also known as $() • This function is extremely flexible: • $(function) : defines the ‘ready’ handler • $(‘selector’) : selects DOM elements using CSS selectors • $(element) : attaches behavior to an element • $.function() : executes a jQuery function

  5. Ready!? • Can invoke javascript when the web page is loaded into the browser. • window.onload = function(){ alert("welcome"); } • Unfortunately, the Javascript code isn't run until all images are finished downloading (this includes banner ads). • JQuery allows coders to invoke a function when the DOM is ready even if some content (images for example) has not been loaded. • $(document).ready(function(){ … });

  6. Example <!doctype html> <html> <head><title>Demo</title></head> <body> <a href="http://jquery.com/">jQuery</a> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("a").click(function(event){ alert(“What’s up with that?"); }); }); </script> </body> </html>

  7. Jquery Selectors • One of the most powerful JQuery features is selection. • JQuery allows programmers to use CSS selectors in the context of JavaScript code. The result is an iterable set of DOM elements. • $(‘#x33’) • $(‘p’) • $(‘.bordered’) • $(‘a[href$=“.pdf”]’)

  8. Functions on Elements • Functions can be easily applied to the selected elements • $(‘#x33’).hide() • $(‘p’).fadeOut() • $(‘.bordered’).slideDown(‘slow’) • $(‘a[href$=“.pdf”]’).fadeTo(‘slow’, .5,) • $(‘#x33’).show()

More Related