[ Miscellaneous 메서드의 종류 ]
| 메소드 | 메소드 설명 |
| .add() | 일치하는 요소의 집합에 요소를 추가 |
| .andSelf() | 현재 설정 스택에 요소의 이전 설정을 추가 |
| .contents() | 텍스트 및 주석 노드를 포함 일치하는 요소의 집합의 자식 집합을 반환 |
| .end() | 이전 상태로 일치하는 집합을 반환 |
[ .add() ]
더하는 역활의 메소드
<head>
<title>jQuery Selector</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<style>
div,pre { background : #FFF; padding:10px; margin:10px; }
table { border:1px solid #AAA; }
td { border:1px solid #AAA; width:25px; height:25px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul").add("div > p").css("border", "1px solid red");
});
</script>
</head>
<body style="padding:10px;">
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<ul>
<li>list item 4</li>
</ul>
<ol>
<li>list item 5</li>
<li>list item 6</li>
</ol>
<p>this is P</p>
</div>
</body>
</html>
<ul> 요소에 테두리 선을 표시하는 것 뿐 아니라 div요소 및에 p요소에도 동일하게 테두리 선을 표시한다.
[ .andSelf() ]
<head>
<style>
p, div { margin:5px; padding:5px; }
.border { border: 2px solid red; }
.background { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
Third Paragraph
</div>
<p>Fourth Paragraph</p>
<script>
$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");
</script>
</body>
</html>
위의 예제를 보면 확인 할 수 있지만, div 요소와 div 하단의 p 요소에는 border 속성이 적용되어 있고, div하단의 p요소에만 backgroud 속성이 적용되어 있음을 확인 할 수 있다.
Fourth Paragraph의 경우 p태그 안에 있긴 하지만 div태그에 쌓여있지 않기에 해당 속성이 적용되지 않았다.
즉, $("div").find("p").andSelft() 가 의미하는 것은 $("div") + $("div").find("p") 이라는 것을 알 수 있다.
[ .contents() ]
셀렉터를 통해 선택된 개체 안에 있는 모든 요소를 반환
단어의 뜻 대로 선택된 개체 안에 있는 요소의 집합을 반환하며, 이 메소드의 경우 filter 메소드와 조합을 통해 많이 사용을 하고 있다.
<head>
<title>jQuery Selector</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<style>
div,pre { background : #FFF; padding:10px; margin:10px; }
table { border:1px solid #AAA; }
td { border:1px solid #AAA; width:25px; height:25px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("ul").find("li").contents().remove("ul");
});
</script>
</head>
<body style="padding:10px;">
<div>
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
</div>
</body>
</html>
<메소드 적용 전> <메소드 적용 후>
remove(Selector) 메소드는 "selector"와 일치하는 내용을 삭제해주는 역활을 한다.
위의 소스는, 셀렉터를 통하여 "ul"요소를 찾은 후 find()를 통해 "li"요소를 찾는다. 마지막으로 contents() 메소드를 통해 li 요소에 담겨있는 모든 요소를 찾은 후 remove() 메소드를 통해 "ul"이 제거된 상태를 보여준다.
[ .end ]
end() 메소드는 .end() 메소드가 호출 후 바로 이전의 상태로 돌아가는 것을 의미합니다.
예를 들어 $(div).find(p).end().addClass(“myClass”);와 같은 구문이 있다고 하면 myClass라는 class 속성이 div에 적용이 된다. 하지만
즉, .end() 메소드가 없다면 “div” 요소 안에 있는 “p” 요소에 class 속성이 적용이 되지만 .end() 메서드의 호출로 인해 “p” 요소 이전의 개체인 $(“div”) 개체가 다시 호출이 되고 호출된 $(“div)에 class 속성이 적용이 되는 것입니다.
'Programming > JQuery' 카테고리의 다른 글
| jQuery Event (0) | 2012.04.23 |
|---|---|
| jQuery Traverse - Tree Traversal (0) | 2012.04.20 |
| jQuery Traverse - Filtering (0) | 2012.04.19 |
| jQuery Callback Functions (0) | 2012.04.19 |
| jQuery Ajax memory leak (0) | 2012.04.05 |
