Miscellaneous 메서드
Miscellaneous 메서드의 종류
여러가지 메소드
.add() 일치하는 요소의 집합에 요소를 추가한다.
.andSelf() 현재 설정 스택에 요소의 이전 설정을 추가한다.
.contents() 텍스트 및 주석 노드를 포함 일치하는 요소 집합의 자식 집합을 반환한다.
.end() 이전 상태로 일치하는 집합을 반환한다.
1. add()
이름에서도 쉽게 알 수 있듯이 뭔가를 더하는 역할을 하는 메서드로 다음과 같이 사용을 한다.
.add(selector)
.add(elements)
.add(html)
셀렉터를 통해 선택한 개체에 ()안에 값을 더하는 메서드로 selector를 통해 가져온 개체, span과 같은 요소, <span>testSpan</span>과 같은 html 요소가 올 수 있다.
$(document).ready(function() {
$("li").add("div > p").css("border", "1px solid red");
});
<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>
$(document).ready(function() {
$("li").add("div > p").css("border", "1px solid red");
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
<p>this is P</p>
</div>
ㅋ
2. .andSelf()
현재 설정 스택에 요소의 이전 설정을 추가
$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");
3. contents()
셀렉터를 통해 선택된 개체 안에 있는 모든 요소를 반환한다.
단어의 뜻대로 선택된 개체 안에 있는 요소의 집합을 반환하며, 이 메서드의 경우 filter 메서드와 조합을 통해 많이 사용을 하고 있다.
$(document).ready(function () {
$("ul").find("li").contents().remove("ul"); });
// ul 밑에 있는 ul를 찾아 li 하위의 모든 contents를 찾아 ul을 삭제
<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>
<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>
4. .end()
이 메서드는 정말 중요하고 많은 곳에서 사용이 되며, 실제로 복잡한 스크립트를 작성할 때 마법과 같은 역할을 해 주는 메서드이다.
.end() 메서드를 간단히 설명 드리자면 .end() 메서드가 호출 후 바로 이전의 상태로 돌아가는 것을 의미한다.
예제)
<!DOCTYPE html>
<html>
<head>
<style>
.b1 {
border: 1px solid red;
}
.b2 {
border: 1px solid orange;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('div').find('p').addClass('b1').end().addClass('b2');
// div 밑에 p를 찾아 b1을 적용후 빠져나와(end) 그 위의 div에 b2를 적용
});
</script>
</head>
<body>
<div>
<p>단락1</p>
<p>단락2</p>
</div>
</body>
</html>
'jQuery' 카테고리의 다른 글
| JQuery 기초, hasClass(), addClass(), removeClass(), toggleClass(), position(), width(), height() (0) | 2016.02.19 |
|---|---|
| JQuery: find(), siblings() (0) | 2016.02.19 |
| JQuery: 셀렉터로 CSS 변경 (0) | 2016.02.17 |
| CSS로 패럴렉스 이펙트 + jQuary 추가 (0) | 2016.02.05 |
| JavaScript(jQuery)에서 패럴렉스 이펙트 (1) | 2016.02.05 |
