자주 쓰는 Jquery 정리 / Jquery 문법

2024-03-13

자주 쓰는 Jquery

Jquery로 로딩마스크 구현 방법

https://0songha0.github.io/web-dev/2022-12-13-1

document ready 완료 후 실행

<script>
  $(document).ready(function(){
    // 실행 코드
  });
</script>

축약된 형식

$(function() {
    // 실행 코드
});

위/아래 슬라이드 숨김 효과

$('.클래스명').slideUp("fast");
$('.클래스명').slideDown("slow");
$('.클래스명').slideToggle({duration: 1000});

select botton 클릭 시 하단 ul을 보이고, 그 외 영역 클릭 시 display:none; 하는 처리에 주로 사용됩니다.
slideUp : 현재 보이는 요소를 위로 슬라이드하여 숨김 처리합니다.
slideDown : 현재 숨겨진 요소를 아래로 슬라이드하여 보이게 처리합니다.
slideToggle : 누를 때마다 현재 요소를 슬라이드하여 숨김 또는 보이게 토글합니다.

인풋의 부모 Div에 속한 히든 인풋 값 찾기

$('.인풋클래스명').on('keyup', function(event) {
  const parentDiv = $(this).parents('.부모클래스명');

  const hiddenVal = parentDiv.find('.히든인풋클래스명').val();
}

Javascript 리스트를 jQuery로 변환하여 반복

const 인풋클래스명s = document.querySelectorAll('.인풋클래스명');

// Javascript NodeList를 jQuery 객체로 변환
const $인풋클래스명s = $(인풋클래스명s);

$인풋클래스명s.each(function(index, bboxInput) {
  // 반복 작업 수행
});

ID가 특정문자열로 시작하는 Dom의 수

const elements = $('[id^="특정문자열"]');

console.log(elements.length);

클래스명으로도 검색

const elements = $('[id^="특정문자열"].클래스명');

ID가 특정 문자열로 시작하고, 클래스명이 들어간 요소들이 반환됩니다.

부모 태그 이름으로 찾기

const childElement = $('#자식ID');
const parentDiv = childElement.closest('부모태그이름');
if (parentDiv.length) {
    console.log('부모 요소를 찾았습니다.');
}

closest 함수로 부모 태그 이름과 일치하는 가장 가까운 부모 요소를 찾습니다.

같은 클래스명을 가진 요소 수

let classCnt = $('.부모클래스명 .클래스명').length;

부모 존재 여부 확인

const parentArea = $(this).parents('.부모클래스명');
	
if (parentArea.length !== 0) {
  // 부모가 존재하는 경우 실행
  parentArea.hide();
}

자식 요소 찾기

-- 직계 자식 중에서 선택
$(".parent").children(".child").css("color", "blue");

-- 하위 모든 자식 중에서 선택
$(".parent").find(".child").css("color", "blue");

같은 class명을 가진 각 부모 요소의 하위 자식들을 찾아 CSS를 부여하는 로직입니다.

같은 클래스명을 가진 모든 인풋 체크박스 체크 해제

$('.클래스명').prop('checked', false);

체크박스 change 이벤트 호출

$('#ID명').prop('checked', false).trigger('change');

자바스크립트로 체크박스 변경 시 change 이벤트가 호출되지 않으므로, trigger를 통해 강제로 호출시켜야 합니다.

ID명을 가진 인풋 체크박스 체크

$('#ID명').prop('checked', true);