15-437 jQuery

Transcript

1. jQuery Thierry Sans
2. Introduction
3. JQuery - The javascript framework Became (the most) popular because: • manipulate the DOM with CSS-like selectors • abstract javascript methods • a consistent way to do Ajax across browsers (in the past)
 
 http://w3techs.com/technologies/overview/javascript_library/all
4. How to install it? • CDN link
 <script src=“//code.jquery.com/jquery-1.11.0.min.js"></script>
 • Download the source code
 https://jquery.com
 • Use Bower
 $ bower install --save jquery OR OR
5. Exploring jQuery
6. Selectors jQuery $('css_selector') (native) javascript document.querySelectorAll('css_selector')
7. Methods jQuery $(‘css_selector’).html('html_content'); (native) javascript var elements = document.querySelectorAll('css_selector'); for(var i in elements){ elements[i].innerHTML = 'html_content'; }
8. Events jQuery e.click(f); (native) javascript e.onclick = f; warning: they are not equivalent!
 
 jQuery allows to have multiple event handlers (observer programming pattern) adds another event handler f sets a unique event handler f
9. Other useful functions • .show() • .hide() • .toggle()
10. Animations • .slideUp() • .slideDown() • .slideToggle()
11. Ajax (coming later in this course) • $.get() • $.post() • $.getJSON()
12. JQuery plugins
 jQuery UI, jQuery Cookie 
 and other plugins