Jquery for Beginners
Download as ODP, PDF1 like239 views
Abdul Baquee Shaikh has 6.5 years of experience in both front-end and back-end development, specializing in web applications for social media. The document details jQuery's features, selectors, events, effects, and traversing methods, emphasizing its usefulness in enhancing web pages. Additionally, it addresses conflicts with other JavaScript libraries and introduces the noconflict() method for avoiding such issues.
![Attribute Filters
Has Attribute Selector [name]
- Selects elements that have the specified attribute, with any value.
Attribute Equals Selector [name=”value”]
- Selects elements that have the specified attribute with a value exactly equal to a certain value.
Attribute Not Equal Selector [name!=”value”]
- Select elements that either don't have the specified attribute, or do have the specified attribute but not with a
certain value.
Attribute Starts With Selector [name^=”value”]
- Selects elements that have the specified attribute with a value beginning exactly with a given string.
Attribute Ends With Selector [name$=”value”]
- Selects elements that have the specified attribute with a value ending exactly with a given string. The
comparison is case sensitive.
Attribute Contains Selector [name*=”value”]
- Selects elements that have the specified attribute with a value containing a given substring.
Multiple Attribute Selector [name=”value”][name2=”value2″]
- Matches elements that match all of the specified attribute filters.](https://image.slidesharecdn.com/jquery-presentation-161020065809/85/Jquery-for-Beginners-16-320.jpg)
Jquery for Beginners
- 1. About Myself ● Abdul Baquee Shaikh ● Demostrable knowledge in front-end/back-end tools (6.5 years). ● I am specializing in building web apps for social media platforms ● My hobbies is learning new tools in front-end and back-end development & I love to share knowledge Github Links: – https://github.com/abdulbaquee/ – http://www.socialscript.in/jqueryselectors/
- 2. Why jQuery ? There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable. Biggest companies on the Web use jQuery: ➢ Google ➢ Microsoft ➢ IBM ➢ Netflix
- 3. JavaScript VS jQuery Jquery $ (‘body’) .css (‘background’, ‘#ccc’); JavaScript Function changeBackground(color) { Document.body.style.background = color; } Onload=”changeBackground (‘red’);”
- 4. jQuery jQuery is a fast, small, cross-platform and feature- rich JavaScript Library. It's greatly simplifies JavaScript programming and it's easy to learn.
- 5. Features of jQuery ➢ HTML/DOM manipulation(Document Object Model) ➢ CSS manipulation ➢ HTML event methods ➢ Effects and animations ➢ AJAX ➢ Utilities (utility functions or functions that affect global properties and behaviour)
- 6. Topics 1. Selectors 2. Events 3. Effects 4. Traversing 5. noConflict()
- 7. What You Should Already Know ? ➢ HTML ➢ CSS ➢ JavaScript
- 9. What Is Jquery Selectors ? A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. Once an element is selected then we can perform various operations on that selected element.
- 10. Lists of jQuery Selectors ➢ Basic Selectors ➢ Hierarchy Selectors ➢ Basic Filters ➢ Content Filters ➢ Visibility Filters ➢ Attribute Filters ➢ Child Filters ➢ Forms ➢ Form Filters
- 11. Basic Selectors All Selector (“*”) - Selects all elements. Class Selector (“.class”) - Selects all elements with the given class. ID Selector (“#id”) - Selects a single element with the given id attribute. Multiple Selector (“selector1, selector2, selectorN”) - Selects the combined results of all the specified selectors.
- 12. Hierarchy Selectors Descendant Selector (“div code”) - A selector to filter the descendant elements. Child Selector (“parent > child”) - A selector to filter the child elements. Next Adjacent Selector (“prev + next”) - A selector to match the element that is next to the first selector. Next Siblings Selector (“prev ~ siblings”) - A selector to filter elements that are the following siblings of the first selector.
- 13. Basic Filters :first Selector - Selects the first matched DOM element. :last Selector - Selects the last matched element. :not() Selector - A selector with which to filter by. :even Selector Or :odd Selector - Selects even/odd elements, zero-indexed :eq(n) Selector - Zero-based index of the element to match. :gt(n) Selector - Select all elements at an index greater than index within the matched set. :lt(n) Selector - Select all elements at an index less than index within the matched set. :header Selector -> Selects all elements that are headers, like h1, h2, h3 and so on.
- 14. Content Filters :contains() Selector - Select all elements that contain the specified text. :empty Selector - Select all elements that have no children (including text nodes). :has() Selector - Selects elements which contain at least one element that matches the specified selector. :parent Selector - Select all elements that have at least one child node (either an element or text).
- 15. Visibility Filters :hidden Selector - Selects all elements that are hidden. :visible Selector - Selects all elements that are visible.
- 16. Attribute Filters Has Attribute Selector [name] - Selects elements that have the specified attribute, with any value. Attribute Equals Selector [name=”value”] - Selects elements that have the specified attribute with a value exactly equal to a certain value. Attribute Not Equal Selector [name!=”value”] - Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value. Attribute Starts With Selector [name^=”value”] - Selects elements that have the specified attribute with a value beginning exactly with a given string. Attribute Ends With Selector [name$=”value”] - Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive. Attribute Contains Selector [name*=”value”] - Selects elements that have the specified attribute with a value containing a given substring. Multiple Attribute Selector [name=”value”][name2=”value2″] - Matches elements that match all of the specified attribute filters.
- 17. Child Filters :nth-child() Selector - Selects all elements that are the nth-child of their parent. :first-child Selector - Selects all elements that are the first child of their parent. :last-child Selector - Selects all elements that are the last child of their parent. :only-child Selector - Selects all elements that are the only child of their parent.
- 18. Forms :input Selector - Selects all input, textarea, select and button elements. :text Selector - Selects all input elements of type text. :password Selector - Selects all elements of type password. :radio Selector - Selects all elements of type radio. :checkbox Selector - Selects all elements of type checkbox. :submit Selector - Selects all elements of type submit. :image Selector - Selects all elements of type image. :reset Selector - Selects all elements of type reset. :button Selector - Selects all button elements and elements of type button. :file Selector - Selects all elements of type file. :hidden Selector Selects all elements that are hidden.
- 19. Form Filters :enabled Selector - Selects all elements that are enabled. :disabled Selector - Selects all elements that are disabled. :checked Selector - Matches all elements that are checked or selected. :selected Selector - Selects all elements that are selected.
- 20. Jquery Events
- 21. Jquery Events jQuery Events are used to register behaviors to take effect when the user interacts with the browser, and to further manipulate those registered behaviors. Lists of events by groups ● Browser Events – .error(), .resize(), .scroll() ● Document Loading – .load(), .ready(), .unload(), ● Event Handler Attachment – .bind(), .delegate(), .die(), jQuery.proxy(), .live(), .off(), .on(), .one(), .trigger(), .triggerHandler(), .unbind(), .undelegate() ● Event Object – Common Event Properties ● target,relatedTarget, pageX, pageY, which, metaKey – Other Properties ● event.currentTarget, event.data, event.delegateTarget, event.isDefaultPrevented(), event.isImmediatePropagationStopped(), event.isPropagationStopped(), event.metaKey, event.namespace, event.pageX, event.pageY, event.preventDefault(), event.relatedTarget, event.result, event.stopImmediatePropagation(), event.stopPropagation(), event.target, event.timeStamp, event.type, event.which Continue...
- 22. ● Form Event – .blur(), .change(), .focus(), .focusin(), .focusout(), .select(), .submit() Continue...
- 23. jQuery Effects
- 24. Effects The jQuery library provides several techniques for adding animation to a web page. These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects. Lists of Common Effects .animate() – Perform a custom animation of a set of CSS properties. .clearQueue() – Remove from the queue all items that have not yet been run. .delay() – Set a timer to delay execution of subsequent items in the queue. .dequeue() – Execute the next function on the queue for the matched elements. .fadeIn() – Display the matched elements by fading them to opaque. .fadeOut() – Hide the matched elements by fading them to transparent. .fadeTo() – Adjust the opacity of the matched elements. .hide() – Hide the matched elements.
- 26. What is Traversing? jQuery traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire. Traversing can be broken down into three basic parts: parents, children, and siblings
- 27. The image above illustrates a family tree. With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the family tree, starting from the selected (current) element. This movement is called traversing - or moving through - the DOM.
- 28. Commonly used JQuery traversal Methods ➢ add ➢ Create a new jQuery object with elements added to the set of matched elements. ➢ children() ➢ Get the children of each element in the set of matched elements, optionally filtered by a selector. ➢ closest() ➢ Returns the first ancestor of the selected element ➢ parent() ➢ Get the parent of each element in the current set of matched elements, optionally filtered by a selector. ➢ siblings() ➢ Get the siblings of each element in the set of matched elements, optionally filtered by a selector. ➢ each() ➢ Iterate over a jQuery object, executing a function for each matched element. ➢ first() ➢ Reduce the set of matched elements to the first in the set. ➢ last() ➢ Reduce the set of matched elements to the final one in the set. ➢ next() ➢ Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector. ➢ prev() ➢ Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.
- 29. jQuery - The noConflict() Method jQuery and Other JavaScript Frameworks As you already know; jQuery uses the $ sign as a shortcut for jQuery. There are many other popular JavaScript frameworks like: Angular, Backbone, Ember, Knockout, and more. What if other JavaScript frameworks also use the $ sign as a shortcut? If two different frameworks are using the same shortcut, one of them might stop working. The jQuery team have already thought about this, and implemented the noConflict() method. The jQuery noConflict() Method The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it.
- 30. Examples Example1: $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery is still working!"); }); }); Example2: var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery is still working!"); }); }); Example3: $.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery is still working!"); }); });
- 31. Other Uses Of jQuery ? ➢ Server-side programming ➢ Game development ➢ Creating desktop applications
- 32. What is Next ??? 1. Ajax Event Handlers 2. JavaScript MVC 3. Good part of JavaScript 4. JavaScript code organization best practices