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| Pattern | Meaning | Described in section |
|---|
| * | Matches any element. | Universal
selector |
| E | Matches any E element (i.e., an element of type E). | Type
selectors |
| E F | Matches any F element that is a descendant of
an E element. | Descendant
selectors |
| E > F | Matches any F element that is a child of
an element E. | Child selectors |
| E:first-child | Matches 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 + F | Matches 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.warning | Language specific. (In HTML, the same
as DIV[class~="warning"].)
| Class selectors |
| E#myid | Matches 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