제이쿼리(Jquery) 이벤트 종류

.bind( eventType, handler ) 바인드 함수를 사용하면서 요소에 이벤트를 적용시 eventType이 있습니다.

eventType은 선언된 이벤트 외 다른 이벤트를 요소에 주어진다고 해도 이벤트 핸들러가 실행이 되지 않습니다.

이런 이벤트는 키보드, 마우스, 화면 등.. 여러가지가 존재를 합니다.

1. 제이쿼리(Jquery) 이벤트 종류 표

1.1 키보드 이벤트

1.2 마우스 이벤트

1.3 입력 폼 이벤트

1.4 기타 이벤트

1. 제이쿼리(Jquery) 이벤트  등록, 제거

요소에 이벤트 핸들러를 지정하기 위해서 bind() 및 제거에 해당하는 unbind() 함수를 사용해 각각에 요소에 이벤트 핸들러를 추가할 수가 있습니다.

2. 제이쿼리(Jquery) 이벤트  등록 .bind()

<input type="button" id="btn">

<script type="text/javascript"> 
	$("#btn").bind("click",function(){
		alert("클릭");
	}); 
</script>

.bind(eventType,handler)

id가 btn이라는 요소에 이벤트 핸들러를 추가를 합니다. eventType은 click, handler는 클릭이라는 문구를 출력하는 알럿창이 나오도록 함수를 지정합니다.

이렇게 되면 id가 btn요소를 클릭시 '클릭'문구가 나오는 알럿창이 화면이 표시가 됩니다.

3. 제이쿼리(Jquery) 이벤트  제거 .unbind()

<input type="button" id="btn">

<script type="text/javascript"> 
	$("btn").unbind();
</script>

.unbind([eventType] [, handler])

id가 btn인 요소에 추가된 이벤트를 제거합니다.

1. 매개변수가 없으면 모든 이벤트 제거

2. eventType 지정시 지정된 이벤트 제거

3. handler 지정시 click에 대한 이벤트는 남아있어도 핸들러에 해당되는 부분이 제거

1. 제이쿼리(Jquery) Ajax

Ajax는 웹 페이지를 다시 요청하지 않고 동적으로 서버와 HTTP 통신이 이루워져 데이터를 처리하는 방식이다.

Ajax는 또한 프레임워크 중에서도 많이 사용을 하는 편이여서 알아뒀다가 사용을 하면 편하게 작업을 진행을 할 수 있습니다.

2. 제이쿼리(Jquery) Ajax 사용법

<input type="button" id="ajaxBtn">
<div id="printText"></div>
<div id="printError" style="color:red;"></div>

<script type="text/javascript"> 
	$("#ajaxBtn").bind("click",function(){
		$.ajax({
			url : "/rest/rest.jsp",		// 서버로 통신할 URL 주소
			data : {name:"홍길동"},	// 서버로 보낼 데이터
			method : "POST",		// HTTP 요청 메서드 [ "GET", "POST" ]  
			dataType : "text",			// 서버에서 보내줄 데이터 타입 [ "json", "xml", "text", "html" ]
			success : function(data){
				// 성공 콜백 함수 
			},
			error : function(jqXHR,status,error){
				// 실패 콜백 함수 
			},
			complete : function(){
				// 처리 후 콜백 함수 
			}
		})
		
		// 성공 체이닝
		.done(function(data){  
			$("#printText").html("data : " + data);
		})  
		
		// 실패 체이닝
		.fail(function(jqXHR,status,error){ 
			$("#printError").html("xhr : " + xhr + "<br/> error : " + error + "<br/> status : " + status);
		})
		
		// 처리 후 체이닝
		.always(function(){
			alert("처리 끝");
		})				
	});
</script>

1. 성공 처리 -> 성공 콜백 함수(success) -> 처리 후 콜백 함수(complete) -> 성공 체이닝(.done) -> 처리 후 체이닝(.always)

2. 실패 처리 -> 실패 콜백 함수(error) -> 처리 후 콜백 함수(complete) -> 실패 체이닝(.fail) -> 처리 후 체이닝(.always)

3. Ajax 사용 옵션

제이쿼리(Jquery) 필터링 선택자#4

제이쿼리에 요소를 선택 후 선택한 요소를 필터링하기 위해 제이쿼리에서 제공하고 있는 메서드를 사용해 요소를 다시 선택하는 방법에 대해서 알아보겠습니다.

1. 제이쿼리(Jquery) 필터링 함수 표

1.1 제이쿼리(Jquery) 필터링 사용 예시

1.1.1 .first() .last() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").first().css("color","red");
	$("li").last().css("color","red");
</script>

결과값

선택된 li 전체 태그들 중에서 처음과 마지막에 해당하는 1, 6인 요소가 선택됩니다.  

1.1.2 .eq() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").eq(2).css("color","red");
</script>

결과값

선택된 li 전체 태그들 중에서 index가 2번인 3번째 li 요소가 선택이 됩니다.

index 번호는 0번 부터 시작이 된다.

1.1.3 .filter() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").filter(":odd").css("color","red");
</script> 

결과값

선택된 li 전체 요소 중에서 filter에 해당하는 짝수 요소들만 선택이 됩니다.

1.1.4 .not() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").not(":odd").css("color","red");
</script>

결과값

선택된 li 전체 요소 중에서 not에 해당하는 짝수가 아닌 홀수 요소들을 선택이 됩니다.

1.1.5 .has() 함수 사용

<div>
	<ul>
		<li><span>1</span></li>
		<li><span>2</span></li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").has("span").css("color","red");
</script>

결과값

선택된 li 전체 요소 중에서  has에 해당하는 자식요소가 span를 갖는 li 태그만 선택이 됩니다.

1.1.6 .is() 함수 사용

<div>
	<ul>
		<li id="selector">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li> 
	</ul>
</div> 
<script type="text/javascript">
	var flag = $("li").is("#selector");
	if(flag){
		$("#selector").css('color','red');
	}
</script>

결과값

선택된 li 전체 요소 중에서 id가 selector 값이 있으면 true 값을 반환하는 기능입니다.

1.1.7 .slice() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li> 
	</ul>
</div> 
<script type="text/javascript">
	$("li").slice(1,2).css('color','red');
</script> 

결과값

선택된 li 전체 요소 중에서 slice에 해당하는 인덱스가 1부터 2이전 인덱스에 해당 하는 요소를 선택합니다.

.slice(startIndex, endIndex) index는 0부터 시작 startIndex(포함) 부터 endIndex(미포함) 이전까지 해당하는 요소

.slice(startIndex) startIndex(포함) 부터 마지막 요소(포함)까지 해당하는 요소 선택

제이쿼리(Jquery) 부모, 형제, 자식 선택자#3

제이쿼리에 요소를 선택 후 선택된 요소에서 부모, 형제, 자식 요소를 찾는 방법에 대해서 알아보겠습니다.

선택된 요소를 감싸고 있는 상위 노드를 부모, 반대로 선택된 요소가 어떤한 요소를 감싸고 있을때 감쌓여진 요소를 자식, 또는 선택된 요소와 같은 트리위치에 있는 요소들을 형제 요소라고 부릅니다.

1. 제이쿼리(Jquery) 부모 선택자 함수 표

1.1 부모 선택자 사용 예시

1.1.1 .parent() 사용 접근

<div id="parentDIV">메뉴
 <ul id="parentUL1">
  <li>1</li>
  <li>2</li>
  <li id="parentLI">3
   <ul id="parentUl2">
    <li id="selector">3-1</li> 
    <li>3-2</li>
   </ul>
  </li>
  <li>4</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").parent().css("color","red");
</script> 

결과값

부모 요소인 ID가 'parentUl2' 요소가 선택된다.

1.1.2 .parents() 사용 접근

<div id="parentDIV">메뉴
 <ul id="parentUL1">
  <li>1</li>
  <li>2</li>
  <li id="parentLI">3
   <ul id="parentUl2">
    <li id="selector">3-1</li> 
    <li>3-2</li>
   </ul> 
  </li>
  <li>4</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").parents().css("color","red");
</script>

결과값

부모요소들인 ID가 'parentDIV', 'parentLI', 'parentUl2' 요소들이 선택된다.

1.1.3 .closest( [selector] ) 사용 접근

<div id="parentDIV">메뉴
 <ul id="parentUL1">
  <li>1</li>
  <li>2</li>
  <li id="parentLI">3
   <ul id="parentUl2">
    <li id="selector">3-1</li> 
    <li>3-2</li>
   </ul> 
  </li>
  <li>4</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").closest("li").css("color","red");
</script> 

결과값

선택된 현재 요소부터 가장가까운 요소를 자기 자신이므로 ID가 selector인 요소를 찾게됩니다.

2. 제이쿼리(Jquery) 형제 선택자 함수 표

2.1 형제 선택자 사용 예시

2.1.1 .prev() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li> 
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").prev("#prevLI1").css("color","red"); 
</script> 

결과값

선택된 요소에 이전 요소인 ID가 prevLI1이 선택이 되고 selector에 해당하는 아이디가 prevLI1인 요소를 선택하게 됩니다.

2.1.2. .prevAll() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li> 
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").prevAll("#prevLI2").css("color","red"); 
</script> 

결과값

선택된 요소에 이전 요소 전체 ID값이 prevLI2, prevLI1 인 요소를 찾습니다. 그중에서 ID가 prevLI2인 요소만 찾게 됩니다.

2.1.3 .next() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li>
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").next().css("color","red");
</script> 

결과값

선택된 요소에 다음 요소인 ID가 nextLI1 요소가 선택이 됩니다.

2.1.4 .nextAll() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li>
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").nextAll("#nextLI2").css("color","red");
</script> 

결과값

선택된 요소에 다음 요소 전체를 ID가 nextLI1, nextLI2를 찾습니다. 그중에서 ID가 nextLI2인 요소가 선택이 됩니다.

2.1.5 .siblings() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li>
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").siblings().css("color","red");
</script> 

결과값

선택된 요소에 같은 노드에 해당하는 요소들을 전체 선택하게 됩니다.

3. 제이쿼리(Jquery) 자식 선택자 함수 표

3.1 자식 선택자 사용 예시

3.2.1 .children() 사용 접근

<div>메뉴
 <ul>
  <li>1</li>
  <li id="selector">2
   <ul id="children1">
    <li>2-1</li>
    <li>2-2</li>
    <li id="children2">2-3
     <ul id="children3">
      <li id="children4">2-3-1</li>
      <li>2-3-2</li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").children().css("color","red");
</script>

결과값

선택된 요소에 해당하는 자식요소인 ID가 children1 인 요소가 선택이 됩니다.

3.2.2 .find() 사용 접근

<div>메뉴
 <ul>
  <li>1</li>
  <li id="selector">2
   <ul id="children1">
    <li>2-1</li>
    <li>2-2</li>
    <li id="children2">2-3
     <ul id="children3">
      <li id="children4">2-3-1</li>
      <li>2-3-2</li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").find("#children4").css("color","red");
</script>

결과값

선택된 요소에 자식요소들 중에서 ID가 children4인 요소를 선택하게 됩니다.

개발노트 :: 제이쿼리(Jquery) 속성 선택자#2

제이쿼리를 이용해 특정 요소를 선택하는 방법에 대해 알아보겠습니다.

이번에는 요소에 해당하는 속성값을 이용해 선택을 해보겠습니다.

1. 속성 선택자 표

2. 속성 선택자 사용

2-1 element[attribute] attribute속성을 가진 요소 선택

<span id="text1" title="text1" >Header1</span>
<script type="text/javascript">
   $("span[id]").css("color",'red');
</script>

결과값

2-2 element[attribute=value] attribute속성이 value값인 된 요소 선택

<span title="text2">Header2</span>
<script type="text/javascript">
   $("span[title = 'text2']").css("color",'red');
</script>

결과값

2-3 element[attribute!=value] attribute속성이 value값이 아닌 요소 선택

<span title="text1">Header2</span>
<script type="text/javascript">
  $("span[title != 'text2']").css("color",'red');
</script>

결과값 

2-4 element[attribute$=value]  attribute속성이 value값으로 끝나는 요소 선택

<span title="valueText1">Header2</span>
<script type="text/javascript">
 $("span[title $= 'Text1']").css("color",'red');
</script>

결과값

2-5 element[attribute|=value] attribute속성이 'value'일치 또는 'value-'으로 시작하는 요소

<span title="text1">Header2</span><br/>
<span title="text1-text2">Header2</span> 
<script type="text/javascript">
 $("span[title |= 'text1']").css("color",'red');
</script>

결과값

2-6 element[attribute^=value] attribute속성이 value값으로 시작하는 요소 선택

<span title="text1text2">Header2</span> 
<script type="text/javascript">
 $("span[title ^= 'text1']").css("color",'red');
</script>

결과값

2-7 element[attribute~=value] attribute 속성이 value 단어를 포함되어 있는 요소 선택

<span title="text1 text2">Header2</span> 
<script type="text/javascript">
 $("span[title ~= 'text1']").css("color",'red');
</script>

결과값

2-8 element[attribute*=value] attribute속성이 value 값을 포함되어 있는 요소 선택

<span title="text1text2">Header2</span>  
<script type="text/javascript">
 $("span[title *= 'text1']").css("color",'red');
</script>

결과값

제이쿼리(Jquery) 아이디, 클래스, 태그 선택자#1

제이쿼리를 이용해 특정 요소를 선택하는 방법에 대해 알아보겠습니다.

이번에는 요소에 해당하는 아이디, 클래스, 태그를 이용해 선택을 해보겠습니다.

아이디, 클래스, 태그 값으로 찾기위해서는 제이쿼리가 정해놓은 아래 표에있는 기호를 이용해 선택을 하시면 되겠습니다.

1. 아이디, 클래스, 태그 선택자 표

2. 아이디, 클래스, 태그 선택자

 <h1 id="red">Header1</h1>
 <h1 class="blue">Header2</h1>
 <h2>Header3</h2>
 
 <script type="text/javascript">
  $("#red").css("color","red");
  $(".blue").css("color","blue");
  $("h2").css("color","gray");
 </script>

결과값

1. Jquersy 란?

Jquey를 사용하기 위해서는 Javascript언어에 대해 기본적인 지식이 필요로 합니다.

2. Jquery 프로젝트 적용

제이쿼리(jquery) 공식 홈페이지를 통해 https://jquery.com 다운로드가 가능합니다.

프로젝트 적용방법은 2가지로 나눠집니다.

1. CDN 주소를 활용한 방법

  https://developers.google.com/speed/libraries/#jquery 주소를 접속을 하면 아래와 같은 화면이 보입니다.

 현재 기준으로 버전이 3.x 버전까지 지원이 되고 있으니 가급적이면 최신버전으로 이용을 합니다.

 버전에 해당하는 소스를 복사를 해 사용을 하고자 하는 프로젝트에 <head></head> 태그 안에 포함을 시켜줍니다.

<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

2. 라이브러리 다운 후 적용

  https://jquery.com/download/ 페이지에 접속을 하면 아래와 같은 화면이 나옵니다.

 여기서 실제 버전(production), 개발버전(development)이 존재를 하는데 필요하시는 버전을 클릭해 다운 후

 프로젝트에 <head></head>태그 사이에 다운로드한 파일을 경로를 넣어주시면 됩니다.

<head>
   <script src="../js/jquery-3.2.1.min.js"></script>
</head>

 3. Jquery 기능

3-1 요소 선택자

<링크>