add 메서드
jQuery 2015. 4. 28. 18:29
add 메서드는 선택 요소를 확장하는 메서드이다.
그 전에 이런걸 어떻게 쓸 수 있는지 예제를 한번 보자
여기서 h1 요소와 h2 요소에 동일하게 background-color 을 yellow 로 적용시켜 주고 싶다.
스크립트 코드를 보게 되면
1 | $("h1").css("background-color","yellow"); | cs |
이런식으로 되어 있을 텐데 만약 h2 에다가도 동일하게 주려면
1 2 3 4 | $("h1").css("background-color","yellow"); $("h2").css("background-color","yellow"); // 또는 $("h1, h2").css("background-color","yellow"); | cs |
다양한 방법이 있다.
보통 두가지를 선택하거나. 선택자를 두번씩 넣어준다거나 방법을 생각할 수 있다.
하지만 또다른 방법으로
add 메소드는 현재 선택되어진 선택자에 추가로 뭔가를 더 선택 할 수있다.
1 | $("h1").add("h2").css("background-color","yellow"); | cs |
이 뜻은 h1 을 선택하고 '추가로 h2' 요소를 선택해서 배경색을 노란색으로 주겠다는 뜻이다.
이 메소드가 적용된 예제를 한번 살펴 보도록 하자.
javascript 로 선택을 바꿔주면 코드를 볼 수 있습니다.
또하나의 다른 예를 보도록 하자.
이번엔 무언가의 요소를 선택하고 어떠한 요소를 삽입해보도록 하자.
대략 마크업을 어떻게 할꺼냐면...
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>제이쿼리add메서드</title> <style></style> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script> $(function(){ }) </script> </head> <body> <p>p 요소의 다음 요소로 span 요소를 삽입해 보겠습니다.</p> </body> </html> | cs |
현재 span 요소가 없다.
span 요소가 없지만 add 메서드를 통하여 span 요소를 삽입하려 한다.
add 메소드는!
html 표현에 해당하는 요소를 추가하여 선택 영역을 확장 할 수 있다.
이 말은 즉 메서드 안에 () <- 안에 html 코드를 넣을 수 있다는 이야기 이다.
예 : .add("<span>Hellow</span>");
하지만 어디까지나 알아둬야 할건 add 메소드는 선택영역을 확장의 개념이기 때문에
저렇게 했다고 해서 뭔가 바로 추가 되지 않는다는 거다.
삽입 메소드를 적절히 이용하여야 한다.
삽입 메소드를 통해 위의 html 마크업에 스크립트를 입혀 span 을 추가시켜 보겠다.
1 2 3 4 5 | $(function(){ var $plusSpan = $("p").add("<span>추가된 span 요소입니다.</span>"); alert($plusSpan); $plusSpan.appendTo("body") }) | cs |
2번줄 : 현재 여기까지는 p 라는 요소를 선택해 span html표현에 해당하는 요소를 추가하여 선택 영역을 확장하였다.
3번줄 : 어떤식으로 찍히는제 한번 확인해보자.
4번줄 : body의 자식중에 맨 나중으로 확장된 span 요소를 추가시켜 주겠다.
'jQuery' 카테고리의 다른 글
| each와 index 의 간단설명 (0) | 2015.05.04 |
|---|---|
| 제이쿼리 콜백함수 (0) | 2015.04.28 |
| [jQueryMobile]swipeleft, swiperight 메서드 (0) | 2015.04.17 |
| context 매개변수 (0) | 2015.04.16 |
| mouseenter 과 mouseover 메서드의 차이 (0) | 2015.04.15 |