본문 바로가기

js

(59)
js 2022. 5. 20. 10:39
[js]제이쿼리 이벤트 연속 등록 여러개 동일한 객체, 동일한 함수 / 다른 이벤트 실행 $("div").on("click mouseenter mouseleave",function(){ $("p").toggleClass("on") }) /* 위와 같은 값 */ $("div").click(function(){ $("p").toggleClass("on") }) $("div").mouseenter(function(){ $("p").toggleClass("on") }) $("div").mouseleave(function(){ $("p").toggleClass("on") }) hover는 안됨 동일한 객체 / 다른 이벤트, 다른 함수 실행 $("div").click(function(){ $("p").text("클릭") }) $("div").mouseen..
js 2022. 5. 17. 16:01
[js]서브지앤비 가로100% sub_gnb width 100% $("nav ul li").mouseenter(function(){ let idx = $(this).index(); $(".sub_gnb>li").removeClass("on").eq(idx).addClass("on"); }); $(".sub_gnb").mouseleave(function(){ $(this).find("li").removeClass("on"); }) See the Pen subgnb width100% by sangmok-ye (@sangmok-ye) on CodePen.
js 2022. 5. 13. 17:04
[js]addClass 함수로 지정하기 See the Pen add_on클래스 함수 지정 by sangmok-ye (@sangmok-ye) on CodePen.
js 2022. 5. 12. 10:00
[js]swiper 스와이퍼 기본 구조 및 속성 See the Pen swiper 기본 by sangmok-ye (@sangmok-ye) on CodePen.// 슬라이드 뷰 갯수 설정 slidesPerView: 1  // 슬라이드 간 여백 설정 spaceBetween: 10 ** slidesPerView: 'auto' 일때는 spaceBetween이 안 먹힘. margin-right로 대체 할 것.// 반응형 슬라이드 설정 breakpoints: {   0  768: {    768  },    1024: {    1024  },}   // pager 페이저 설정 pagination: {   el: ".swiper-pagination",   clickable: true,  } // 스크롤바 설정 *loop에서는 사용 불가scrollbar:{  el..
js 2022. 5. 4. 10:57
[js]input checkbox 전체 선택 시 버튼 활성화 (prop) See the Pen Untitled by sangmok-ye (@sangmok-ye) on CodePen. input text 전체 입력시 버튼 활성화 https://yesm1230.tistory.com/62
js 2022. 4. 25. 11:50
[js]클릭 이벤트 한번만 발생시키기, 클릭 한번만, 체크드 일때 checked일때 See the Pen click 한번만 by sangmok-ye (@sangmok-ye) on CodePen.
js 2022. 4. 5. 09:38
[js]적응형 접속 구분 / 모바일 접속 시 모바일 사이트 이동 [ㅔ]
js 2022. 2. 28. 15:15
[js]top btn 탑버튼 반응형 디플논 let btn = $(".top_btn"); $(window).scroll(function(){ let st = $(window).scrollTop(); let w = $(window).width(); if(st>200 && w>1024){ btn.show(); }else{ btn.hide(); } }) btn.click(function(){ $("html, body").animate({ scrollTop: 0 },500) })

top