JQuery provides methods to manipulate DOM in efficient way. You do not need to write big code to modify the value of any element's attribute or to extract HTML code from a paragraph or division.
JQuery provides methods such as .attr(), .html(), and .val() which act as getters, retrieving information from DOM elements for later use.
The html( ) method gets the html contents (innerHTML) of the first matched element.
Here is the syntax for the method:
selector.html( ) |
Following is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML content from the object and then .text( val ) method sets value of the object using passed parameter:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var content = $(this).html();
$("#result").text( content );
});
});
</script>
<style>
#division{ margin:10px;padding:12px;
border:2px solid #666;
width:60px;
}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id="result"> </span>
<div id="division" style="background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>
|
You can replace a complete DOM element with the specified HTML or DOM elements. The replaceWith( content ) method serves this purpose very well.
Here is the syntax for the method:
selector.replaceWith( content ) |
Here content is what you want to have instead of original element. This could be HTML or simple text.
Following is an example which would replace division element with "<h1>JQuery is Great</h1>":
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).replaceWith("<h1>JQuery is Great</h1>");
});
});
</script>
<style>
#division{ margin:10px;padding:12px;
border:2px solid #666;
width:60px;
}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id="result"> </span>
<div id="division" style="background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>
|
There may be a situation when you would like to remove one or more DOM elements from the document. JQuery provides two methods to handle the situation.
The empty( ) method remove all child nodes from the set of matched elements where as the method remove( expr ) method removes all matched elements from the DOM.
Here is the syntax for the method:
selector.remove( [ expr ]) or selector.empty( ) |
You can pass optional paramter expr to filter the set of elements to be removed.
Following is an example where elements are being removed as soon as they are clicked:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).remove( );
});
});
</script>
<style>
.div{ margin:10px;padding:12px;
border:2px solid #666;
width:60px;
}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id="result"> </span>
<div class="div" style="background-color:blue;"></div>
<div class="div" style="background-color:green;"></div>
<div class="div" style="background-color:red;"></div>
</body>
</html>
|
There may be a situation when you would like to insert new one or more DOM elements in your existing document. JQuery provides various methods to insert elements at various locations.
The after( content ) method insert content after each of the matched elements where as the method before( content ) method inserts content before each of the matched elements.
Here is the syntax for the method:
selector.after( content ) or selector.before( content ) |
Here content is what you want to insert. This could be HTML or simple text.
Following is an example where <div> elements are being inserted just before the clicked element:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).before('<div class="div"></div>' );
});
});
</script>
<style>
.div{ margin:10px;padding:12px;
border:2px solid #666;
width:60px;
}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id="result"> </span>
<div class="div" style="background-color:blue;"></div>
<div class="div" style="background-color:green;"></div>
<div class="div" style="background-color:red;"></div>
</body>
</html>
|
| Method | Description |
|---|---|
| after( content ) | Insert content after each of the matched elements. |
| append( content ) | Append content to the inside of every matched element. |
| appendTo( selector ) | Append all of the matched elements to another, specified, set of elements. |
| before( content ) | Insert content before each of the matched elements. |
| clone( bool ) | Clone matched DOM Elements, and all their event handlers, and select the clones. |
| clone( ) | Clone matched DOM Elements and select the clones. |
| empty( ) | Remove all child nodes from the set of matched elements. |
| html( val ) | Set the html contents of every matched element. |
| html( ) | Get the html contents (innerHTML) of the first matched element. |
| insertAfter( selector ) | Insert all of the matched elements after another, specified, set of elements. |
| insertBefore( selector ) | Insert all of the matched elements before another, specified, set of elements. |
| prepend( content ) | Prepend content to the inside of every matched element. |
| prependTo( selector ) | Prepend all of the matched elements to another, specified, set of elements. |
| remove( expr ) | Removes all matched elements from the DOM. |
| replaceAll( selector ) | Replaces the elements matched by the specified selector with the matched elements. |
| replaceWith( content ) | Replaces all matched elements with the specified HTML or DOM elements. |
| text( val ) | Set the text contents of all matched elements. |
| text( ) | Get the combined text contents of all matched elements. |
| wrap( elem ) | Wrap each matched element with the specified element. |
| wrap( html ) | Wrap each matched element with the specified HTML content. |
| wrapAll( elem ) | Wrap all the elements in the matched set into a single wrapper element. |
| wrapAll( html ) | Wrap all the elements in the matched set into a single wrapper element. |
| wrapInner( elem ) | Wrap the inner child contents of each matched element (including text nodes) with a DOM element. |
| wrapInner( html ) | Wrap the inner child contents of each matched element (including text nodes) with an HTML structure. |
Reference : http://www.tutorialspoint.com/jquery/jquery-dom.htm
| [jQuery] 9. AJAX (0) | 2016.06.12 |
|---|---|
| [jQuery] 8. Event Handling ( 이벤트 핸들링 ) (0) | 2016.06.12 |
| [jQuery] 6. CSS Methods ( CSS 메소드 ) (0) | 2016.06.12 |
| [jQuery] 5. DOM Traversing ( DOM 선회 ) (0) | 2016.06.12 |
| [jQuery] 4. DOM Attributes ( DOM 속성 ) (0) | 2016.06.12 |
jQuery is a very powerful tool which provides a variety of DOM traversal methods to help us select elements in a document randomly as well as in sequential method.
Most of the DOM Traversal Methods do not modify the jQuery object and they are used to filter out elements from a document based on given conditions.
Consider a simple document with the following HTML content:
<html>
<head>
<title>the title</title>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>
|
Above every list has its own index, and can be located directly by using eq(index) method as below example.
Every child element starts its index from zero, thus, list item 2 would be accessed by using $("li").eq(1) and so on.
Following is a simple example which adds the color to second list item.
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("li").eq(2).addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>
|
The filter( selector ) method can be used to filter out all elements from the set of matched elements that do not match the specified selector(s). The selector can be written using any selector syntax.
Following is a simple example which applies color to the lists associated with middle class:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("li").filter(".middle").addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<div>
<ul>
<li class="top">list item 1</li>
<li class="top">list item 2</li>
<li class="middle">list item 3</li>
<li class="middle">list item 4</li>
<li class="bottom">list item 5</li>
<li class="bottom">list item 6</li>
</ul>
</div>
</body>
</html>
|
The find( selector ) method can be used to locate all the descendent elements of a particular type of elements. The selector can be written using any selector syntax.
Following is an example which selects all the <span> elements available inside different <p> elements:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("p").find("span").addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<p>This is 1st paragraph and <span>THIS IS RED</span></p>
<p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
</body>
</html>
|
Following table lists down useful methods which you can use to filter out various elements from a list of DOM elements:
| Selector | Description |
|---|---|
| eq( index ) | Reduce the set of matched elements to a single element. |
| filter( selector ) | Removes all elements from the set of matched elements that do not match the specified selector(s). |
| filter( fn ) | Removes all elements from the set of matched elements that do not match the specified function. |
| is( selector ) | Checks the current selection against an expression and returns true, if at least one element of the selection fits the given selector. |
| map( callback ) | Translate a set of elements in the jQuery object into another set of values in a jQuery array (which may, or may not contain elements). |
| not( selector ) | Removes elements matching the specified selector from the set of matched elements. |
| slice( start, [end] ) | Selects a subset of the matched elements. |
Following table lists down other useful methods which you can use to locate various elements in a DOM:
| Selector | Description |
|---|---|
| add( selector ) | Adds more elements, matched by the given selector, to the set of matched elements. |
| andSelf( ) | Add the previous selection to the current selection. |
| children( [selector]) | Get a set of elements containing all of the unique immediate children of each of the matched set of elements. |
| closest( selector ) | Get a set of elements containing the closest parent element that matches the specified selector, the starting element included. |
| contents( ) | Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe. |
| end( ) | Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state . |
| find( selector ) | Searches for descendent elements that match the specified selectors. |
| next( [selector] ) | Get a set of elements containing the unique next siblings of each of the given set of elements. |
| nextAll( [selector] ) | Find all sibling elements after the current element. |
| offsetParent( ) | Returns a jQuery collection with the positioned parent of the first matched element. |
| parent( [selector] ) | Get the direct parent of an element. If called on a set of elements, parent returns a set of their unique direct parent elements. |
| parents( [selector] ) | Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element). |
| prev( [selector] ) | Get a set of elements containing the unique previous siblings of each of the matched set of elements. |
| prevAll( [selector] ) | Find all sibling elements in front of the current element. |
| siblings( [selector] ) | Get a set of elements containing all of the unique siblings of each of the matched set of elements. |
Reference : http://www.tutorialspoint.com/jquery/jquery-traversing.htm
| [jQuery] 7. DOM Manipulation Methods ( DOM 조작 메소드 ) (0) | 2016.06.12 |
|---|---|
| [jQuery] 6. CSS Methods ( CSS 메소드 ) (0) | 2016.06.12 |
| [jQuery] 4. DOM Attributes ( DOM 속성 ) (0) | 2016.06.12 |
| [jQuery] 3. Selectors ( 셀렉터 ) (0) | 2016.06.12 |
| AJAX란? - 데이터베이스 (0) | 2016.06.12 |