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 |
Some of the most basic components we can manipulate when it comes to DOM elements are the properties and attributes assigned to those elements.
Most of these attributes are available through JavaScript as DOM node properties. Some of the more common properties are:
className
tagName
id
href
title
rel
src
Consider the following HTML markup for an image element:
<img id="myImage" src="image.gif" alt="An image" class="someClass" title="This is an image"/> |
In this element's markup, the tag name is img, and the markup for id, src, alt, class, and title represents the element's attributes, each of which consists of a name and a value.
jQuery gives us the means to easily manipulate an element's attributes and gives us access to the element so that we can also change its properties.
속성값은 attr(name) 메소드를 이용하여 읽어올 수 있습니다.
아래 예제는 em요소의 title속성에 지정된 값을 읽어와서 div요소에 출력하는 예제네요.
<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() {
var title = $("em").attr("title");
$("#divid").text(title);
});
</script>
</head>
<body>
<div>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
<div id="divid"></div>
</div>
</body>
</html>
|
attr(name, value) 메소드를 이용하여 특정 속성명에 대한 속성값을 설정해줄 수 있습니다.
아래 예제는 src 속성에 특정 파일경로를 설정해주는 예제입니다.
<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() {
$("#myimg").attr("src", "/images/jquery.jpg");
});
</script>
</head>
<body>
<div>
<img id="myimg" src="/wongpath.jpg" alt="Sample image" />
</div>
</body>
</html>
|
addClass( classes ) 메소드를 이용하여 정의한 스타일을 적용시킬 수 있습니다. 여러개의 클래스를 스페이스를 구분자로 지정해줄 수 있습니다.
<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() {
$("em").addClass("selected");
$("#myid").addClass("highlight");
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
</body>
</html>
|
| Methods | Description |
|---|---|
| attr( properties ) | Set a key/value object as properties to all matched elements. |
| attr( key, fn ) | Set a single property to a computed value, on all matched elements. |
| removeAttr( name ) | Remove an attribute from each of the matched elements. |
| hasClass( class ) | Returns true if the specified class is present on at least one of the set of matched elements. |
| removeClass( class ) | Removes all or the specified class(es) from the set of matched elements. |
| toggleClass( class ) | Adds the specified class if it is not present, removes the specified class if it is present. |
| html( ) | Get the html contents (innerHTML) of the first matched element. |
| html( val ) | Set the html contents of every matched element. |
| text( ) | Get the combined text contents of all matched elements. |
| text( val ) | Set the text contents of all matched elements. |
| val( ) | Get the input value of the first matched element. |
| val( val ) | Set the value attribute of every matched element if it is called on <input> but if it is called on <select> with the passed <option> value then passed option would be selected, if it is called on check box or radio box then all the matching check box and radiobox would be checked. |
Similar to above syntax and examples, following examples would give you understanding on using various attribute methods in different situation:
$("#myID").attr("custom") : This would return value of attribute custom for the first element matching with ID myID.
$("img").attr("alt", "Sample Image"): This sets the alt attribute of all the images to a new value "Sample Image".
$("input").attr({ value: "", title: "Please enter a value" }); : Sets the value of all <input> elements to the empty string, as well as sets the title to the string Please enter a value.
$("a[href^=http://]").attr("target","_blank"): Selects all links with an href attribute starting with http:// and set its target attribute to _blank
$("a").removeAttr("target") : This would remove target attribute of all the links.
$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); : This would modify the disabled attribute to the value "disabled" while clicking Submit button.
$("p:last").hasClass("selected"): This return true if last <p> tag has associated classselected.
$("p").text(): Returns string that contains the combined text contents of all matched <p> elements.
$("p").text("<i>Hello World</i>"): This would set "<I>Hello World</I>" as text content of the matching <p> elements
$("p").html() : This returns the HTML content of the all matching paragraphs.
$("div").html("Hello World") : This would set the HTML content of all matching <div> to Hello World.
$("input:checkbox:checked").val() : Get the first value from a checked checkbox
$("input:radio[name=bar]:checked").val(): Get the first value from a set of radio buttons
$("button").val("Hello") : Sets the value attribute of every matched element <button>.
$("input").val("on") : This would check all the radio or check box button whose value is "on".
$("select").val("Orange") : This would select Orange option in a dropdown box with options Orange, Mango and Banana.
$("select").val("Orange", "Mango") : This would select Orange and Mango options in a dropdown box with options Orange, Mango and Banana.
Reference : http://www.tutorialspoint.com/jquery/jquery-attributes.htm
| [jQuery] 6. CSS Methods ( CSS 메소드 ) (0) | 2016.06.12 |
|---|---|
| [jQuery] 5. DOM Traversing ( DOM 선회 ) (0) | 2016.06.12 |
| [jQuery] 3. Selectors ( 셀렉터 ) (0) | 2016.06.12 |
| AJAX란? - 데이터베이스 (0) | 2016.06.12 |
| AJAX란? - 이벤트 종류 (0) | 2016.06.12 |