Downloaded 156 times
![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)
![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/75/A-Short-Introduction-To-jQuery-4-2048.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/75/A-Short-Introduction-To-jQuery-7-2048.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/75/A-Short-Introduction-To-jQuery-9-2048.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/75/A-Short-Introduction-To-jQuery-12-2048.jpg)
Uploaded bySudar Muthu
A Short Introduction To jQuery
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.
More Related Content
Similar to A Short Introduction To jQuery
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 $() functionBuild 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 setof 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 propertyof 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() – Getthe 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 fortraversing DOM $(‘div#nav’).parent() $(‘div#nav’).next() $(‘div#nav’).prev() $(‘div#nav’).nextAll(‘a’) WebCamp - Chennai http://SudarMuthu.com
- 15. Enhanced methods formanipulating DOM after(content) append(content) before(content) clone() empty() remove(expr) WebCamp - Chennai http://SudarMuthu.com
- 16. Provides methods forassigning 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 onLoadevent $(document).ready(function() { alert (“DOM is Ready”); }); You can also use $(function() { alert (“DOM is Ready”); }); WebCamp - Chennai http://SudarMuthu.com
- 18. jQuery has excellentsupport 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 Pluginsavailable 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