jQuery

Introduction to jQuery

Transcript

1. jQuery IS1103 Lab - Friday 15th February 2013
2. What is jQuery? jQuery is a JavaScript library/framework that makes it easy to build dynamic cross-browser compatible Web applications. It provides features such as: DOM querying and traversal DOM manipulation Effects Event handling Ajax Plug-ins
3. jQuery Versions There are two main versions of jQuery: 1.x Supports IE6+ and all other browsers 2.x Supports IE9+ and all other browsers If you need support for IE versions 6, 7 or 8 you will need to use version 1.x of jQuery. The only difference is that 2.x doesn’t include backwards- compatible code (and is much smaller and faster!)
4. Including jQuery Two ways of including jQuery From a Content Delivery Network (CDN) Locally within the application The best way to include jQuery is to include it from a CDN and provide a local fallback that is used if for some reason the library can’t be loaded remotely.
5. Including jQuery (cont’d) From HTML5 Boilerplate: <script src="//ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
6. DOM querying Previously, you learned how to query the DOM using a few different methods: document.getElementById document.getElementsByTagName document.getElementsByClassName document.querySelectorAll Not all of these are available in all browsers. Also, they each work a little bit differently. jQuery makes DOM querying really, really easy.
7. $ jQuery includes a function called $ (the dollar symbol) which replaces all of the DOM querying methods on the last slide. $('#elementId') Get element by ID $('.elementClass') Get elements by class name $('div') Get elements by tag name $('input[type=text]') Get elements by CSS selector jQuery will return a single element or array depending on the number of elements selected.
8. Iterating over element collections When querying the DOM in plain JavaScript, if more than one element is returned, you’d typically loop over each element to execute code against it: var links = document.getElementsByTagName('a'); for(var i = 0; i < links.length; i++) { var link = links[i]; link.style.color = '#FF0000'; }
9. Iterating in jQuery jQuery makes this much easier: $('a').each(function(link) { link.style.color = '#FF0000'; }); If you want to run a jQuery method, it’s even easier: $('a').css('color', '#FF0000'); This will change the colour of every link on the page.
10. More querying goodies jQuery provides many functions to make querying even more powerful. has Check within selected elements not Test selection doesn’t match query filter Test selection does match query first Get the first selected element only eq(n) Get the nth selected element only Example: $('ul li').filter('.odd').first();
11. DOM Traversal If you have a selection, you can find other elements nearby using DOM traversal methods. parent parents parentsUntil closest children find next prev nextAll prevAll nextUntil prevUntil siblings Example: $('div.child').closest('li');
12. DOM Manipulation DOM manipulation allows you to create, modify and remove elements on a HTML page using JavaScript. jQuery allows you to easily modify elements using various functions: html Get/set the HTML contents of an element text Get/set the text contents (remove HTML) attr Get/set value of an attribute width Get/set width of an element height Get/set height of an element position Get position information of an element val Get/set the value of a form element
13. Creating New Elements jQuery makes it easy to create new elements: var newEl = $('<div>New element</div>'); Alternatively, you can set attributes as an object: var newEl = $('<a/>', { html: 'New link', href: 'newpage.html' });
14. Inserting Elements When you create a new element, you need to insert it on the page for it to display. $('body').append(newEl); Other functions for inserting, moving, copying and removing elements on a page: appendTo insert insertBefore insertAfter prependTo prepend before after clone remove detach
15. Effects You can use jQuery to easily implement effects on your pages. var el = $('#myDiv'); el.hide('slow'); el.show('fast'); If you don’t know the element’s current state, use: el.toggle(1800);
16. Effects (cont’d) You can also use individual effects: el.slideUp(); el.slideDown(); el.fadeOut(); el.fadeIn(); or use toggle instead: el.slideToggle(); el.fadeToggle();
17. After Effects Effects take an optional callback function as an argument. These will be fired when the effect has finished: el.fadeIn(750, function() { $(this).addClass('highlight'); }); This will fade in the element in 750 milliseconds, and it will then add the highlight class to the element as soon as the fade animation has been completed.
18. Event Handling jQuery makes listening for DOM events much simpler. It also provides fallback code to ensure your event handlers work consistently across browsers. Without jQuery, you’d need: var button = document.getElementById(‘resetBtn’); if(button.addEventListener) { button.addEventListener('click', doReset, false); } else if(button.attachEvent) { button.attachEvent('onclick', doReset); }
19. Event Handling (with jQuery) jQuery makes this much less painful: $('#resetBtn').click(doReset); Alternatively, you can use: $('#resetBtn').on('click', doReset); Both of these do exactly the same thing.
20. The ready event jQuery includes a special ready event which tells the application that the DOM and jQuery has been loaded (even if the page has not completely loaded yet). Any code you write in jQuery should be within the context of this event. $(document).ready(function() { //Your code goes here });
21. Ajax Ajax (Asynchronous JavaScript And XML) is a concept that allows us to build Web applications that are more dynamic and interactive. Traditionally in Web applications, to load new content from a server, we needed to load an entire new page. Ajax allows us to send and retrieve data to the server without this overhead. This means much faster applications and a more fluid user experience. Although Ajax contains XML in its name, you are unlikely to ever need to use XML with it.
22. Ajax (cont’d) To illustrate the benefits of Ajax, I’ve extended the store locator example to make use of it, which I’ll run through now. The main difference here is that I no longer have a stores.js file, but instead I use PHP to return the store data in JSON (JavaScript Object Notation) format dynamically. This allows me to implement functionality such as searching on the server-side. Let’s take a look now at how this all works.
23. Plug-ins The final jQuery concept we’ll look at is plug-ins. One of the most powerful aspects of jQuery is the additional functionality you can add to your applications really easily using plug-ins. To include a plug-in, you typically include an extra script file in your HTML page, and add a little snippet of JavaScript to activate the plug-in. You can even write your own jQuery plug-ins - but we won’t cover that right now, we’d probably need a few weeks!
24. Photo Slideshow To demonstrate how jQuery plug-ins work, we’ll build a very basic example of a photo slideshow. This is one of the requirements for your project. Note that I’ve intentionally used one of the more basic slideshow plug-ins - I suggest that you search the Web for one with more features if you want to earn extra marks!