In my previous post we worked on JQuery-Core. Here I am going to explain JQuery-DOM. After this post you can write your jquery script easily. So please pay attention as much as possible.
2. DOM
2.1 Attributes
2.1.1 attr(String)
attr(String name) returns Object
Access a property on the first matched element. This method makes it easy to retrieve a
property value from the first matched element.
Example:
Returns the src attribute from the first image in the document.
$("img").attr("src");
HTML:
<img src="test.jpg"/>
Result:
test.jpg
2.1.2 attr(Map)
attr(Map properties) returns jQuery
Set a key/value object as properties to all matched elements.
This serves as the best way to set a large number of properties on all matched elements.
Example:
Sets src and alt attributes to all images.
$("img").attr({ src: "test.jpg", alt: "Test Image" });
HTML:
<img/>
Result:
<img src="test.jpg" alt="Test Image"/>
2.1.3 attr(String,Object)
attr(String key, Object value) returns jQuery
Set a single property to a value, on all matched elements.
Can compute values provided as ${formula}, see second example.
Note that you can't set the name property of input elements in IE. Use $(html) or
.append(html) or .html(html) to create elements on the fly including the name property.
Example:
Sets src attribute to all images.
$("img").attr("src","test.jpg");
HTML:
<img/>
Result:
<img src="test.jpg"/>
Example:
Sets title attribute from src attribute, a shortcut for attr(String,Function)
$("img").attr("title", "${this.src}");
HTML:
<img src="test.jpg" />
Result:
<img src="test.jpg" title="test.jpg" />
2.1.4 attr(String,Function)
attr(String key, Function value) returns jQuery
Set a single property to a computed value, on all matched elements.
Instead of a value, a function is provided, that computes the value.
Example:
Sets title attribute from src attribute.
$("img").attr("title", function() { return this.src });
HTML:
<img src="test.jpg" />
Result:
<img src="test.jpg" title="test.jpg" />
Example:
Enumerate title attribute.
$("img").attr("title", function(index) { return this.title + (i + 1); });
HTML:
<img title="pic" /><img title="pic" /><img title="pic" />
Result:
<img title="pic1" /><img title="pic2" /><img title="pic3" />
2.1.5 text()
text() returns String
Get the text contents of all matched elements. The result is a string that contains the
combined text contents of all matched elements. This method works on both HTML and XML
documents.
Example:
Gets the concatenated text of all paragraphs
$("p").text();
HTML:
<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>
Result:
Test Paragraph.Paraparagraph
2.1.6 text(String)
text(String val) returns String
Set the text contents of all matched elements.
Similar to html(), but escapes HTML (replace "<" and ">" with their HTML entities).
Example:
Sets the text of all paragraphs.
$("p").text("<b>Some</b> new text.");
HTML:
<p>Test Paragraph.</p>
Result:
<p><b>Some</b> new text.</p>
Example:
Sets the text of all paragraphs.
$("p").text("<b>Some</b> new text.", true);
HTML:
<p>Test Paragraph.</p>
Result:
<p>Some new text.</p>
2.1.7 val()
val() returns String
Get the current value of the first matched element.
Example:
$("input").val();
HTML:
<input type="text" value="some text"/>
Result:
"some text"
2.1.8 val(String)
val(String val) returns jQuery
Set the value of every matched element.
Example:
$("input").val("test");
HTML:
<input type="text" value="some text"/>
Result:
<input type="text" value="test"/>
2.1.9 html()
html() returns String
Get the html contents of the first matched element. This property is not available on XML
documents.
Example:
$("div").html();
HTML:
<div><input/></div>
Result:
<input/>
2.1.10 html(String)
html(String val) returns jQuery
Set the html contents of every matched element. This property is not available on XML
documents.
Example:
$("div").html("<b>new stuff</b>");
HTML:
<div><input/></div>
Result:
<div><b>new stuff</b></div>
2.1.11 removeAttr(String)
removeAttr(String name) returns jQuery
Remove an attribute from each of the matched elements.
Example:
$("input").removeAttr("disabled")
HTML:
<input disabled="disabled"/>
Result:
<input/>
2.1.12 addClass(String)
addClass(String class) returns jQuery
Adds the specified class(es) to each of the set of matched elements.
Example:
$("p").addClass("selected")
HTML:
<p>Hello</p>
Result:
[ <p class="selected">Hello</p> ]
Example:
$("p").addClass("selected highlight")
HTML:
<p>Hello</p>
Result:
[ <p class="selected highlight">Hello</p> ]
2.1.13 removeClass(String)
removeClass(String class) returns jQuery
Removes all or the specified class(es) from the set of matched elements.
Example:
$("p").removeClass()
HTML:
<p class="selected">Hello</p>
Result:
[ <p>Hello</p> ]
Example:
$("p").removeClass("selected")
HTML:
<p class="selected first">Hello</p>
Result:
[ <p class="first">Hello</p> ]
Example:
$("p").removeClass("selected highlight")
HTML:
<p class="highlight selected first">Hello</p>
Result:
[ <p class="first">Hello</p> ]
2.1.14 toggleClass(String)
toggleClass(String class) returns jQuery
Adds the specified class if it is not present, removes it if it is present.
Example:
$("p").toggleClass("selected")
HTML:
<p>Hello</p><p class="selected">Hello Again</p>
Result:
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
2.2 Manipulation
2.2.1 wrap(String)
wrap(String html) returns jQuery
Wrap all matched elements with a structure of other elements. This wrapping process is most
useful for injecting additional stucture into a document, without ruining the original semantic
qualities of a document.
This works by going through the first element provided (which is generated, on the fly, from
the provided HTML) and finds the deepest ancestor element within its structure - it is that
element that will en-wrap everything else.
This does not work with elements that contain text. Any necessary text must be added after
the wrapping is done.
Example:
$("p").wrap("<div class='wrap'></div>");
HTML:
<p>Test Paragraph.</p>
Result:
<div class='wrap'><p>Test Paragraph.</p></div>
2.2.2 wrap(Element)
wrap(Element elem) returns jQuery
Wrap all matched elements with a structure of other elements. This wrapping process is most
useful for injecting additional stucture into a document, without ruining the original semantic
qualities of a document.
This works by going through the first element provided and finding the deepest ancestor
element within its structure - it is that element that will en-wrap everything else.
This does not work with elements that contain text. Any necessary text must be added after
the wrapping is done.
Example:
$("p").wrap( document.getElementById('content') );
HTML:
<p>Test Paragraph.</p><div id="content"></div>
Result:
<div id="content"><p>Test Paragraph.</p></div>
2.2.3 append(<Content>)
append(<Content> content) returns jQuery
Append content to the inside of every matched element.
This operation is similar to doing an appendChild to all the specified elements, adding them
into the document.
Example:
Appends some HTML to all paragraphs.
$("p").append("<b>Hello</b>");
HTML:
<p>I would like to say: </p>
Result:
<p>I would like to say: <b>Hello</b></p>
Example:
Appends an Element to all paragraphs.
$("p").append( $("#foo")[0] );
HTML:
<p>I would like to say: </p><b id="foo">Hello</b>
Result:
<p>I would like to say: <b id="foo">Hello</b></p>
Example:
Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.
$("p").append( $("b") );
HTML:
<p>I would like to say: </p><b>Hello</b>
Result:
<p>I would like to say: <b>Hello</b></p>
2.2.4 prepend(<Content>)
prepend(<Content> content) returns jQuery
Prepend content to the inside of every matched element.
This operation is the best way to insert elements inside, at the beginning, of all matched
elements.
Example:
Prepends some HTML to all paragraphs.
$("p").prepend("<b>Hello</b>");
HTML:
<p>I would like to say: </p>
Result:
<p><b>Hello</b>I would like to say: </p>
Example:
Prepends an Element to all paragraphs.
$("p").prepend( $("#foo")[0] );
HTML:
<p>I would like to say: </p><b id="foo">Hello</b>
Result:
<p><b id="foo">Hello</b>I would like to say: </p>
Example:
Prepends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.
$("p").prepend( $("b") );
HTML:
<p>I would like to say: </p><b>Hello</b>
Result:
<p><b>Hello</b>I would like to say: </p>
2.2.5 before(<Content>)
before(<Content> content) returns jQuery
Insert content before each of the matched elements.
Example:
Inserts some HTML before all paragraphs.
$("p").before("<b>Hello</b>");
HTML:
<p>I would like to say: </p>
Result:
<b>Hello</b><p>I would like to say: </p>
Example:
Inserts an Element before all paragraphs.
$("p").before( $("#foo")[0] );
HTML:
<p>I would like to say: </p><b id="foo">Hello</b>
Result:
<b id="foo">Hello</b><p>I would like to say: </p>
Example:
Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.
$("p").before( $("b") );
HTML:
<p>I would like to say: </p><b>Hello</b>Result:
<b>Hello</b><p>I would like to say: </p>
2.2.6 after(<Content>)
after(<Content> content) returns jQuery
Insert content after each of the matched elements.
Example:
Inserts some HTML after all paragraphs.
$("p").after("<b>Hello</b>");
HTML:
<p>I would like to say: </p>
Result:
<p>I would like to say: </p><b>Hello</b>
Example:
Inserts an Element after all paragraphs.
$("p").after( $("#foo")[0] );
HTML:
<b id="foo">Hello</b><p>I would like to say: </p>
Result:
<p>I would like to say: </p><b id="foo">Hello</b>
Example:
Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.
$("p").after( $("b") );
HTML:
<b>Hello</b><p>I would like to say: </p>Result:
<p>I would like to say: </p><b>Hello</b>
2.2.7 clone(Boolean)
clone(Boolean deep) returns jQuery
Clone matched DOM Elements and select the clones.
This is useful for moving copies of the elements to another location in the DOM.
Example:
Clones all b elements (and selects the clones) and prepends them to all paragraphs.
$("b").clone().prependTo("p");
HTML:
<b>Hello</b><p>, how are you?</p>
Result:
<b>Hello</b><p><b>Hello</b>, how are you?</p>
2.2.8 appendTo(<Content>)
appendTo(<Content> content) returns jQuery
Append all of the matched elements to another, specified, set of elements. This operation is,
essentially, the reverse of doing a regular $(A).append(B), in that instead of appending B to
A, you're appending A to B.
Example:
Appends all paragraphs to the element with the ID "foo"
$("p").appendTo("#foo");
HTML:
<p>I would like to say: </p><div id="foo"></div>
Result:
<div id="foo"><p>I would like to say: </p></div>
2.2.9 prependTo(<Content>)
prependTo(<Content> content) returns jQuery
Prepend all of the matched elements to another, specified, set of elements. This operation is,
essentially, the reverse of doing a regular $(A).prepend(B), in that instead of prepending B to
A, you're prepending A to B.
Example:
Prepends all paragraphs to the element with the ID "foo"
$("p").prependTo("#foo");
HTML:
<p>I would like to say: </p><div id="foo"><b>Hello</b></div>
Result:
<div id="foo"><p>I would like to say: </p><b>Hello</b></div>
2.2.10 insertBefore(<Content>)
insertBefore(<Content> content) returns jQuery
Insert all of the matched elements before another, specified, set of elements. This operation
is, essentially, the reverse of doing a regular $(A).before(B), in that instead of inserting B
before A, you're inserting A before B.
Example:
Same as $("#foo").before("p")
$("p").insertBefore("#foo");
HTML:
<div id="foo">Hello</div><p>I would like to say: </p>
Result:
<p>I would like to say: </p><div id="foo">Hello</div>
2.2.11 insertAfter(<Content>)
insertAfter(<Content> content) returns jQuery
Insert all of the matched elements after another, specified, set of elements. This operation is,
essentially, the reverse of doing a regular $(A).after(B), in that instead of inserting B after A,
you're inserting A after B.
Example:
Same as $("#foo").after("p")
$("p").insertAfter("#foo");
HTML:
<p>I would like to say: </p><div id="foo">Hello</div>
Result:
<div id="foo">Hello</div><p>I would like to say: </p>
2.2.12 remove(String)
remove(String expr) returns jQuery
Removes all matched elements from the DOM. This does NOT remove them from the jQuery
object, allowing you to use the matched elements further.
Can be filtered with an optional expressions.
Example:
$("p").remove();
HTML:
<p>Hello</p> how are <p>you?</p>
Result:
how are
Example:
$("p").remove(".hello");
HTML:
<p class="hello">Hello</p> how are <p>you?</p>
Result:
how are <p>you?</p>
2.2.13 empty()
empty() returns jQuery
Removes all child nodes from the set of matched elements.
Example:
$("p").empty()
HTML:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
Result:
[ <p></p> ]
2.3 Traversing
2.3.1 end()
end() returns jQuery
End the most recent 'destructive' operation, reverting the list of matched elements back to its
previous state. After an end operation, the list of matched elements will revert to the last state
of matched elements.
If there was no destructive operation before, an empty set is returned.
Example:
Selects all paragraphs, finds span elements inside these, and reverts the selection back to
the paragraphs.
$("p").find("span").end();
HTML:
<p><span>Hello</span>, how are you?</p>
Result:
[ <p>...</p> ]
2.3.2 find(String)
find(String expr) returns jQuery
Searches for all elements that match the specified expression. This method is a good way to
find additional descendant elements with which to process.
All searching is done using a jQuery expression. The expression can be written using CSS 1-
3 Selector syntax, or basic XPath.
Example:
Starts with all paragraphs and searches for descendant span elements, same as $("p span")
$("p").find("span");
HTML:
<p><span>Hello</span>, how are you?</p>
Result:
[ <span>Hello</span> ]
2.3.3 filter(String)
filter(String expression) returns jQuery
Removes all elements from the set of matched elements that do not match the specified
expression(s). This method is used to narrow down the results of a search.
Provide a comma-separated list of expressions to apply multiple filters at once.
Example:
Selects all paragraphs and removes those without a class "selected".
$("p").filter(".selected")
HTML:
<p class="selected">Hello</p><p>How are you?</p>
Result:
[ <p class="selected">Hello</p> ]
Example:
Selects all paragraphs and removes those without class "selected" and being the first one.
$("p").filter(".selected, :first")
HTML:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
Result:
[ <p>Hello</p>, <p class="selected">And Again</p> ]
2.3.4 filter(Function)
filter(Function filter) returns jQuery
Removes all elements from the set of matched elements that do not pass the specified filter.
This method is used to narrow down the results of a search.
Example:
Remove all elements that have a child ol element
$("p").filter(function(index) {
return $("ol", this).length == 0;
})
HTML:
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
Result:
[ <p>How are you?</p> ]
2.3.5 not(Element)
not(Element el) returns jQuery
Removes the specified Element from the set of matched elements. This method is used to
remove a single Element from a jQuery object.
Example:
Removes the element with the ID "selected" from the set of all paragraphs.
$("p").not( $("#selected")[0] )
HTML:
<p>Hello</p><p id="selected">Hello Again</p>
Result:
[ <p>Hello</p> ]
2.3.6 not(String)
not(String expr) returns jQuery
Removes elements matching the specified expression from the set of matched elements.
This method is used to remove one or more elements from a jQuery object.
Example:
Removes the element with the ID "selected" from the set of all paragraphs.
$("p").not("#selected")
HTML:
<p>Hello</p><p id="selected">Hello Again</p>
Result:
[ <p>Hello</p> ]
2.3.7 not(jQuery)
not(jQuery elems) returns jQuery
Removes any elements inside the array of elements from the set of matched elements. This
method is used to remove one or more elements from a jQuery object.
Example:
Removes all elements that match "div p.selected" from the total set of all paragraphs.
$("p").not( $("div p.selected") )
HTML:
<div><p>Hello</p><p class="selected">Hello Again</p></div>
Result:
[ <p>Hello</p> ]
2.3.8 add(String)
add(String expr) returns jQuery
Adds more elements, matched by the given expression, to the set of matched elements.
Example:
$("p").add("span")
HTML:
<p>Hello</p><span>Hello Again</span>
Result:
[ <p>Hello</p>, <span>Hello Again</span> ]
add(String html) returns jQuery
Adds more elements, created on the fly, to the set of matched elements.
Example:
$("p").add("<span>Again</span>")
HTML:
<p>Hello</p>
Result:
[ <p>Hello</p>, <span>Again</span> ]
2.3.9 add(Element|Array<Element>)
add(Element|Array<Element> elements) returns jQuery
Adds one or more Elements to the set of matched elements.
Example:
$("p").add( document.getElementById("a") )
HTML:
<p>Hello</p><p><span id="a">Hello Again</span></p>
Result:
[ <p>Hello</p>, <span id="a">Hello Again</span> ]
Example:
$("p").add( document.forms[0].elements )
HTML:
<p>Hello</p><p><form><input/><button/></form>
Result:
[ <p>Hello</p>, <input/>, <button/> ]
2.3.10 is(String)
is(String expr) returns Boolean
Checks the current selection against an expression and returns true, if at least one element
of the selection fits the given expression.
Does return false, if no element fits or the expression is not valid.
filter(String) is used internally, therefore all rules that apply there apply here, too.
Example:
Returns true, because the parent of the input is a form element
$("input[@type='checkbox']").parent().is("form")
HTML:
<form><input type="checkbox" /></form>
Result:
true
Example:
Returns false, because the parent of the input is a p element
$("input[@type='checkbox']").parent().is("form")
HTML:
<form><p><input type="checkbox" /></p></form>
Result:
false
2.3.11 parent(String)
parent(String expr) returns jQuery
Get a set of elements containing the unique parents of the matched set of elements.
Can be filtered with an optional expressions.
Example:
Find the parent element of each paragraph.
$("p").parent()
HTML:
<div><p>Hello</p><p>Hello</p></div>
Result:
[ <div><p>Hello</p><p>Hello</p></div> ]
Example:
Find the parent element of each paragraph with a class "selected".
$("p").parent(".selected")
HTML:
<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>
Result:
[ <div class="selected"><p>Hello Again</p></div> ]
2.3.12 parents(String)
parents(String expr) returns jQuery
Get a set of elements containing the unique ancestors of the matched set of elements
(except for the root element).
Can be filtered with an optional expressions.
Example:
Find all parent elements of each span.
$("span").parents()
HTML:
<html><body><div><p><span>Hello</span></p><span>Hello
Again</span></div></body></html>
Result:
[ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ]
Example:
Find all parent elements of each span that is a paragraph.
$("span").parents("p")
HTML:
<html><body><div><p><span>Hello</span></p><span>Hello
Again</span></div></body></html>
Result:
[ <p><span>Hello</span></p> ]
2.3.13 next(String)
next(String expr) returns jQuery
Get a set of elements containing the unique next siblings of each of the matched set of
elements.
It only returns the very next sibling, not all next siblings.
Can be filtered with an optional expressions.
Example:
Find the very next sibling of each paragraph.
$("p").next()
HTML:
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
Result:
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]
Example:
Find the very next sibling of each paragraph that has a class "selected".
$("p").next(".selected")
HTML:
<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
Result:
[ <p class="selected">Hello Again</p> ]
2.3.14 prev(String)
prev(String expr) returns jQuery
Get a set of elements containing the unique previous siblings of each of the matched set of
elements.
Can be filtered with an optional expressions.
It only returns the immediately previous sibling, not all previous siblings.
Example:
Find the very previous sibling of each paragraph.
$("p").prev()
HTML:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
Result:
[ <div><span>Hello Again</span></div> ]
Example:
Find the very previous sibling of each paragraph that has a class "selected".
$("p").prev(".selected")
HTML:
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
Result:
[ <div><span>Hello</span></div> ]
2.3.15 siblings(String)
siblings(String expr) returns jQuery
Get a set of elements containing all of the unique siblings of each of the matched set of
elements.
Can be filtered with an optional expressions.
Example:
Find all siblings of each div.
$("div").siblings()
HTML:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
Result:
[ <p>Hello</p>, <p>And Again</p> ]
Example:
Find all siblings with a class "selected" of each div.
$("div").siblings(".selected")
HTML:
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
Result:
[ <p class="selected">Hello Again</p> ]
2.3.16 children(String)
children(String expr) returns jQuery
Get a set of elements containing all of the unique children of each of the matched set of
elements.
Can be filtered with an optional expressions.
Example:
Find all children of each div.
$("div").children()
HTML:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
Result:
[ <span>Hello Again</span> ]
Example:
Find all children with a class "selected" of each div.
$("div").children(".selected")
HTML:
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
Result:
[ <p class="selected">Hello Again</p> ]
2.3.17 contains(String)
contains(String str) returns jQuery
Filter the set of elements to those that contain the specified text.
Example:
$("p").contains("test")
HTML:
<p>This is just a test.</p><p>So is this</p>
Result:
[ <p>This is just a test.</p> ]
OK. That's enough for today. I hope now you can work with jquery. I will explain more in my later posts.
all rights reserved by Mostafa Rastgar and Programmer Assistant weblog
No comments:
Post a Comment