.add() 함수는 선택할 요소를 확장시키는 기능을 합니다. 절대로 요소를 추가해서 넣는 함수가 아닙니다. (저 그런 줄 알고 포스트 작성하다가 중간쯤에 아닌 걸 알았습니다. ㅜㅜ 그래서 지금 처음부터 다시 작성중이어요 어엉..)
원문 링크 
http://api.jquery.com/add/
- .add( selector )
- selector 선택자를 표현하는 문자열로 해당 선택자를 추가 적용 할 수 있음
- .add( elements )
- elements 선택할 요소를 확장시킬 이상의 신규 요소
- .add( html )
- html html 표현에 해당하는 요소를 추가하여 선택 영역 확장
- .add( selector, context )
- selector 선택자를 표현하는 문자열로 해당 선택자를 추가 적용 할 수 있음
- context 문서 상의 선택자로 검색을 시작할 위치를 나타냄; $() 메소드 안에 들어가는 인자들과 유사함
DOM 요소들을 표현하는 jQuery 객체들에 .add()함수를 사용하면 새로운 jQuery 객체가 생성됩니다. .add() 함수로 사용할 수 있는 인자는 $()의 인자로 들어갈 수 있는 것들과 유사합니다. jQuery 의 선택자 표현, DOM 요소들, HTML 표현요소들이 가능합니다. ^^;; .add() 함수의 인자는 거의 제한이 없어 보입니다.
사용은 체인 형태로(그냥 쉽게 하면 점(.) 연산자 사용해서 쭈욱 이어 붙이기) 선택된 요소 뒤에 이어 붙이면 되며, 사용 후에는 변수로 값을 받을 수도 있습니다. 아래 예제를 보시죠.
$("p").add("div").addClass("widget");
var pdiv = $("p").add("div");아래 예제의 추가된 요소는 저장되지 않습니다. 즉 아래와 같이 사용하시게 되면 원하는 결과를 얻지 못하게 됩니다.(이 부분의 영문이 좀 ㅎㅎㅎ;;; 이 정도면 뜻이 통할 것 같습니다. ^^;;)
var pdiv = $("p");
pdiv.add("div"); // WRONG, pdiv will not change이번에는 간단한 목록을 선택하고 거기에 더해 p 요소를 추가로 선택하는 부분을 살펴보겠습니다. 아래는 목록과 p 태그로 구성된 html 태그입니다.
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> <p>a paragraph</p>
자 일단 목록을 선택하는 선택자 표현에 추가로 p 요소를 추가 선택하기 위한 스크립트를 구성해야 합니다. .add() 함수에 p 를 선택자로 해서 구성해 보죠.
또는
$('li').add(document.getElementsByTagName('p')[0])
.css('background-color', 'red');와 같이 할 수 있습니다. 두 예제의 차이는 .add() 함수에 들어간 인자의 차이입니다. 위 예제는 명시적으로 p 라는 선택자 표현을 사용했습니다. 아래 예제는 문서 상에 있는 p 태그를 찾아내어 그 요소 집합 중 첫번째 요소를 찾으라는 선택자 표현을 사용해서 p 태그까지 선택하도록 확장한 것입니다.(괜히 어렵게 해놓은 것 같습니다. ㅡㅡ;) 둘다 .add() 함수를 사용하여 4개의 목록에 p 요소를 추가로 선택하도록 하는 스크립트입니다.
이외에 hmlt 태그를 표현하는 문자열을 사용하는 방법을 기억하시나요? 위쪽에 기술했던 내용 중 3번째 방법이요. 일단 예제부터 보시죠.
$('li').add('<p id="new">new paragraph</p>')
.css('background-color', 'red');이 스크립트를 위 html 에 적용시켜 보면 빨간색으로 리스트는 바뀌지만 p 요소는 선택되지 않았습니다. 이 위에 2가지 예제에서는 p 요소까지 빨간색 바탕으로 바뀌거든요. 이것은 add 함수안에 인자와 html 문서상의 p 요소가 좀 다르기 때문입니다. 무슨 말인지 아시죠? 하하 ^^;; (사실 이 부분에 와서 예제를 실제로 테스트 하다가 어? 이거 뭔가 이상한데 하고 다시 살펴보게 되었습니다. 다시 검증하지 않았다면 전혀 엉뚱한 내용으로 글을 쓸뻔 했어요. 그나마 다행입니다. ^^)
예 제
div 요소를 찾아서 빨간 테두리를 두릅니다. div 요소에 추가로 p 요소를 찾습니다. 찾은 두 요소의 바탕색을 노란색으로 바꿉니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:10px; float:left; }
p { clear:left; font-weight:bold; font-size:16px;
color:blue; margin:0 10px; padding:2px; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>Added this... (notice no border)</p>
<script>
$("div").css("border", "2px solid red")
.add("p")
.css("background", "yellow");
</script>
</body>
</html>
미리보기
모두 빨간 테두리에 노란색 바탕으로 바꼈습니다.(왜 이렇게 사용했을까요? 그냥 처음 선택할 때 p 요소까지 같이 선택했으면 좋았을 텐데요 라고 생각하고 계시죠? 저도 그래요. 뭔가 이유가 있겠죠. ㅎㅎ)
예 제
p 요소에 더해서 span 요소까지 확장 선택하고 css를 바꿔 줍니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p>Hello</p><span>Hello Again</span>
<script>$("p").add("span").css("background", "yellow");</script>
</body>
</html>
미리보기
예 제
p 요소를 복제(clone)한 후에 html 문자열에 해당하는 요소를 추가로 선택하고 body에 해당 요소들을 추가합니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p>Hello</p>
<script>$("p").clone().add("<span>Again</span>").appendTo(document.body);</script>
</body>
</html>
미리보기
스크립트의 맨 뒤에 appendTo()함수를 없애보세요. 그러면 아무일도 발생하지 않습니다. 해당 함수를 삭제/추가 하시면서 테스트해 보세요. 아~ 그렇구나 하실겁니다.
예 제
p 요소를 찾은 후 id가 a인 요소를 추가로 찾은 다음 바탕색을 노란색으로 바꿔줍니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p>Hello</p><span id="a">Hello Again</span>
<script>$("p").add(document.getElementById("a")).css("background", "yellow");</script>
</body>
</html>
미리보기
그냥 이렇게도 사용한다고 보여줄라고 한 예제 같습니다. id값으로 요소를 찾는 것으로 확장시켰습니다.
예 제
찾은 요소들을 변수로 받아서 차근차근 저장한 후에 바탕색을 노란색으로 바꿔줍니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p>Hello</p><span id="a">Hello Again</span>
<script>var collection = $("p");
// capture the new collection
collection = collection.add(document.getElementById("a"));
collection.css("background", "yellow");</script>
</body>
</html>미리보기
오호 이 예제야 말로 실용적으로 보입니다. 찾은 요소들을 차근차근 누적시킨 후에 일괄적으로 어떤 처리를 해야할 경우 아주 유용해 보이네요. 이 방법은 꼭 기억하세요. 뭐 딱히 기억이랄것도 없지만요. ^^
드디어 Traversing 메뉴입니다. 태요님의 강좌 중에 Traversing 을 탐색, 추가, 필터를 위한 함수들의 모음이라는 표현이 있습니다. 딱히 표현할 방법이 없었는데 태요님의 얘기가 딱 맞아 떨어집니다. 굳이 하나로 해석하자면 탐색을 위한 api 모음 정도 될듯 합니다. 후~ 또 한 메뉴가 시작됬네요. ㅎㅎ;; 힘내자~~
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 텍스트 노드를 포함한 자식요소 가져오기, contents() (4) | 2011.04.26 |
|---|---|
| jQuery API 정복 - 현재 요소에서 가장 가까운 선택 요소, closest() (1) | 2011.04.21 |
| jQuery API 정복 - 자식 요소들 찾기, children() (2) | 2011.04.07 |
| jQuery API 정복 - 선택된 요소들 이어 붙이기, andSelf() (6) | 2011.03.24 |
| jQuery API 정복 - 폼의 value 가져오기, val() (4) | 2011.03.17 |
| jQuery API 정복 - 클래스 토글하기, toggleClass (5) | 2011.03.15 |
| jQuery API 정복 - 클래스 제거, removeClass() (2) | 2011.03.14 |
| jQuery API 정복 - 속성 제거, removeAttr() (0) | 2011.03.11 |