본문 바로가기

jQuery/jQuery 기본31

제이쿼리 위에서 아래로 모달팝업 on / is / 전체메뉴 버튼 클릭시 전체 모달 팝업이 내려옴 버튼 다음으로 나와야하기때문에 태그를 버튼 다음으로 키보드 접근성을 맞춰야 되기 때문에 탭키도 마찬가지 무조건 클릭하는 요소 다음으로 배치한다 // 헤더전체메뉴 $('#header .btn_all').on('click', function () { $('#header .all_menu_wrap').fadeIn().addClass('on'); }); $('#header .btn_close').on('click', function () { $('#header .all_menu_wrap').hide().removeClass('on'); }); $('#header .btn_all').on('click', function (e) { e.preventDefault; $(.. 2022. 11. 2.
제이쿼리 (e) e.preventDefault(); 제이쿼리 이벤트 전파 막기 event.preventDefault() 현재 이벤트의 기본 동작을 중단한다. -a 이벤트 상위 이동 막기 event.stopPropagation() 현재 이벤트가 상위로 전파되지 않도록 중단한다. -부모 둘다 막기 event.stopImmediatePropagation() 현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단한다 return false jQuery를 사용할 때는 위의 두개 모두를 수행한 것과 같고, jQuery를 사용하지 않을 때는 event.preventDefault() 와 같다. 제이쿼리안의 return false와 자바의 return false 는 다르다. 때문에 사용하면 안됨 a 태그 기본이벤트를 막아서 위로 이동시키지 않는.. 2022. 11. 2.
제이쿼리 input 요소에 따라 값을 바꾸기 keydown.keyup 추가디테일 만들기 검색창에 x버튼을 누르면 지워지고 포커스를 가게 하자 var searchInput = $('#header .search_wrap .input_wrap input[type=text]'); 기존에 만든 변수를 클리어 버튼에다 같은 변수를 사용해 주시위해 함수 밖으로 빼준다. 자주사용하는 #header .search_wrap .btn_clear 변수로 담아서 사용하자 var btnClear = $('#header .search_wrap .btn_clear'); 1. #header .search_wrap .btn_clear' btnClear 클릭시 searchInput 에 val()을 빈칸으로 초기화 btnClear.on('click', function () { searchInput.val('.. 2022. 11. 2.
제이쿼리로 셀렉옵션 값에 맞춰 input 에 val 밸류값 넣기 완성본을 보면 벨류로 셀렉 옵션 선택시 관련 키워드가 자동으로 적용된다. html로 구조 만들어주고 css 처리 인라인블럭시 간격생김으로 float 으로 처리 전체 float 지정시 부모의 높이가 날라가므로 clearfix 처리 clearfix 확인 css 로 나머지 위치를 잡아준다 벨류값 넣기 기존 사이트에 data-val 이라고 벨류값이 들어가있다. 우리도 벨류값을 넣어주자 벨류속성 브랜드전체() - 능이삼계죽 본죽(BF101) - 능이삼계죽 본죽&비빔밥(BF102) - 차돌주꾸미비빔밥 본도시락(BF103) - 보양 장어오리구이 한정식 본설렁탕(BF104) - 양곱창뚝배기 - 최초 input의 value는 능이삼계죽임 - .select_custom .select_list a 클릭시 data 속성값을 .. 2022. 11. 1.
제이쿼리 셀렉옵션 커스텀 셀렉옵션 분석하기 토글이 아닌 a로 감고 리스트형식 분석 본아이에프는 버튼식을 넣었음 롯데몰의 셀렉옵션을 응용하여 본아이에프에 적용해보기 $('.select_custom .select a').on('click', function () { console.log($(this).text()); // select 커스텀 $('.select_custom .btn_select').on('click', function () { $(this).toggleClass('on'); $('.select_custom .select').toggle(); }); html 메서드는 태그 까지 다 가지고옴 $('.select_custom .select a').on('click', function () { // $(this).text(.. 2022. 11. 1.
제이쿼리 util - toggle , trigger('focus'), tabindex="0" 검색표시 클릭시 아이콘 변경 & 하위요소 나오게 하기 먼저 css 로 자리와 on 적용시 바뀔수 있게 설정 #header .util_wrap .btn_toggle { width: 51px; height: 51px; margin-left: 5px; border: 1px solid rgba(225, 225, 225, 0.5); text-indent: -9999px; background: url(../images/gnb_util.png) no-repeat; float: left; } #header .util_wrap .btn_toggle.on { background-position-y: -50px; background-color: #FFF; } 제이쿼리 함수 입력 $('#header .util_wrap .bt.. 2022. 10. 31.
제이쿼리 애니메이션 효과 gnb 메뉴에 마우스를 가다대면 창이 늘어나며 하위요소 보이게 하기 css, before 제이쿼리 수정 너무길어 함수명을 에미네이션으로 한번더 감아준다 $(function () { // header, gnb 바 애니메이션 function animateHeader() { $('#header .gnb>li').on('mouseenter', function () { // 각 li에 마우스를 올렸을때 자신 안쪽depth02 보여주고 나머지 형제안의 depth02안보이게 $(this).find('.depth02').show().parent().siblings().find('.depth02').hide(); $('#header').addClass('on'); // 각 li안의 >a(포지션이 아니어도됨)의 기준(.i.. 2022. 10. 31.
제이쿼리 애니메이션 바 추가 mouseenter 기존코드 뜯어보기 $(function () { $('#header .gnb>li').on('mouseenter', function () { // 각 li에 마우스를 올렸을때 자신 안쪽depth02 보여주고 나머지 형제안의 depth02안보이게 $(this).find('.depth02').show().parent().siblings().find('.depth02').hide(); $('#header').addClass('on'); // 각 li(포지션이 아니어도 됨) 의 기준(.inner)에서의 좌우 위치 var posX = $(this).find('>a').position().left; var w = $(this).find('>a').outerWidth(); $('#header .gnb_bar').css.. 2022. 10. 31.
제이쿼리 li 메뉴 > depth02 보이기 $(function () { $('#header .gnb>li').on('mouseenter', function () { // 각 li에 마우스를 올렸을때 자신 안쪽depth02 보여주고 나머지 형제안의 depth02안보이게 $(this).find('.depth02').show().parent().siblings().find('.depth02').hide(); $('#header').addClass('on'); }); $('#header').on('mouseleave', function () { $('#header').removeClass('on'); // 헤더에서 마우스 빠졌을때만 서브메뉴 안보이게 $('#header .gnb .depth02').hide(); }); }); 원본참고 https://ww.. 2022. 10. 31.
제이쿼리 기본정리 요소선택 이벤트바인딩 탐색메서드 효과메서드 등등 제이쿼리 생성자 함수 이름 호출 $() 문자열만 하는 경우 window 객체 키워드 의미 "" 필요없음 $(window) 자신이만든 객체를 선택할때 '' 사용 $('#header .gnb>li:nthchild(1)') 이벤트를 바인딩하는방식 $('#header .gnb>li').on('click', function(){ $(this) $(this).find('.depth02') $(this).siblings(); $(this).parent() $(this).closest('#header'); }); 제이쿼리 객체가 리턴됨 .on = addeventlitener 2개 인수가 들어감 이벤트 인수가 들어감 .on(이벤트명 , 이벤트 핸들러 콜백함수(익명함수) :.. 2022. 10. 27.
제이쿼리 scroll/animate 헤더가 마우스 스크롤을 하면 이렇게 gnd 색이 변할수 있도록 제이쿼리를 설정해보자 $(function () { // scroll 이벤트는 스크롤시 아주 많이 발생하므로 최적화를 신경써야함 // 선택하여 변수에 대입하면 탐색은 한번만 $(window).on('scroll', function () { var st = $(this).scrollTop(); console.log(st); if (st > 0) { $('#header').addClass('on'); } else { $('#header').removeClass('on'); } }); }); 최적화후 $(function () { // scroll 이벤트는 스크롤시 아주 많이 발생하므로 최적화를 신경써야함 // 선택하여 변수에 대입하면 탐색은 한번만 .. 2022. 10. 24.
05_효과메서드,jQueryUI확장라이브러리,헤더전체메뉴 [효과메서드] addClass(),removeClass(),toggleClass(),hasClass() slideUp(),slideDown(),slideToggle() fadeIn(),fadeOut(),fadeToggle() show(),hide(),toggle() animate() - jQuery UI 확장라이브러리 사용시 easing옵션 변경가능 stop() ​ 주력사용 addClass() 제일중요 ​ 클래스 추가 addClass(), 클래스 지우기 removeClass(), 이벤트 안에서 왔다갔다 toggleClass(), hasClass() 언제사용하나? 이렇게 같은 사이트에서 스크롤을 내릴시 헤더의 색이 은은하게 변경된다. 예제 연습하기 #header { background: #ddd; tran.. 2022. 10. 20.

티스토리툴바