최근 글

jQuery / jQuery.noConflict() / 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기

noConflict로 이전 $를 복원하고 지역 별칭으로 jQuery를 사용합니다. 두 버전 실행 예제로 true 인자의 차이, 로딩 순서와 플러그인·데이터 저장소의 한계를 확인합니다.

jQuery / 특정 요소를 자식 요소로 갖지 않는 요소 선택하는 방법

특정 자손이 없는 요소와 직접 자식이 없는 요소를 구분해 선택합니다. 전체 예제로 not·has·children과 :empty의 차이, 텍스트·공백·주석·숨긴 요소의 영향을 확인합니다.

jQuery / 자식 요소의 개수를 기준으로 부모 요소 선택하기

filter 콜백에서 부모마다 children().length를 계산해 조건에 맞는 부모를 선택합니다. 전체 예제로 직접 자식·전체 자손, 정확한 수·최솟값, 숨긴 항목과 동적 변경을 비교합니다.

jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기

메뉴의 원래 위치를 지나면 상단에 고정하고 위로 돌아오면 복원합니다. 전체 예제로 본문 자리 유지, 창 크기 변경 시 폭 조정, 앵커 제목 가림과 CSS sticky 선택 기준을 설명합니다.

jQuery / meta 태그의 값 가져오기

meta의 name·property에 맞는 선택자로 content 값을 읽습니다. 전체 예제로 빈 문자열, 없는 속성, 중복 태그와 현재 DOM의 차이를 구분하고 안전하게 결과를 표시합니다.

jQuery / 선택한 요소의 가로 크기 가져오기 - width, innerWidth, outerWidth

width·innerWidth·outerWidth가 포함하는 콘텐츠, padding, border와 margin의 차이를 비교합니다. 두 box-sizing 모델의 전체 예제로 계산값, 소수 너비와 측정 시 주의점을 확인합니다.

jQuery / 체크박스 모두 선택, 모두 선택 해제 만들기

전체 선택 체크박스와 개별 항목을 양방향으로 동기화합니다. 전체 예제로 일부 선택 표시, 비활성 항목 제외, 동적 추가·삭제, 빈 목록과 폼 전송값을 확인합니다.

jQuery / HTML 태그 바꾸기

새 HTML 요소를 만들어 기존 태그를 교체하는 방법을 설명합니다. 실행 가능한 예제로 입력값·텍스트·주석·자식 이벤트를 보존하고, 기존 요소의 속성과 이벤트가 어디까지 유지되는지 확인합니다.

jQuery / 맨 위로 부드럽게 이동하는 링크 만들기

기본 앵커 링크에 jQuery 스크롤 효과를 더해 맨 위로 이동합니다. 전체 예제로 연속 클릭 대기열, 동작 줄이기 설정, 사용자 중단과 이동 후 키보드 포커스를 확인합니다.

jQuery / .ajax() / 동기식으로 사용하는 방법

jQuery.ajax()의 async:false가 실행 순서와 화면 반응에 미치는 영향을 설명합니다. 로컬 서버 전체 예제로 동기식 코드를 확인하고, 비동기 연속 요청과 실패·시간 초과·중지 처리로 바꾸는 방법을 살펴봅니다.