jQuery/jQuery 기본31 제이쿼리 html에서 CDN 호스트 방식으로 연결하기 jQuery 라이브러리 - P.196 다운로드 방식 http://jquery.com/download사이트방문 최신 버전 다운로드 하여 head 영역 안에 연결 Migrate Plugin(하위 버전 브라우저 지원) 다운로드하여 head 영역 안에 연결 - 익스플로를 위한 설정 CDN 호스트 방식 - content delivery Network https://code.jquery.com사이트방문 최신 버전을 클릭하여 url 복사, head 영역 안에 붙여넣기 jQuery Migrate를 클릭하여 url을 복사, head영역 안에 붙여넣기 - 익스플로러를 위한 설정 CDN 호스트 방식이 최신버전으로 자동 업데이트가 되며 오류가 적다 https://releases.jquery.com/ jQuery CDN The.. 2022. 12. 29. 제이쿼리 요소 바깥쪽 클릭시 창닫기 length 판단 저렇게 모달창이 토글버튼으로 뜨면 다시 토글을 눌러줘야만 창이 꺼지기 때문에 다른곳을 클릭해도 꺼지지 않는다. 이런식으로 다른 요소와 겹쳐나옴 이럴때 제이쿼리를 이용하여 꺼주기 lanth 로 판단해 꺼주기 document 즉 window의 하위객체인 html 문서 전체를 클릭해줄때 끄게 해준다. e.target 을 찍으면 객체의 요소가 나온다. lang_wrap 이 있는지 없는지 판단해보자. consol 로 확인해보면 맞으면 true 1 아니면 false 0 방법1 요소의 부모를 판단해 꺼주기 $(document).on('click', function (e) { console.log($(e.target).parent('.lang_wrap')); if (!$(e.target).parent('.lang_wr.. 2022. 12. 16. 스크롤바 없애기 $('body').addClass('on'); 모바일 환경에서 or 타블렛 gnb 메뉴 모달창이 나올때 스크롤바를 없애주고 싶다면 /*********************** 공통스타일 *************************/ /* body에 높이가 없어도 hidden이 걸리면 스크롤바가 사라짐 */ /* body.on {overflow: hidden;} */ /* iOS 사파리는 페이지최상단에서만 hidden이 걸리므로 페이지 위로 올라오게함 */ body.on { overflow: hidden; position: fixed; left:0; top:0; width:100%; } css common 에 공통스타일로 들어가있기때문에 제이쿼리에서만 on 클래스를 걸어준다. // 타블렛모바일 $('#header .m_btn_close').hide(.. 2022. 12. 16. 파비콘 돌아가게 만들기 ( 배열 or 변수) 이미지 폴더에 favicon 이미지여러장을 넣어준다. html 파비콘 지정 ?v=1 제거가능 여기선 실시간을 보여주는게 의미가 없기때문 제이쿼리에서 설정해주기위해 id 부여 제이쿼리 지정 attr 문자로 이름을 넣어서 href를 가져온다. console.log($('#favicon').attr('href')); 방법 1. 배열로 설정해보기 $(function () { // attr 문자로 이름을 넣어서 href를 가져온다. // $('favicon').attr('href'); var faviconPath = [ 'images/favicon/favicon_logo_01.ico', 'images/favicon/favicon_logo_02.ico', 'images/favicon/favicon_logo_03.i.. 2022. 12. 7. 제이쿼리 gnb 아코디언 전체메뉴 만들기 메뉴버튼 // 모바일메뉴 // 열기 $('#header .header_top .btn_open').on('click', function (e) { e.preventDefault(); $('#header .m_gnb_area').addClass('on'); $('#header .dimmed').show(); }); // 닫기 $('#header .m_gnb_area .btn_close, #header .dimmed').on('click', function () { $('#header .m_gnb_area').removeClass('on'); $('#header .dimmed').hide(); }); 아코디언 확인하기 $(this).parent().toggleClass('on').siblings().remo.. 2022. 12. 2. select박스의 값에따라 change 로 값넣어주기 / 버튼 켰다 끄기 조건 .search_area .search_top input[type=text] 최초 value는 '전복죽' select change 이벤트시 value 가 BF101 = 전복죽 value 가 BF102 쇠고기야채죽 value 가 BF104 광양식바싹불고기 반상 value 가 BF105 양곱창뚝배기 switch 문 사용 var searchInput = $('.search_area_wrap .search_top input[type=text]'); searchInput.val('전복죽'); $('.search_area_wrap .search_top .select_wrap select').on('change', function () { var _val = $(this).val(); console.log(_va.. 2022. 11. 28. 제이쿼리 데이터값 가져오기 data (필터기능) HTML문서에 data-cate="56" 적은 data 값을 가져와라 // 서브탭 이벤트 $('.sub_tab a').on('click', function () { var cate = $(this).data('cate'); // 데이터가져오기 console.log(cate); 변수에 담아 console 로 찍어보기 데이터값 속성선택자로 연결하기 // 서브탭 이벤트 $('.sub_tab a').on('click', function () { var cate = $(this).data('cate'); // 데이터가져오기 // console.log(cate); // 연결하기 $('.menu_list li').hide(); $('.menu_list li[data-cate=' + cate + ']').show();.. 2022. 11. 23. 제이쿼리 주요 메서드 요소 정리 요소의 문서에서의 위치 $('요소').offset().top 함수는()사용 offset 메서드가 return값(객체)이 들어온다. 객체가 리턴되어 속성값 .top 지정 스크롤 위치를 찾을떄 요소의 기준에서의 위치 $('요소').position().left 바 에니메이션을 만들때 요소의 크기를 구할떄 $('요소').outerWidth() - width + padding + border $('요소').outerWidth() - width + padding + border 포함한 요소의 크기를 구한다. $('요소').innerWidth() - width + padding / 안쪽크기만 구한다. border을 제외 $('요소').width() - width 요소의 순수 크기만 구할때 $(window).outer.. 2022. 11. 23. lnb depth02 구조 제이쿼리 클래스 걸기 $('.lnb_wrap .lnb .depth02').hide(); $('.lnb_wrap .lnb .btn_toggle').on('click', function () { $(this).toggleClass('on'); $('.depth02').slideToggle(); }); $('.lnb_wrap .lnb .depth02').hide(); $('.lnb_wrap .lnb .btn_toggle').on('click', function () { $(this).toggleClass('on'); // $('.depth02').slideToggle(); // lnb 서브가 보일때만 닫기 if ($('.lnb_wrap .lnb .depth02').is(':visible')) { $('.lnb_wrap .lnb ... 2022. 11. 22. display flex 풀릴때 제이쿼리로 적용 display flex 가 적용된 하위요소에 display:none 적용시 flex 가 사라진다. 이때 제이쿼리를 사용해서 꺼야함 이런 상황에 display가 제대로 적용이 되지않아 요소가 깨지는 모습 제이쿼리적용으로 depth02 꺼주기 $('#header .gnb .depth02').hide(); $('#header .gnb>li>a').on('click', function () { // 버튼하나만 돌아가게하기 $(this).parent().toggleClass('on').siblings().removeClass('on'); $(this).next().slideToggle(); }); 2022. 11. 10. gnb메뉴 on click 이벤트 중복방지 $('#header .gnb>li>a').on('click', function () { $(this).parent().toggleClass('on').siblings().removeClass('on'); // depth02가 안보이면 열기 if (!$(this).next().is(':visible')) { $(this).next().slideDown(2000).parent().siblings().find('.depth02').slideUp(); } else { $(this).next().slideUp(2000); } }); 1 .gnb>li>a 에 온클릭 이벤트를 걸어서 이벤트를 건 자신 (this)의 부모 (li)에 토글이벤트를 켜라. 그리고 형제들은 on 이벤트를 껴라 2. 만약 (this : gnb.. 2022. 11. 10. 제이쿼리 UI 간단사용법 (데이터피커 Datepicker Widget) 달력만들기 제이쿼리 '데이터피커' 사용법 - 오쌤 $('.calendar input').datepicker({ // 주말 선택 안되게 // beforeShowDay: $.datepicker.noWeekends, // 달력이 보이기전에 각각의 부모요소에 추가해줌 beforeShow: function () { $(this).parent().append($('.ui-datepicker')); }, }); js 파일에 해당 코드를 수정하여 적용해보자 적용확인! 문제점 1. 창을 줄였을때 캘린더 위치가 지멋대로 바뀜 왜? 데이터 피커 추가시 동적요소가 자동으로 html에 적용된다(슬라이더처럼). position이 absolute로 기준이 창기준이라 창크기가 달라지면 위치가 계속 변경된다. 따라서 포지션을 우리 요소 안으로 .. 2022. 11. 3. 이전 1 2 3 다음
