jQuery

With jQuery you select (query) HTML elements and perform "actions" on them.

$ is a wrapper to add the extra functionality jQuery offers. $(this)[0]=this     ,      $("#myDiv")[0] == document.getElementById("myDiv");


One aspect of jQuery that can be startling at first is that one method may serve as both a getter and setter (or, an accessor and a mutator). That means that html("<br/>") will insert content into the current element and return a jQuery object, while html() (with no arguments) will not change anything, but will return the contents of the element.




$(selector) ==== jquery(selector)

p a
refers to the group of all links (<a> elements) that are nested inside a <p> element.

http://www.w3.org/TR/CSS2/selector.html

PatternMeaningDescribed in section
*Matches any element.Universal selector
EMatches any E element (i.e., an element of type E).Type selectors
E FMatches any F element that is a descendant of an E element.Descendant selectors
E > FMatches any F element that is a child of an element E.Child selectors
E:first-childMatches element E when E is the first child of its parent. The :first-child pseudo-class
E:link
E:visited
Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). The link pseudo-classes
E:active
E:hover
E:focus
Matches E during certain user actions. The dynamic pseudo-classes
E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined). The :lang() pseudo-class
E + FMatches any F element immediately preceded by a sibling element E.Adjacent selectors
E[foo]Matches any E element with the "foo" attribute set (whatever the value). Attribute selectors
E[foo="warning"]Matches any E element whose "foo" attribute value is exactly equal to "warning". Attribute selectors
E[foo~="warning"]Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". Attribute selectors
E[lang|="en"]Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en". Attribute selectors
DIV.warningLanguage specific. (In HTML, the same as DIV[class~="warning"].) Class selectors
E#myidMatches any E element with ID equal to "myid".ID selectors


For example, to retrieve the group of links nested inside a <p> element, we use the following
$("p a")

Some more selector examples:

Syntax Description
$(this) Current HTML element
$("p") All <p> elements
$("p.intro") All <p> elements with class="intro"
$(".intro") All elements with class="intro"
$("#intro") The element with id="intro"
$("ul li:first") The first <li> element of each <ul>
$("[href$='.jpg']") All elements with attribute href containing ".jpg"
$("div#intro .head") All elements with class="head"
inside a <div> element with id="intro"


The $() function (an alias for the jQuery() function) returns a special JavaScript object containing an array of the DOM elements that match the selector.
This object possesses a large number of useful predefined methods that can act on the group of elements. It is a wrapper because it wraps the matching element(s) with extended functionality.

Below shows a list of java script functions, there you can see that a variable can be a function. There is no difference between objects or functions, down here you can see that variable func1 is a function but meanwhile has a property (attribute) which is another function. Link

    <script type = "text/javascript">
            window.onload = function()
            {
                // Define function objects
                var func1   = function() { alert("1hello from func1"); }
                func1.func2 = function() { alert("2hello from func1.func2"); };
                var _       = function() { alert("3hello from _"); }
                var \u0024  = function() { alert("4hello from $ defined as \u0024"); }
               //var Ø       = function() { alert("5hello from Ø"); }
                var $$$$$   = function() { alert("6hello from $$$$$"); }
                var $func$  = function() { alert("7hello from $func$"); }
                var __      = function() { alert("8hello from __"); }
                _.$         = function() { alert("9hello from _.$"); }
                __.__       = function() { alert("10hello from __.__"); }
                $.member    = function() { alert("11hello from $.member"); }

                // Call functions defined above one by one
                func1();
                func1.func2();
                _();
                $();
         //       Ø();
                $$$$$();
                $func$();
                $.member();
                _.$();
                __();
                __.__();
            }
     </script>

Callback

$.get('myhtmlpage.html', myCallBack);
    incase of parameters:
    WRONG    $.get('myhtmlpage.html', myCallBack(param1, param2)); //WRONG. evaluates the function before execution
    
RIGHT    $.get('myhtmlpage.html', function(){ //RIGHT
                 myCallBack(param1, param2);
              });

jQuery Manipulation

jQuery Events

Event Function Binds a Function to
(document).ready(function)   The ready event of a document
(when an HTML document is ready to use)
*  
(selector).click(function) The click event of selected elements
(selector).dblclick(function) The double click event of selected elements
(selector).focus(function) The focus event of selected elements
(selector).mouseover(function) The mouse over event of selected elements

jQuery Effects

Function Description
(selector).hide() Hide selected elements
(selector).show() Show selected elements
(selector).toggle() Toggle (between hide and show) selected elements
(selector).slideDown() Slide-down (show) selected elements
(selector).slideUp() Slide-up (hide) selected elements
(selector).slideToggle() Toggle slide-up and slide-down of selected elements
(selector).fadeIn() Fade in selected elements
(selector).fadeOut() Fade out selected elements
(selector).fadeTo() Fadeout selected elements to an opacity
(selector).animation()
Run a custom animation on selected elements

jQuery HTML Manipulation Functions

These functions work for both XML documents and HTML documents. Exception: html()

Manipulate Description
(selector).html(content) Set the content (inner HTML) of selected elements
(selector).text(text) same as html(), but tags will be escaped
   
Getting Contents  
(selector).html() Get the contents (inner HTML) of the first selected element
(selector).text() Get the text content of all selected elements (combined)
   
Adding Content  
(selector).after(content) Add content after selected elements
(selector).before(content) Add content before selected elements
(selector).insertAfter(selector) Add selected elements after selected elements
(selector).insertBefore(selector) Add selected elements before selected elements
   
Adding Inner Content  
(selector).append(content) Append content to the inner content of selected elements
(selector).prepend(content) "Prepend" content to the inner content of selected elements
(selector).appendTo(selector) Append selected elements to the inner content of selected elements
(selector).prependTo(selector) "Prepend" selected elements to the inner content of selected elements
   
Wrapping  
(selector).wrap(content) Wrap selected elements within a content
(selector).wrapAll(content) Wrap selected elements into one content
(selector).wrap(element) Wrap selected elements inside a new DOM element
(selector).wrapAll(element) Wrap selected elements into one new DOM element
(selector).wrapinner(content) Wrap selected inner child contents within a content
(selector).wrapinner(element) Wrap selected inner child contents within a DOM element
   
Copy, Replace, Remove  
(selector).replaceAll(selector) Replace selected elements with selected elements
(selector).replaceWidth(content) Replace selected elements with new content
(selector).empty() Remove all child elements from selected elements
(selector).remove() Remove all selected elements
(selector).clone() Clone all selected elements

(selector) jQuery element selector syntax

(content) Content including tags.

(text) Text content only. Tags will be escaped.

(element) A DOM element object.

jQuery CSS Manipulation Functions

CSS Properties Description
(selector).css(name,value) Set the value of one style property for all selected elements
(selector).css({properties}) Set multiple style properties for all selected elements
(selector).css(name) Get the style property value of the first selected element
   
CSS Size  
(selector).height() Get the pixel height of the first selected element
(selector).height(value) Set the height of all selected elements
(selector).width() Get the pixel width of the first selected element
(selector).width(value) Set the width of all selected elements
   
CSS Positioning  
(selector).offset() Get the pixel offset of the first selected element
(selector).offsetParent() Get the parent pixel offset of the first selected element
(selector).position() Get the top position of the first selected element
   
(selector).scrollTop() Get the scroll top offset of the first selected element
(selector).scrollTop(value) Set the scroll top offset of all selected elements
(selector).scrollLeft() Get the scroll left offset of the first selected element
(selector).scrollLeft(value) Set the scroll left offset of all selected elements
 

jQuery Selectors

Selector Example Selects
* $("*") All elements
#id $("#lastname") The element with id=lastname
.class $(".intro") All elements with class="intro"
element $("p") All <p> elements
.class.class $(".intro.demo") All elements with class=intro and class=demo
     
:first $("p:first") The first <p> element
:last $("p:last") The last <p> element
:even $("tr:even") All even <tr> elements
:odd $("tr:odd") All odd <tr> elements
     
:eq(index) $("ul li:eq(3)") The third element in a list
:gt(no) $("ul li:gt(3)") List elements with an index greater than 3
:lt(no) $("ul li:lt(3)") List elements with an index less than 3
:not(selector) $("input:not(:empty)") All input elements that are not empty
     
:header $(":header") All header elements <h1><h2>...
:animated   All animated elements
     
:contains(text) $(":contains('W3Schools')") All elements witch contains the text
:empty $(":empty") All elements with no child (elements) nodes
:hidden $("p:hidden") All hidden <p> elements
:visible $("table:visible") All visible tables
     
s1,s2,s3 $("th,td,.intro") All elements with matching selectors
     
[attribute] $("[href]") All elements with an href attribute
[attribute=value] $("[href='#']") All elements with href attribute value="#"
[attribute!=value] $("[href!='#']") All elements with href attribute value<>"#"
[attribute$=value] $("[href$='.jpg']") All elements with href attribute value containing ",jpg"
     
     
:input $(":input") All <input> elements
:text $(":text") All <input> elements with type="text"
:password $(":password") All <input> elements with type="password"
:radio $(":radio") All <input> elements with type="radio"
:checkbox $(":checkbox") All <input> elements with type="checkbox"
:submit $(":submit") All <input> elements with type="submit"
:reset $(":reset") All <input> elements with type="reset"
:button $(":button") All <input> elements with type="button"
:image $(":img" All <input> elements with type="img"
:file $(":file") All <input> elements with type="file"
     
:enabled $(":enabled") All enabled input elements
:disabled $(":disabled") All disabled input elements
:selected $(":selected") All selected input elements
:checked $(":checked") All checked input elements
     


p

Comments