Frontend/jQuery

제이쿼리 이벤트 바인딩 및 강제 실행하기

on() 특정 요소에 이벤트를 바인딩하기 위해 사용 $('.firstBtn').on('click', function () { alert('첫번째 버튼'); $('.result').text('첫번째 버튼 클릭'); }) off() 특정 요소에 바인딩 된 이벤트를 제거하기 위해 사용 $('.firstBtn').off('click'); trigger() 호출한 이벤트 요소에 해당하는 바인딩된 함수를 찾아 강제 실행 // firstBtn 클래스에 바인딩 된 이벤트 요소 중에서 click 이벤트를 찾아 강제 실행 $('.firstBtn').trigger('click');

제이쿼리 - 마우스 관련 이벤트, css 속성

제이쿼리 - 마우스 관련 이벤트 mouseenter - 마우스 커서가 특정 부분에 올라간 상태 mouseleave - 마우스 커서가 특정 부분을 벗어난 상태 hover - 커서가 올라갔다가 벗어난 상태 - mouseenter + mouseleave css 속성 overflow - 요소 내에 컨텐츠가 초과하는 것을 설정 - 종류 : auto, visible, hidden, scroll transform - translate : x축과 y축으로 지정한 값만큼 이동 translate(x, y) - scale : 요소의 크기를 변경 scale(좌우, 상하) - rotate : 요소를 회전 rotate(회전) - skew : 요소를 왜곡시킴 skew(x, y)

제이쿼리 함수 - 이벤트 추가

클릭 이벤트 1. .click 사용 $("클릭 요소").click(function() { $("this").css("font-weight", "bold"); // 여기서 this는 클릭 요소와 동일 }); 2. .on 사용 인자가 2개일 때 $("대상 요소").on("이벤트", function(){ $(this).css("font-weight", "bold"); // 여기서 this는 .hideReply }); 예시 $(".hideReply").on("click", function(){ $(this).css("font-weight", "bold"); // .hideReply 요소를 클릭했을 경우, // hideReply 클래스에 폰트를 진하게 적용 }); 인자가 3개일 때 $("범위 제한").on("이벤..

제이쿼리 함수 - 요소 찾기

parent() - 부모들을 호출 eq() - index로 호출 ex) $(this).parent().eq(3); - 3번째 상위의 parent 요소 선택 closest() - 가장 가까운 부모 선택 siblings() - 형제 요소들을 호출 next() - 바로 옆에 있는 형제만 선택 children() - 직계 자식만 선택 find() - 자식 요소 검색