개인 공부용 블로그

로그인하세요 이메일을 입력해주세요 패스워드를 입력해주세요 전송 닫기 1. 검은색 배경을 선택했을때에만 모달창이 닫히게 하기 먼저 black-bg를 클릭했을 때 hide처리를 해주면 다음과 같다. $('.black-bg').click(function(){ $('.black-bg').hide(); }) 하지만 검은색 배경이외에 다른 부분을 클릭했을 때에도 모달창은 닫히게 되는데 이것은 이벤트 버블링 현상때문이라고 한다. 🤷‍♂️ 그럼 이벤트 버블링은 무엇인가? 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 이벤트버블링 자세한 내용 보러가기 이벤트..

See the Pen aos를 이용한 top버튼 만들기 by limhaneul2244 (@limhaneul2244) on CodePen. $(document).ready(function(){ $("#top_btn").click(function(){ $("html,body").stop().animate({"scrollTop":0},1000); //html, body 태그 기점으로 n초 뒤 상단 이동 }); $(window).scroll(function(){ let scroll = $(window).scrollTop(); //윈도우창의 화면 높이 측정 if(scroll >= 500){ // " ?? " 이 넘어갈 경우 $("#top_btn").fadeIn('slow'); } else { // " ?? " 이..

See the Pen 1029_탭 만들기 by limhaneul2244 (@limhaneul2244) on CodePen. $(document).ready(function(){ // 0 $('.list .tab-button').click(function(){ // 1 let indexVal = $(this).attr('data-tab'); $('.list li').removeClass('active'); // 2 $('.tab-content').removeClass('show'); // 3 $(this).addClass('active'); // 4 $('#' + indexVal).addClass('show'); // 5 }); }); //방법2 :: tabContents의 길이를 체크해 탭길이가 늘어나도..

#1. 접었다 펼쳐지는 아코디언 형식 See the Pen 아코디언 by limhaneul2244 (@limhaneul2244) on CodePen. $(document).ready(function(){ $('.accodionList ul').hide(); $('.accodionList .subOpen').click(function(){ if( $(this).hasClass('active') ){ //3-0 $(this).parent().next().slideUp(); //3-1 $(this).removeClass('active'); //3-2 } else { //4-0 $('.accodionList').find('.active').parent().next().slideUp('slow'); //4-1 $..

함수는 어떻게 작성하느냐에 따라 실행 순서가 달라진다. 1. 페이지를 로드 한 뒤 함수 실행 $(document).ready(function(){ //do someting }); 2. 함수를 먼저 실행 $(function (){ //do something });

viewport 의 높이 값은 아래와 같이 구할 수 있다. $(window).scrollTop(); $(window).scroll(function(){ let scrollValue = $(window).scrollTop(); if (scrollValue >= 100) { $('.nav-menu').addClass('header-bg'); } else if (scrollValue == 0) { $('.nav-menu').removeClass('header-bg'); } }); $(window).scroll(function(){ 의 구문은 스크롤을 실행했을 때 내부 구문을 실행해준다. 내부 구문에는 100보다 크거나 같을때 addClass()를 붙여서 색깔이 바뀌도록 해주었다. 다시 scroll을 올렸을 때..

form 서버로 데이터를 전송하기 위한 수단 See the Pen 1019_jQuery_form by limhaneul2244 (@limhaneul2244) on CodePen. jQuery를 이용해 input의 특정값 가져오기 form전송 시 공백유무에 따라 전송유무 달리하기(feat. if문)

chain이란? jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙이 있다. 이를 이용하면 한번 선택한 대상에 대해 연속적 제어를 할 수 있다. chain의 장점 1. 코드가 간결해진다. 2. 인간 언어와 유사해 사고의 자연스러운 과정과 일치 chain을 이용한 jQuery See the Pen 1019_jQuery_chain by limhaneul2244 (@limhaneul2244) on CodePen. 탐색(traversing) chain의 대상을 바꿔서 체인을 계속 연장시키는 방법 See the Pen 1019_jQuery_traversing by limhaneul2244 (@limhaneul2244) on CodePen. https://api.jquery.com/category..

모달창이 움직이게 하려면 아래와 같은 jquery 구문을 사용한다. [예시] $(' ').animate({margin-top : '0px'}); HTML 로그인하세요 이메일을 입력해주세요 패스워드를 입력해주세요 전송 닫기 black-bg 를 위에서 아래로 slide Down 하게 하려면 우선 CSS에서 margin-top의 위치값을 마이너스로 지정해 브라우저 밖으로 날린다. CSS .black-bg { display: none; background-color: rgba(0,0,0,0.5); position: fixed; z-index: 5; /*부트스트랩이 1~4까지 사용하고 있으므로*/ width: 100%; height: 100%; margin-top: -90%; } jQuery $("#blue-bt..

form 전송 시 이메일 input안 값이 공백일 경우 전송을 막는 기능 추가하기 전송 닫기 방법1. //조건1-0. input이 둘 중 하나라도 공백이면 폼전송이 되면 안됨 //조건1-1. input이 공백이 아닐경우 폼 전송 해야됨 $('#myform').on('submit', function (e){ let emailValue = $('#email').val(); let pwValue = $('#pw').val(); if( emailValue === '' || pwValue === ''){ e.preventDefault(); } else { $('.form-control').submit(); } }); //if의 조건식에서 공백인 부분만 걸러내면 되기 때문에 //else 부분은 자동으로 전송되게 s..