Your SlideShare is downloading. ×
0
Presentation by Anand<br />
Introduction<br />	jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML.<br...
It greatly simplifies JavaScript programming.
Free open source software, dual-licensed under the MIT License and the GNU.</li></ul>	JQuery's syntax is designed to make ...
Features of jQuery<br /><ul><li>DOM element selections using the cross-browser open source selector engine.
DOM traversal and modification.
Events
CSS manipulation
Effects and animations
Ajax
Extensibility through plug-ins
Utilities - such as browser version and the each function.
Cross-browser support</li></li></ul><li>History of jQuery<br /><ul><li>Developed by John Resig
Released v1.0 on November 26th, 2006
Maintained as an Open Source software (dual licensed under MIT and GNU GPL)
Microsoft planning to integrate into Microsoft Visual Web Developer
Nokia planning to integrate into Web Run-Time widget development platform
Currently on Version 1.5, released</li></li></ul><li>Adding the jQuery library<br />Two ways:<br /><ul><li>Download the jq...
The Document Ready Function<br />All jQuery methods, are kept inside a document.ready() function:<br />$(document).ready(f...
Trying to get the size of an image that is not loaded</li></li></ul><li>Jquery syntax<br /><html><br /><head><script type=...
Jquery Object and $ symbol<br />The jQuery Object<br /><ul><li>Contains a reference to the DOM element
Has properties of the DOM element, like text, html, tags
Upcoming SlideShare
Loading in...5
×

J Query Introduction And JQuery Selectors

1,071

Published on

explained jquery in details and jquery selectors

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,071
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "J Query Introduction And JQuery Selectors"

  1. 1. Presentation by Anand<br />
  2. 2. Introduction<br /> jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML.<br /><ul><li> It is the most popular JavaScript library in use today.
  3. 3. It greatly simplifies JavaScript programming.
  4. 4. Free open source software, dual-licensed under the MIT License and the GNU.</li></ul> JQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library.<br /> Using these facilities, developers are able to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. This contributes to the creation of powerful and dynamic web pages.<br />
  5. 5. Features of jQuery<br /><ul><li>DOM element selections using the cross-browser open source selector engine.
  6. 6. DOM traversal and modification.
  7. 7. Events
  8. 8. CSS manipulation
  9. 9. Effects and animations
  10. 10. Ajax
  11. 11. Extensibility through plug-ins
  12. 12. Utilities - such as browser version and the each function.
  13. 13. Cross-browser support</li></li></ul><li>History of jQuery<br /><ul><li>Developed by John Resig
  14. 14. Released v1.0 on November 26th, 2006
  15. 15. Maintained as an Open Source software (dual licensed under MIT and GNU GPL)
  16. 16. Microsoft planning to integrate into Microsoft Visual Web Developer
  17. 17. Nokia planning to integrate into Web Run-Time widget development platform
  18. 18. Currently on Version 1.5, released</li></li></ul><li>Adding the jQuery library<br />Two ways:<br /><ul><li>Download the jquery file and include in the project.</li></ul><head><script type="text/javascript" src="jquery.js"></script></head> <br /><ul><li>Using google or microsoft CDN.</li></ul><head><br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"><br /></script><br /></head><br />
  19. 19. The Document Ready Function<br />All jQuery methods, are kept inside a document.ready() function:<br />$(document).ready(function(){   // jQuery functions go here...});<br />This is to prevent any jQuery code from running before the document is finished loading (is ready).<br />Here are some examples of actions that can fail if functions are run before the document is fully loaded:<br /><ul><li>Trying to hide an element that doesn't exist
  20. 20. Trying to get the size of an image that is not loaded</li></li></ul><li>Jquery syntax<br /><html><br /><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript"> $(document).ready(function(){  $(“.buttonstyle").click(function(){    $(“#label1").hide();  }); });</script></head><body><label id=“label1”>Metanoia</label><br /><button class=“buttonstyle”>Hide</button</body></html> <br />
  21. 21. Jquery Object and $ symbol<br />The jQuery Object<br /><ul><li>Contains a reference to the DOM element
  22. 22. Has properties of the DOM element, like text, html, tags
  23. 23. Can be used to manipulate the DOM directly
  24. 24. Can be nested</li></ul>The $ symbol<br /><ul><li>$ is the Shortcut for the jQuery Global Class
  25. 25. Use it to access any part of the DOM
  26. 26. Search by CSS to get the element.
  27. 27. Returns a jQuery object which can be further manipulated</li></li></ul><li>What is in jQuery?<br /><ul><li>SELCTORS
  28. 28. ATTRIBUTES
  29. 29. TRAVERSING
  30. 30. MANUPULATION
  31. 31. CSS
  32. 32. EVENTS
  33. 33. AJAX
  34. 34. UTILITIES
  35. 35. JQUERY CORE
  36. 36. JQUERY UI</li></li></ul><li>SELECTORS<br />Seven Types<br /><ul><li>Basic
  37. 37. Heirarchy
  38. 38. Basic Filter
  39. 39. Content Filter
  40. 40. Attribute
  41. 41. Child Filter
  42. 42. Visibility Filter
  43. 43. Form</li></li></ul><li>Basic selectors<br /><ul><li>All Selector(“*”) : selects all elements
  44. 44. Class Selector(“.class”) : matches all elements with the given class name
  45. 45. Element Selector(“element”): selects all elements with the given tag name
  46. 46. ID Selector(“#id”): Selects a single element with the given id attribute
  47. 47. Multiple Selector (“selector1, selector2, selectorN”) : selects the combined results of all the specified selectors</li></li></ul><li>Hierarchy<br />Child Selector(“parent > child”): Selects all direct child elements specified by "child" of elements specified by "parent".<br />Descendant Selector (“ancestor descendant”): Selects all elements that are descendants of a given ancestor.<br />Next Adjacent Selector(“prev + next”): Selects all next elements matching "next" that are immediately preceded by a sibling "prev".<br />Next Siblings Selector (“prev ~ siblings”): Selects all sibling elements that follow after the "prev" element, have the same parent, and match the filtering "siblings" selector.<br />
  48. 48. Basic Filter<br />:animated Selector : Select all elements that are in the progress of an animation at the time the selector is run.<br />:eq() Selector: Select the element at index n within the matched set.<br />:even Selector: Selects even elements, zero-indexed.<br />:first Selector: Selects the first matched element.<br />:gt() Selector: Select all elements at an index greater than index within the matched set.<br />
  49. 49. Content Filter<br />:contains() Selector: Select all elements that contain the specified text.<br />:empty Selector: Select all elements that have no children (including text nodes).<br />:has() Selector: Selects elements which contain at least one element that matches the specified selector.<br />:parent Selector: Select all elements that are the parent of another element, including text nodes.<br />
  50. 50. Attribute<br />[name|=value]: Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by hyphen (-).<br />[name*="value"]: Selects elements that have the specified attribute with a value containing the given substring.<br />[name~="value"]: Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.<br />[name$="value"]: Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.<br />
  51. 51. Attribute<br />[name="value"]: Selects elements that have the specified attribute with a value exactly equal to a certain value.<br />[name!="value"]: Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value.<br />[name^="value"]: Selects elements that have the specified attribute with a value beginning exactly with a given string.<br />[name]: Selects elements that have the specified attribute, with any value.<br />[name="value"][name2="value2"]: Matches elements that match all of the specified attribute filters.<br />
  52. 52. Child Filter<br />:first-child Selector: Selects all elements that are the first child of their parent.<br />:last-child Selector: Selects all elements that are the last child of their parent.<br />:nth-child() Selector: Selects all elements that are the nth-child of their parent.<br />:only-child Selector: Selects all elements that are the only child of their parent.<br />
  53. 53. Visibility Filter<br />:hidden Selector: Selects all elements that are hidden.<br />:visible Selector: Selects all elements that are visible.<br />
  54. 54. Form<br />:button Selector: Selects all button elements and elements of type button.<br />:checkbox Selector: Selects all elements of type checkbox.<br />:checked Selector: Matches all elements that are checked.(radio buttons and checkboxes)<br />:disabled Selector: Selects all elements that are disabled.<br />:enabled Selector: Selects all elements that are enabled.<br />
  55. 55. Form<br />:file Selector: Selects all elements of type file.<br />:image Selector: Selects all elements of type image.<br />:input Selector: Selects all input, textarea, select and button elements.<br />:password Selector: Selects all elements of type password.<br />:radio Selector: Selects all elements of type radio.<br />
  56. 56. Form<br />:selected Selector: Selects all elements that are selected.<br />:submit Selector: Selects all elements of type submit.<br />:text Selector: Selects all elements of type text.<br />
  57. 57. Queries?<br />THANK YOU<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×