j query introduction and jquery selectors
DESCRIPTION
explained jquery in details and jquery selectorsTRANSCRIPT
Presentation by Anand
IntroductionjQuery is a cross-browser JavaScript library designed to simplify the client-side
scripting of HTML.
• It is the most popular JavaScript library in use today.•It greatly simplifies JavaScript programming.•Free open source software, dual-licensed under the MIT License and the GNU.
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.
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.
Features of jQuery•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
History of jQuery•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
Adding the jQuery libraryTwo ways:•Download the jquery file and include in the project.<head><script type="text/javascript" src="jquery.js"></script></head>
•Using google or microsoft CDN.<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script></head>
The Document Ready FunctionAll jQuery methods, are kept inside a document.ready() function:
$(document).ready(function(){
// jQuery functions go here...
});
This is to prevent any jQuery code from running before the document is finished loading (is ready).Here are some examples of actions that can fail if functions are run before the document is fully loaded:•Trying to hide an element that doesn't exist•Trying to get the size of an image that is not loaded
Jquery syntax<html><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><button class=“buttonstyle”>Hide</button</body></html>
Jquery Object and $ symbolThe jQuery Object•Contains a reference to the DOM element•Has properties of the DOM element, like text, html, tags•Can be used to manipulate the DOM directly•Can be nested
The $ symbol•$ is the Shortcut for the jQuery Global Class•Use it to access any part of the DOM•Search by CSS to get the element.•Returns a jQuery object which can be further manipulated
What is in jQuery?•SELCTORS•ATTRIBUTES•TRAVERSING•MANUPULATION•CSS•EVENTS•AJAX•UTILITIES•JQUERY CORE•JQUERY UI
SELECTORSSeven Types•Basic•Heirarchy•Basic Filter•Content Filter•Attribute•Child Filter•Visibility Filter•Form
Basic selectors•All Selector(“*”) : selects all elements
•Class Selector(“.class”) : matches all elements with the given class name
•Element Selector(“element”): selects all elements with the given tag name
•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
HierarchyChild Selector(“parent > child”): Selects all direct child elements specified by "child" of elements specified by "parent".
Descendant Selector (“ancestor descendant”): Selects all elements that are descendants of a given ancestor.
Next Adjacent Selector(“prev + next”): Selects all next elements matching "next" that are immediately preceded by a sibling "prev".
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.
Basic Filter:animated Selector : Select all elements that are in the progress of an animation at the time the selector is run.
:eq() Selector: Select the element at index n within the matched set.
:even Selector: Selects even elements, zero-indexed.
:first Selector: Selects the first matched element.
:gt() Selector: Select all elements at an index greater than index within the matched set.
Content Filter: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 are the parent of another element, including text nodes.
Attribute[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 (-).
[name*="value"]: Selects elements that have the specified attribute with a value containing the given substring.
[name~="value"]: Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.
[name$="value"]: Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.
Attribute[name="value"]: Selects elements that have the specified attribute with a value exactly equal to a certain value.
[name!="value"]: Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value.
[name^="value"]: Selects elements that have the specified attribute with a value beginning exactly with a given string.
[name]: Selects elements that have the specified attribute, with any value.
[name="value"][name2="value2"]: Matches elements that match all of the specified attribute filters.
Child Filter: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.
:nth-child() Selector: Selects all elements that are the nth-child of their parent.
:only-child Selector: Selects all elements that are the only child of their parent.
Visibility Filter:hidden Selector: Selects all elements that are hidden.
:visible Selector: Selects all elements that are visible.
Form:button Selector: Selects all button elements and elements of type button.
:checkbox Selector: Selects all elements of type checkbox.
:checked Selector: Matches all elements that are checked.(radio buttons and checkboxes)
:disabled Selector: Selects all elements that are disabled.
:enabled Selector: Selects all elements that are enabled.
Form:file Selector: Selects all elements of type file.
:image Selector: Selects all elements of type image.
:input Selector: Selects all input, textarea, select and button elements.
:password Selector: Selects all elements of type password.
:radio Selector: Selects all elements of type radio.
Form:selected Selector: Selects all elements that are selected.
:submit Selector: Selects all elements of type submit.
:text Selector: Selects all elements of type text.
Queries?
THANK YOU