제이쿼리 메서드

JSP  ||  DAY9  ||  제이쿼리 메서드

---

 1. 속성 메서드 

  1) .attr ( "속성명" , "지정할 속성값" )

• 지정한 '속성명'에 '속성값'을 지정한다.
• .attr( "속성명" ) : '속성명'의 속성값을 반환한다.
• 속성을 여러개 지정하는 경우, 중괄호 { }안에 콤마로 구분하여 지정할 수 있다.

$("img").attr( { src:"korea.png",
		width:200,
		height:200 }
		);

 

  2) .removeAttr ( "제거할 속성명" )

• 지정한 속성명과 일치하는 모든 속성을 제거한다.

 

  3)  .prop ( "속성명" , true )

• .attr( ) .removeAtter( )메서드를 합친것.
• true / false로 "속성"을 적용/해제할 수 있다.
• 최신버전 제이쿼리에서 지원함. 

 

  4) .val ( "값" )

• input, select, textArea와 같은 form 태그에서 값을 가져올 때 사용함.
• input, script 태그에서 사용할 수 없다.

 

  5) .text ( )

• 선택된 요소의 자손을 포함한 text값을 반환한다.

  5-1) .text("값")

• 자손요소에 html태그가 포함되면, 모두 제거한 후 "값"에 해당하는 문자열만 반환한다.

  6) .html ( )

선택된 요소의 자식태그의 html요소를 포함한 텍스트값을 반환한다.

 

---

 2. 조작관련 메서드 

DOM을 추가/삭제/수정/복사와 같은 처리를 손쉽게 할 수 있도록 도와주는 메서드.

HTML화면에 없던 특정 값을 보여주거나, 또는 화면에 있던 값을 수정/삭제하여 동적인 html화면을 구현할 수 있다.

 

  1) .append ( )

• 뒤에 추가함

 

  2) .prepend( )

• 앞에 추가함

 

  3) .after ("content")

• 선택된 태그 뒤에 "content"를 추가한다.
• "content"가 기존 html문서 내부에 존재하는 경우, 해당 content가 대상 html태그로 이동한다

 

  4) .wrap (" <태그></태그> ")

• 선택한태그를 지정한 "<태그></태그>"로 감싼다.
•  "<태그>텍스트</태그>"  => 텍스트 다음에 선택한태그가 감싸진다

 

  5) $( '변경할 요소' ).replaceWith( target )

• 선택한요소를 제거하고, target에 해당하는 요소를 그 자리에 대입한다.

// 클래스가 third인 요소를 제거하고, 그 자리에 클래스가 first인 요소를 이동시킨다.
$('.third').replaceWith($('.first'));

 

  6) $(' 변경결과 ').replaceAll ('변경할 요소')

• .replaceAll( )메서드와 기능은 동일함.
• * 변경할 대상의 위치가 다름에 주의!

// class가 inner인 모든 요소를 <h2>영웅들</h2> 로 변경시킨다
$('<h2>영웅들</h2>').replaceAll('.inner');

 

  7) .empty ( );

• 선택한 태그는 남기고, 그 자식요소만 모두 제거함

 

  8) .remove ( '제거대상' )

• 태그까지 모두 삭제함

 

  9) .clone ( )

선택된 요소를 복제한다.

이때, 모든 하위요소까지 포함하여 복제한다.

$(function() {
// class가 hello인 요소를 복제하여 class가 goodbye인 요소에 추가함.
	$('.hello').clone().appendTo('.goodbye');
})

 

---

 3. 유틸리티 관련 메서드 

배열을 순회 / 필터링 / 배열형식으로 변경 / 배열 복제 / 데이터 공백 제거 / .xml파일, .json파일의 데이터를 파싱처리하는 등, 프로그램을 개발할 때 효율적으로 사용가능한 메서드를 일컫는다.

 

  1) $('선택자').each( function ) 

• 선택된 DOM요소들을 손쉽게 반복하여 순회할 수 있다.
• 프로그래밍 언어의 for반복문과 비슷한 역할을 하고, html문서 내부에 동일한 태그로 구성된 요소를 반복처리할 때 유용하게 사용할 수 있다.

$(function() {
	$('li').each(function(index,element) {
		console.log(index+":"+$(this).text());
	});
});

 

  2) jQuery.each( 배열명 , function( 키, 값 ) ) 

• 배열 및 Map형태의 반복되는 데이터를 순회하면서 값을 얻어올 때 사용한다.
• function내에서 false를 반환하여 반복순회를 중지시킨다.

 $(function() {
	// 5개의 문자열이 저장된 배열의 데이터를 얻어 콘솔에 출력
	var arr1 =["one","two","three","four","five"];
	jQuery.each(arr1,function(idx,obj){
		console.log("index:" + idx+"\t value:" + obj);
	 });
})

 $(function() {
// key와 value 한쌍으로 저장되는 json객체를 생성하고, 데이터룰 콘솔에 출력함.
	 var arr2= {one:1,two:2,three:3,four:4,five:5 };
	 jQuery.each(arr2,function(idx,obj){
		 console.log("키: "+idx+"\t obj: " + obj);
	 })
})

---

 4. 이벤트 

# 이벤트 객체

이벤트 핸들러함수는 이벤트 객체를 인수로 전달받을 수 있다.

이렇게 전달받은 이벤트 객체를 이용하여 이벤트의 성질을 결정하거나, 이벤트의 기본동작을 막을 수도 있다.

 

# .on( )메서드

특정 요소에 이벤트를 연결하기 위해 on메서드를 사용한다.

선택한 요소에 여러개의 이벤트 핸들러와 여러개의 이벤트를 같이 연결할 수도 있다.

 

# 이벤트의 연결

특정 요소에서 발생하는 이벤트를 처리하기 위해서는, 이벤트 핸들러 function을 작성해야한다.

이렇게 작성된 이벤트 핸들러 함수를 특정 요소에 연결하는 것을 이벤트의 연결이라고 한다.

 

# 이벤트를 연결하는 다양한 방법

1. $( '#btn' ).click( function(event){실행하고자 하는 제이쿼리 코드} );

2. $( '#btn' ).on( 'click' , function(event){실행하고자 하는 제이쿼리 코드} );

3. $('#btn').bind('click',function(){실행하고자 하는 제이쿼리 코드});

4. $('body').on({click:function(){실행하고자 하는 제이쿼리 코드}}, "#btn");

5. $('body').on('click','#btn',function(){실행하고자 하는 제이쿼리 코드});

 

# .trigger( 이벤트타입, 파라미터 )

- 이벤트가 발생할 때 실행될 함수나, .on( )메서드로 연결된 이벤트 핸들러를 강제로 실행시키는 메서드.

- 실행할 이벤트에 순서를 지정하여 작동하게할 수 있다.

• '이벤트타입' => 'click' 'submit' 등
• '파라미터' => 이벤트핸들러에 전달하기 위한 데이터로, 생략가능함

// 버튼을 클릭하지않고도, .trigger메서드를 사용하여 버튼을 클릭한 효과를 강제로 구현하기
$(function() {
	//1. 클릭이벤트 발생시의 이벤트핸들러.
	$('#btn').on("click",function(){  
		console.log($(this).text());  //$(this) => 이벤트가 발생한 요소를 가져옴
	});
    
	//2. 클릭효과를 강제로 발생시켜 1번에서 생성한 이벤트핸들러를 작동시킴.
	$('#btn').trigger('click'); 
})

---

 5. 효과 및 애니메이션 메서드 

# 효과 메서드

: 선택한 요소를 역동적으로 숨겼다가 보이게하는 기능을 가진 메서드.

 

# 효과메서드의 종류

* 콜백함수는 생략가능함

 

.hide( '효과속도' , 콜백함수 ) : 노출되어 있는 요소를 숨김.
.show( '효과속도' , 콜백함수 ) : 숨겨져 있던 요소를 노출시킴.
.toggle( ) : 숨겨져 있던 요소는 노출시키고, 노출되어 있던 요소는 숨김.

.fadeln( '효과속도' ) : 숨겨져 있던 요소가 점점 선명해지면서 노출됨.
.fadeOut( '효과속도' ) : 노출되어 있던 요소가 점점 투명해 지면서 사라짐.
.fadeToggle( '효과속도' ) : 노출되어 있던 요소는 점점 사라지고 , 사라져 있던 요소는 점점 노출됨.
.fadeTo( '효과속도' , 투명도 ) : 노출되어 있던 요소에 투명도를 지정한 만큼 숨김.

.slideUp( '효과속도' , 콜백함수 ) : 노출되어 있던 요소를 위로 접으며 숨김.
.sideDown( '효과속도' , 콜백함수 ) : 숨겨져 있던 요소가 밑으로 펼쳐짐.
.slideToggle( '효과속도' , 콜백함수 ) : 숨겨져 있던 요소는 아래로 펼쳐지고, 노출되어 있던 요소는 접히면서 숨겨짐.

.animate( { 애니메이션 속성 : "값" } , 동작속도 , 콜백함수 ) : 선택한 요소에 애니메이션을 적용함.

/* h2 => 5초만에 왼쪽 바깥여백을 250px띄워 앞으로 전진하는 애니메이션 적용하고, 
h2요소의 너비가 100px만큼 점점 커지게 하고, 투명도 30%적용하는 애니메이션을 적용*/
$('h2').animate( {marginLeft:"250px", opacity:0.3, width:"100px"},
		5000,
           	function(){alert("콜백함수자리");}
                );
                
* opacity : 투명도

---

# 효과제어 메서드

: 효과 / 애니메이션이 적용된 요소에 동작을 정지시키거나 초기의 동작의 실행을 지연시키는 등,

효과를 제어할 수 있는 메서드.

 

# 효과제어 메서드의 종류

.stop( ) : 현재 실행 중인 효과를 모두 정지시킴.
.delay( 밀리초 ) : 스택에서 대기중인 효과를 지정한 시간만큼 지연시킨 후 발생시킴.

.queue( ) : 큐에 저장된 메서드를 반환하거나, 큐에 메서드를 저장하고 이후에 적용된 메서드는 모두 제거함.
.clearQueue( ) : 큐에 들어와 대기중인 메서드 중, 최초의 실행중인 메서드를 제외한 다른 메서드는 모두 제거함.
.dequeue( ) : 큐에 저장된 메서드를 모두 제거함.

.finish( ) : 진행 중인 애니메이션이 강제로 완료 시점으로 간 후 종료됨. (동작은 생략하고 결과만 출력함)

 

# queue란?

: 실행 대기중인 메서드 또는 함수의 저장소를 일컫는다.