jQuery 기초 문법

▶ DOM 탐색 메서드

 

$(선택자).children(요소명) : 직계 자식 요소 중에서 요소명에 해당하는 DOM 탐색

$(선택자).find(요소명) : 자손 요소 모두 탐색해서 요소명에 해당하는 DOM 탐색

$(선택자).parent() : 직계 부모 탐색

$(선택자).siblings(요소명) : 형제 요소 중에서 요소명에 해당하는 DOM 탐색

$(선택자).next() : 형제 요소들 중에서 바로 다음에 있는 DOM 탐색

$(선택자).prev() : 형제 요소들 중에서 바로 이전에 있는 DOM 탐색

$(선택자).eq(순번) : 형제 요소들 중에서 해당 순번에 맞는 DOM 탐색

$(선택자).first() : 형제 요소들 중에서 제일 처음 요소 DOM 탐색

$(선택자).last() : 형제 요소들 중에서 제일 마지막 요소 DOM 탐색

$(선택자).index() : 선택자의 인덱스 값을 가져옴

$(선택자).scrollTop() : 선택한 요소의 스크롤바 수직 위치를 반환 (동적인 값)

$(선택자).offset().top : 선택한 요소의 위치를 가져오거나 특정 위치로 이동, 문서 끝부터 선택한 요소까지의 거리 (정적인 값)

 

$(window) : 윈도우 화면

$("html, body") : html 문서

 

$(this) : 제이쿼리 이벤트문 안에서 $(this)는 이벤트가 발생한 바로 "그" 대상을 지칭

 

 

▶ DOM 스타일링

 

$("선택자").css("속성명") : 해당 속성값 반환

$("선택자").css({속성명 : 속성값}) : 해당 속성값 변경

 

.fadeIn(속도) : fade 효과 추가(서서히 나타남)

.fadeOut(속도) : fade 효과 추가(서서히 사라짐)

.show() : display:block으로 요소 보임

.hide() : display:none으로 요소 숨김

.slideDown() : show()와 같이 요소를 보이게 처리

.slideUp() : hide()와 같이 요소를 숨김 처리

 

선택자.appendTo(부모요소) : 선택요소의 부모요소 안쪽에서 제일 뒤에 배치

선택자.prependTo(부모요소) : 선택요소의 부모요소 안쪽에서 제일 앞에 배치

 

 

▶ DOM 속성 제어

 

선택자.attr() : 선택한 DOM 속성 제어

선택자.attr({속성명 : 속성값}) : 해당 속성값 변경

선택자.attr("속성명") : 해당 속성값 반환

선택자.text() : 해당 DOM의 텍스트 내용을 반환

선택자.text("텍스트") : 해당 DOM의 텍스트 내용 변경

 

 

▶ DOM 생성

 

1. appen() 활용해서 태그, 속성을 직접 다 설정

2. html() 활용해서 모든 태그와 속성을 아예 문자열로 전체를 만들어서 삽입

 

 

▶ animate

 

$("선택자").animate({바꿀속성}, 지속시간, 가속도효과, 콜백함수);

 

자주 쓰는 특이한 가속도 효과명

"easeOutBounce" - 통통 튕기는 모션

"easeOutBack" - 살짝 밀렸다가 다시 제자리로 돌아오는 모션

"easeOutElastic" - 고무줄 튕기듯이 흔들리는 모션

"easeOutExpo" - 점점 느려지는 모션

"easeInOutBack" - 살짝 당겨졌다가 움직이고 살짝 밀려갔다가 다시 제자리로 돌아오는 모션

 

animate()로 모션 적용이 불가능한 속성

- transform, gradient, box-shadow

 

animate()메서드의 마지막 인수에 함수(콜백함수)를 넣으면 해당함수는 강제로 동기화를 해준다

 

 

▶ 함수 자동화기능

let timer = setInterval(콜백함수, 시간)

clearInterval(timer);

 

 

▶ 제이쿼리 each문으로 반복DOM생성

 

$(fruit).each(function(index, data){
    console.log(data);
    console.log(index);
});

/*
for (let i = 0; i < fruit.length; i++){
    console.log(fruit[i]);
}
자바스크립트 for문과 동일
*/

 

▶ ajax를 이용해 외부 데이터 가져오기

 

$.ajax({
        url: "데이터를 가져올 주소",
        success: function(data){
            console.log(data);
        },
        error: function(err){
            console.log(err);
        }
    });
    
   $.ajax({
   		url: "데이터를 가져올 주소",
        type: "json"
   }).success(function(data){
   		console.log(data);
   }).error(function(err){
   		console.err("ERROR!!");
   });