사슴 코딩 로그

스프링 웹 프레임워크를 이용하다보면 JQuery 라이브러리를 정말 많이 쓴다.
스프링이 아니어도 쓰겠지만.
찝어오고, 이벤트 먹이고..속성 먹이고..DOM 구성 요소를 이용하기에 셀렉터 이용이 너무 편하다.
너무 기본적이지만, 자주 쓰이는 기능들을 몇가지 적어놓는다.

1. each
each 문은 for문과 같은 반복문 역할을 한다.
예를들어 아래와 같은 클래스가 동일한 span이 있다고 치면

<span class="test" id="span1">span1</span>
<span class="test" id="span2">span2</span>
<span class="test" id="span3">span3</span>
<span class="test" id="span4">span4</span>

아래와 같이 each문을 쓸 경우 span1, span2, span3, span4 순서대로 alert이 찍히는것을 확인할 수 있다. 인덱스는 0부터 시작하고, $(this)는 element를 의미한다.
div 안의 table 안의 tr 안의 td 안의 span 만 찾아서 반복하고..그런것들도 얼마든지 가능하다.
아이디로 찾을 수도 있고, input, 요소명 등..으로 찾을 수도 있겠지.
$("#ListDiv table tr .datatd ...) 이런식으로 말이다.

$(".test").each(function(index, element) { 
//test 클래스를 가진 span을 순서대로 반복하여 찾는다.
    alert($(this).text());
});

jquery ajax 요청을하고 받아올때 result 값에서 each문을 돌려야하는 경우가 있다.
list<Map>을 ModelAndView에 담아서 리턴하거나..이런 경우가 많은데
컨트롤러를 다녀온 후 리턴받은 객체를 each 문을 돌리는 경우에는 이렇게 쓴다.

 $.ajax({
          "url" : "/user/detail"
        , "type" : "post"
        , "data" : {"filekey": key}
        , "success": function(result) {
          $.each(result.dataList, funcion(i,v) {
              alert("index = " + i + " value = " + v);
          });			
 });

2. click 이벤트
JQuery 쓰다보면 클릭이벤트를 안쓰는 경우가 오히려 드물 것 같다.
너무 간단하고 편하게 이용 가능하다.
위의 each 문에서 적은 span 요소를 이용해보겠다.

$("#span1").on("click", function() {
  alert($(this).text());
});

해당 소스에서의 $(this)는 클릭한 요소 자신을 가리킨다. alert창에는 "span1"이라고 표현될 것이다.
live를 쓰던 방법도 있고, $("#id").click ...을 쓰는 방법등 여러가지 있는데, on 방식에 "click" 이벤트를 거는 방식만 기술하였다.
여러가지 다양한 활용법 찾아보는 재미도 있을듯.ㅎㅎ

3. attr 속성 가지고 놀기
id를 바꾸려면 어떻게하지?이미지 src 경로를 바꾸려면?css를 바꾸고 싶은데?
이런 기능들이 필요할 때가 있다. 그럴때 attr을 이용하여 속성을 주입한다.
활용폭이 상당히 넓다.
기본적으로

.attr( attributeName, value )
형식으로 이용한다.

- attributeName : 속성명을 의미 
- value : 속성값을 의미

참고할 API : http://api.jquery.com/attr/

다음은 예제 소스코드다.

attr을 활용하여 요소의 id를 가져올때)

alert($("#span1").attr("id"));

alert($("#span1").attr("id"));

alert창엔 "span1"이라고 출력될 것이다.

css, src 변경 등 .attr 포함 여러가지 활용 방안)

//html 소스코드
<img id="testImg" src="www.naver.com/test.jpg"/>


//jQuery
$("#testImg").attr("src", "www.google.com/test.jpg");
$("#testImg").css({"background":"url(../img/menu_shadow01.gif)", 'background-repeat' : 'no-repeat'});

$("#testImg").attr({ 
				src: "/image/test.gif",
				title: "jQuery Study",
				alt: "jQuery and Deer"
			});

 
$("#testImg").addClass("testClass");
$("#testImg").attr("alt", "testAlt");
$("#testImg").attr("title", "jQuery title");

jQuery Callback Functions 을 이용해서 속성을 지정해줄 수도 있다. 예를들면 이렇게 말이다.

$("#testImg").attr("src", function() { 
    return "/image/" + this.title; 
});

나머지 부분들은 차차 더 추가해 나가야겠다.^.^