교육/Javascript&Jquery12 자바스크립트 + 제이쿼리 입문 day 12 자바스크립트 + 제이쿼리 입문 day 12 버튼 클릭시 함수 실행하는 구현 바닐라 버전과 j쿼리 버전 // 바닐라 버전 elBtn.forEach(function(btn, key) { btn.onclick = () => { elContent.innerHTML = ` ${data[key].name} ${data[key].detail} `; }; }) // j쿼리 버전 $(".tab button").on('click', function () { let idx = $(this).index(); let d = ` ${data[idx].name} ${data[idx].detail} `; $('content').html(d); }); 2023. 1. 18. 자바스크립트 + 제이쿼리 입문 day 11 회원가입시 form 구현하기 form 1 약관동의 약관동의 개인정보수집동의 전체동의 스위치버튼 form 2 정규식을 활용한 유효성 검사 slide -> 템플릿 가져와서 구현하기 Slide 1 Slide 2 Slide 3 Slide 4 슬라이드 테스트 2023. 1. 16. 자바스크립트 + 제이쿼리 입문 day 10 jquery Load method를 활용하여 로드하기 main.html과 sub.html 셋업 header { background-color: #000; text-align: center; padding: 15px 0; } header a { color: #fff; padding: 0 20px; } main { height: 50vh; font-size: 3rem; display: flex; align-items: center; justify-content: center; } HOME SUB-01 SUB-02 jquery Load Method 활용 sub1 페이지입니다. js 파일에서 로드를 거는 방식 $('main').load('./main.html') index.html에서 js 불러올 때 다 읽고 .. 2023. 1. 11. 자바스크립트 + 제이쿼리 입문 day 9 자바스크립트 + 제이쿼리 입문 day 9 휠보다 대세는 scroll이다 ! $(window).on('scroll', function(){}) // 이벤트를 발생시키는 방법 이미지를 넣고 // $('body').prepend(''); // prepend = 앞부분에 추가 , append = 뒤쪽에 추가 $("body").append(''); let imgs = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg"]; let imgTag = ""; $.each(imgs, function (key, url) { imgTag += ``; }); $(".scroll").html(imgTag); 상단으로부터 위치를 알아내고 // 상단으로부터 위치를 알아내기 let offset =.. 2023. 1. 9. 자바스크립트 + 제이쿼리 입문 day 8 자바스크립트 + 제이쿼리 입문 day 8 setInterval을 통해 올라가는 상태바 구현하기 slide를 구현해보기 버튼이 펼쳐지도록 한다 ! let idx = $(this).index(); $('header li').find('div').slideUp(); $('header li').eq(idx).find('div').slideDown(); slide toggle을 구현하기 FAQ 1 FAQ 답변 FAQ 2 FAQ 답변 전체 코드 2023. 1. 6. 이전 1 2 3 다음
