0songha0

자주 쓰는 Jquery 정리 / Jquery 문법

자주 쓰는 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);

최신 글