vanilla JS로 siblings 구현하기

jQuery의 메소드 중 하나인 siblings()는 선택한 자신 요소를 제외한 형제 요소들을 모두 고르는 메소드다. 이를 바닐라 자바스크립트로 구현하려면 filter() 를 사용해 비교적 간단하게 구현할 수 있다. 예제코드 HTML one two three jQuery $(".one").siblings(); JavaScript const siblings = (el) => [...el.parentElement.children].filter(node => node != el); const one = document.querySelector('.one'); console.log(siblings(one)); // 함수에 엘리먼트를 넣으면 그 엘리먼트의 형제 요소들을 배열로 반환한다. // > (2) [li.t..

2023.02.13

input 글자수 입력 후 다음 칸에 focus

input maxlength 값 만큼 입력 후 다음 input에 자동으로 focusing 된다. 카드번호 입력, 비밀번호 1글자씩 입력 등에 사용된다. 카드번호 취소 취소 취소 취소 유효기간 취소 $(".section__joincard .form__item-input.flex input").keyup (function () { var charLimit = $(this).attr("maxlength"); if (this.value.length >= charLimit) { $(this).parent().next().find('input').focus(); return false; } });

2022.12.23

노드 복제와 템플릿 Node clone, template

참고 notion https://www.notion.so/mioksong/JavaScript-DOM-for-Vanilla-JS-c6edf7a6bbe2405595d91d21eda3bc1e#ed58eb48a5c3422db5d305e4127938d3 JavaScript & DOM for Vanilla JS 목차 www.notion.so JS window.addEventListener("load", function(){ var notices = [ {id:5, title:"추가한당~~~", regDate:"2019-01-26", writerId:"newlec", hit:"0"}, {id:6, title:"복제한당~~", regDate:"2019-01-26", writerId:"newlec", hit:"0"} ]..

2022.05.30

반응형 네비게이션 2

반응형 네비게이션 2 해상도 별 다르게 표현되는 네비게이션 햄버거먹구잡다 조아란1 조아란2 조아란3 조아란4 조아란5 CSS /* 와이드 pc */ header{ height:60px; background:#F90; padding-top:20px} header .menuOpen{position:absolute; right:20px; top:20px; display:none} header .mainMenu{width: 450px; margin:0 auto; background:#FC3;} header .mainMenu ul{overflow:hidden;} header .mainMenu li{ float:left; margin-right:15px} header .mainMenu li a{display:blo..

2022.01.11

반응형 네비게이션 1

jQuery 반응형 네비게이션 1 해상도 별 다르게 표현되는 네비게이션 menu01 menu02 menu03 menu04 menu05 CSS /* CSS Document */ html,body{height: 100%;} *{margin:0; padding:0} a{ color:#333; text-decoration:none} ul{ list-style:none} #wrap{position:relative; width:1200px; height:100%; margin:0 auto; border:1px solid #ccc; overflow:hidden;} header{width:300px; height:100%; background:#ccc} .btn{ font-size:1.2rem; color:#333; ..

2022.01.11

영역의 크기 메소드

영역의 크기 페이지 내의 모든 사각형 영역의 너비와 높이를 알아내거나 수정할 때 사용한다. 영역의 크기를 가져오거나 설정하는 메소드 메소드 설명 .height() 영역의 높이를 리턴한다. (바깥 여백, 테두리, 안쪽 여백 X) .width() 영역의 너비를 리턴한다. (바깥 여백, 테두리, 안쪽 여백 X) 메소드 설명 .innerHeight() 영역의 높이에 안쪽 여백을 더한 값을 리턴한다. .innerWidth() 영역의 너비에 안쪽 여백을 더한 값을 리턴한다. .outerHeight() 영역의 높이에 안쪽 여백과 테두리 두께를 더한 값을 리턴한다. .outerWidth() 영역의 너비에 안쪽 여백과 테두리 뚜께를 더한 값을 리턴한다. .outerHeight(true) 영역의 높이에 안쪽 여백과 테두리..

2022.01.11