코드 분석을 통한 on() / find() / val() / attr() / $(this) 알아보기

JQuery 코드 분석으로 각 함수들의 이해를 해보도록 한다.

특히 $(this) 의미를 알고 넘어가야한다! 반드시 두번, 세번 이해하자

 

각 참고 자료

 

▷ on():

https://itjunijuni.tistory.com/22

Jquery[제이쿼리] bind(),on() 메서드 배우기

 

▷ find() :

https://www.codingfactory.net/10203

jQuery / Method / .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드

 

▷ val() :

https://www.codingfactory.net/10765

jQuery / Method / .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드

 

▷ attr() :

https://www.codingfactory.net/10208

jQuery / Method / .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드

 

 

◎ 코드 분석

: 이전(prev)/다음(next) 그리고 paging 처리된 특정 번호를 유저가 누르면 해당 번호를 pageNum 로 넘겨주는 코드

 

▷ JQuery

var actionForm = $("#actionForm");
		
		$(".paginate_button a").on("click", function(e) {
			
			e.preventDefault(); //<a> 태그 클릭해도 이동 없도록 하는 메소드

			console.log('click');
			
			actionForm.find("input[name='pageNum']").val($(this).attr("href"));
			
			actionForm.submit();
		});

 

▷ HTML

<div class='pull-right'>
  <ui class="pagination">
  
 	<!-- pageMaker.prev 는 boolean type 으로 true 일 경우 if 안의 문 실행 -->
	<c:if test="${pageMaker.prev}"> 
   
    	<li class="paginate_button previous"><a href="${pageMaker.startPage -1}">Previous</a>
		</li>
		</c:if>
        
	<!-- startPage ~ endPage 값까지 for 문으로 <li>문을 돌림, 
        <li>문에는 foreach 문의 var 변수 "num" 값을 ${num} 으로 해서 표시
        ex)start=1, end=10 이면 foreach 는 1~10까지 for문을 돌리므로 ${num} 은 1~10까지 숫자가 화면에 나열된다. -->		
		<c:forEach var="num" begin="${pageMaker.startPage}" 
		end="${pageMaker.endPage}"> 
        
        <li class="paginate_button"><a href="${num }">${num}</a>
		</li>
		</c:forEach>
				
		<c:if test="${pageMaker.next }">
		<li class="paginate_button next"><a href="${pageMaker.endPage +1}">Next</a>
		</li>
		</c:if>
				
	</ui>
				
</div><!-- end Pagination -->
<!-- <E> prev, next 페이지 처리-->
</div>
	<!-- form 태그 -->
	<form id='actionForm' action="/board/list" method='get'>
			
	<input type='hidden' name='pageNum' value='${pageMaker.cri.pageNum}'>
	<input type='hidden' name='amount' value='${pageMaker.cri.amount}'>
			
	</form>

▷ 주요 코드 

 

<코드>

actionForm.find("input[name='pageNum']").val($(this).attr("href"));

 

 

.find() = A.find(B): A의 하위 요소 중 지정한 B를 찾는다. 

☞ actionForm의 하위 요소 input[name='pageNum'] 를 찾아라.

 

.val() = A.val(B): A에 B 값을 넣는다.

☞ find() 로 찾은 요소(value) 에 B의 값을 넣어준다.

 

.attr() = A.attr(B): A의 요소 중 B의 속성 값

☞ $(this) 의 요소 중 "href" 의 속성 값(value)

 

$(this)는 $(".paginate_button a") 에서 HTML 코드의 <div class="paginate_button"> ~</div> 안에 있는 <a>~</a> 태그까지 란 의미

 

 

▷ 주요 코드 해석 

코드 해석은 뒤에서 부터 하면 된다.

$(this) 의 요소 중 "href" 의 속성 값(value) 을 input name 의 pageNum 인 요소에 값으로 집어 넣어라.!

 

 

$(this) 참고 내용

이벤트 핸들러 함수에서 this 키워드

이벤트 핸들러 함수에서 this 키워드는 이벤트 핸들러가 등록된 DOM 요소를 가리킨다. jQuery 함수를 사용하려면 $(this)와 같이 감싸서 jQuery 객체로 만들어야 한다.

$("#some").on("click", function(e) {

this; // <== jQuery로 감싸지 않은 요소(예: <div id="some">...</div>)

$(this); // <== jQuery로 감싼 요소

 

});

 

즉, 여기서 위에 말한 DOM 요소란 이벤트 핸들러가 등록된  $("#some")  이고 이것은 HTML에서 <div id="some"> ~</div> 까지의 태그를 말한다.

$(this)란 특정 이벤트 핸들러 DOM 요소 태그안의 모든 내용을 JQuery 함수를 사용하기 위해서 $()로 감싼것 뿐이다.