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란?
: 실행 대기중인 메서드 또는 함수의 저장소를 일컫는다.
'개발자 양성과정 필기노트 > JavaScript' 카테고리의 다른 글
제이쿼리 선택자 (0) | 2021.08.25 |
---|---|
History객체, 문서객체모델 ( DOM ) (0) | 2021.08.10 |
브라우저객체모델 BOM (0) | 2021.08.04 |
Math메서드, 배열메서드 (0) | 2021.08.03 |
재귀함수, 내장객체 (0) | 2021.08.02 |
댓글