A Short Introduction To jQuery
Download as PPT, PDF2 likes2,557 views
The document discusses jQuery, a popular JavaScript library. It provides concise summaries of jQuery's main features and capabilities, including: - Using CSS selectors to select DOM elements and perform actions on them. - Returning collections of matched elements that can be iterated, accessed, and manipulated. - Methods for DOM manipulation like adding/removing classes, setting styles, and event handling. - Support for AJAX calls and utilities for browser detection. - Large ecosystem of plugins for additional functionality.
![Matches a set of elements and returns a collection. Uses CSS Selectors $ (‘#comment’) $(‘div.comment’) $(‘div#content h2’) $(‘input:password’) $(‘a[href^=“http://”]’) $(‘ul#nav > li’) You can also use jQuery() instead of $() WebCamp - Chennai http://SudarMuthu.com](https://image.slidesharecdn.com/a-short-introduction-to-jquery-120378828267666-4/85/A-Short-Introduction-To-jQuery-4-320.jpg)
![You can use .each() to iterate the collection $(‘p.special’).each(function () { alert (this); }); $(‘p.special’)[0] – First element $(‘p.special’)[1] - Second element WebCamp - Chennai http://SudarMuthu.com](https://image.slidesharecdn.com/a-short-introduction-to-jquery-120378828267666-4/85/A-Short-Introduction-To-jQuery-7-320.jpg)
![val() – Get the value of the input element var singleValue = $(‘#single’).val(); val(val) – Set the value of an input element $("input:text"). val (“Value Text”); $(“#multiple”).val([“multiple1”, “multiple2”]); WebCamp - Chennai http://SudarMuthu.com](https://image.slidesharecdn.com/a-short-introduction-to-jquery-120378828267666-4/85/A-Short-Introduction-To-jQuery-9-320.jpg)
![$(‘span#msg’).show() Also show(speed, [callback]) $(‘span#msg’).show(“fast”, function() { alert (“Done”); }); $(‘span#msg’).hide() Also hide(speed, [callback]) WebCamp - Chennai http://SudarMuthu.com](https://image.slidesharecdn.com/a-short-introduction-to-jquery-120378828267666-4/85/A-Short-Introduction-To-jQuery-12-320.jpg)
A Short Introduction To jQuery
- 1. Sudar ( http://SudarMuthu.com ) WebCamp Chennai – 23 Feb 2008
- 2. Famous Client – Side frameworks jQuery Prototype Yahoo User Interface Library (YUI) Dojo Rico WebCamp - Chennai http://SudarMuthu.com
- 3. The $() function Build around CSS selectors WordPress has started to use jQuery Lots of Plugins Can be used with other libraries Doesn’t hijack the global namespace Small Size (Just 15 KB after Minified and Gzipped) Write Less, Do More WebCamp - Chennai http://SudarMuthu.com
- 4. Matches a set of elements and returns a collection. Uses CSS Selectors $ (‘#comment’) $(‘div.comment’) $(‘div#content h2’) $(‘input:password’) $(‘a[href^=“http://”]’) $(‘ul#nav > li’) You can also use jQuery() instead of $() WebCamp - Chennai http://SudarMuthu.com
- 5. $ (‘h2:first’) $(‘h2:last’) $(‘p:visible’) $(‘p:hidden’) $(‘input:password’) $(‘input:text’) $(‘p:odd’) WebCamp - Chennai http://SudarMuthu.com
- 6. The $ () function returns a collection consisting of the elements that match the selector. It is similar to an array, but not exactly same. You can use $(‘p.special’).length or $(‘p.special’).size() Both return the number of matched elements WebCamp - Chennai http://SudarMuthu.com
- 7. You can use .each() to iterate the collection $(‘p.special’).each(function () { alert (this); }); $(‘p.special’)[0] – First element $(‘p.special’)[1] - Second element WebCamp - Chennai http://SudarMuthu.com
- 8. Access a property of matched element $(‘img#header’).attr(‘src’) – returns the src attribute $(‘img#header’).attr(‘src’, ‘http://e.in/head.gif’) Set the src attribute WebCamp - Chennai http://SudarMuthu.com
- 9. val() – Get the value of the input element var singleValue = $(‘#single’).val(); val(val) – Set the value of an input element $("input:text"). val (“Value Text”); $(“#multiple”).val([“multiple1”, “multiple2”]); WebCamp - Chennai http://SudarMuthu.com
- 10. $(‘img#header’).addClass(‘highlighted’) $(‘img#header’).removeClass(‘highlighted’) $(‘img#header’).toggleClass(‘highlighted’) var hasBar = #(‘img#header’).hasClass(‘special’) $(‘p.special’).css(‘font-size’, ’12px’ ) $(‘p.special’).css({‘font-size’:’12px’, ‘color’:’red’ }) WebCamp - Chennai http://SudarMuthu.com
- 11. Similar to innerHTML $(‘span#error’).text(“There is some error”) $(‘div#msg’).html(“<strong>Message</strong>”) WebCamp - Chennai http://SudarMuthu.com
- 12. $(‘span#msg’).show() Also show(speed, [callback]) $(‘span#msg’).show(“fast”, function() { alert (“Done”); }); $(‘span#msg’).hide() Also hide(speed, [callback]) WebCamp - Chennai http://SudarMuthu.com
- 13. toggle() fadeIn() fadeOut() fadeTo() slideUp() slideDown() animate() stop() WebCamp - Chennai http://SudarMuthu.com
- 14. Enhanced methods for traversing DOM $(‘div#nav’).parent() $(‘div#nav’).next() $(‘div#nav’).prev() $(‘div#nav’).nextAll(‘a’) WebCamp - Chennai http://SudarMuthu.com
- 15. Enhanced methods for manipulating DOM after(content) append(content) before(content) clone() empty() remove(expr) WebCamp - Chennai http://SudarMuthu.com
- 16. Provides methods for assigning events in a cross browser way $(‘div#msg’).click(function(ev) { $(this).css(‘color’, ‘red’); alert(‘Clicked’); }); Lot of other handlers also available WebCamp - Chennai http://SudarMuthu.com
- 17. Alternate to onLoad event $(document).ready(function() { alert (“DOM is Ready”); }); You can also use $(function() { alert (“DOM is Ready”); }); WebCamp - Chennai http://SudarMuthu.com
- 18. jQuery has excellent support for AJAX $(‘div#msg’).load(‘/dir/file.html’) You can also use other advanced methods $.get(url, params, callback) $.post(url, params, callback) $.getJSON(url, params, callback) $.getScript(url, callback) WebCamp - Chennai http://SudarMuthu.com
- 19. $.trim(str) $.browser if ($.browser.safari) { alert(“This is Safari”); } You can also use safari opera msie Mozilla $.each(object, callback) WebCamp - Chennai http://SudarMuthu.com
- 20. Lot of Plugins available for Form Validation Drop down Menus UI Drag and Drop Etc.., Official Plugin repository at http://plugins.jquery.com/ WebCamp - Chennai http://SudarMuthu.com
- 21. http://jquery.com – Official Site http://docs.jquery.com - Documentation http://plugins.jquery.com – Plugin repositry http://visualjquery.com – API Reference http://sudarmuthu.com/blog/tag/jquery - My blog posts about jQuery WebCamp - Chennai http://SudarMuthu.com