제이쿼리 기본정리

1. 요소선택
2. 이벤트바인딩
3. 탐색메서드
4. 효과메서드 등등

---

제이쿼리 생성자 함수 이름 호출

$()

 

문자열만 하는 경우 

 

window 객체 키워드 의미 "" 필요없음

$(window)

 

자신이만든 객체를 선택할때 '' 사용 

$('#header .gnb>li:nthchild(1)')

---

이벤트를 바인딩하는방식

$('#header .gnb>li').on('click', function(){

  $(this)

  $(this).find('.depth02')

  $(this).siblings();

  $(this).parent()

  $(this).closest('#header');

});

제이쿼리 객체가 리턴됨

.on = addeventlitener 

 

---

 

2개 인수가 들어감 

이벤트 인수가 들어감 

.on(이벤트명 , 이벤트 핸들러 콜백함수(익명함수) : 이벤트가 발생된 뒤에 실행()

 

  $(this) 이벤트가 걸린 자기 자신으로 탐색하라. 

  $(this)가 이미 부모이기에 .find('.depth02') 자식 요소 만 적어라 

  $(this).siblings(); 자신외에 형제만 선택 this 가 li 이기에 이름을 적을 필요가 없음 

  $(this).parent()  부모는 하나이기에 이름 적을 필요없음

  $(this).closest('#header'); 자신의 조상중 선택하는거라 여러 조상이 있으므로 이름을 적어야한다. 

 

 

$('#header .gnb>li').eq(0) // li 중 첫번째 요소 선택

 

변수사용시

var idx = 0;

$('#header .gnb>li').eq(idx) // li 중 첫번째 요소  변수를 선택할때 좋음

---

이벤트 전파 방지

$('#header .gnb>li').on('click', function(e){

 e.preventDefault(); 

 e.stopPropagation();

});

 

 e.preventDefault(); a 를 클릭시 li가 같이 클릭 되는 버블링 현상을 막아라 // a 기본이벤트 막기 

 e.stopPropagation(); 백엔드와 이벤트가 겹칠때 이벤트가 충돌나지 않도록 (팝업, 폼요소 등등) // 이벤트 상위전파 막기

 

 

---

효과메서드

함수이기 때문에 카멜표기법 사용

 

.addClass('on') / active , 

.removeClass(),

.toggleClass(),

.hasClass()

 

.hasClass() 특정 동작을 특정 페이지 안에서만 동작 시킬때 있냐 없냐로 판단 

 

.slideDown(600) 높이자동으로 늘리는것. 기본값 300 시간지정 가능 / 기준에 따라 다름 (bottom일 경우 위로 펼처짐)

.slideUp() 높이를 0으로 만들고 display none 으로 걸어서 안보이게 만든다. 

.slideToggle() 효과를 안에서 반복할때 

.fadeIn() fadeout() fadeToggle 서서히 보이고 서서히 안보이게 하는것  /  fadeToggle 페이드를 반복할때

.show() .hide(), toggle() 보였다 안보였다 할때 toggle() 보였다안보였다 반복

.stop 이전효과 메서드를 멈춰줌 

.animate ({crollTop: 0}, 600, 'easeOutExpo') 탑버튼을 누르면 맨 위로 이동 / 시간사용 가능 'easeOutExpo' 잘 안씀

 

---

 

$('요소').length 요소의갯수 (존재여부 판단시)
$('요소').offset().top 문서 위에서 요소까지의 y위치
$('요소').position().left 포지션 기준에서부터 요소까지의 좌측위치
$('요소').outerWidth() 패딩, 선 포함한 크기
$('요소').hasClass('on') 요소에 해당 클래스 존재여부
#('input[type=text]').val() 인풋요소의 값 가져오기
$('요소').html('요소안에 들어갈 html')
$('요소').attr('src', '값') html의 속성에 접근 또는 가져오기