개발자의 끄적끄적

[javascript/jquery] jquery ajax html type find tag example / jquery ajax html 파일 내 특정태그만 표기하는 방법 jquery 에서 ajax 를 이용하여 서버와 통신을 할때 json 이나 html 타입으로 통신을 가장 많이 하게 됩니다. 그중에서 html 타입으로 할때는 넘겨진 페이지를 특정 영역에 그대로 표시해주는 형식으로 표현됩니다! 이번에는 넘겨진 html 데이터를 전체다 표기하기 않고 특정 태그만 뽑아서 표시되게 하는 방법을 공유해보려고 합니다! $.ajax({ url : "AJAX_URL", success : function(result) { var li_html = $("#text").html(result).find('li'); $('..

[javascript/jquery] jquery input readonly 설정하는 방법 jquery 에서 특정 input 태그에 수정이 불가하게 readonly 를 설정해야하는 경우가 있습니다. 읽기전용으로 필드 속성을 수정하는 겁니다. 아래와 같이 jquery 를 사용하시면 readonly 설정이 가능합니다. 우선 아래와 같이 id 가 test 인 input 태그가 있다고 가정하고, readonly 옵션을 설정하고 싶으면 아래와 같이 jquery 를 사용하시면 됩니다! $('#test').attr("readonly", true); 참고들 하세요!

[javascript/jquery] jquery remove body style example / jquery body 스타일 전체 제거하는 방법 jquery 를 사용하다 보면 특정 상황에 따라서 body 태그 안에 있는 style 을 없애야 하는 경우가 있습니다. 그럴때는 아래와 같이 removeAttr 을 사용하시면 됩니다. $("body").removeAttr("style"); body 에 removeAttr 을 사용하는데 style 을 입력해주면 style 속성이 전부 제거 됩니다! 참고들 하세요!

[javascript/jquery] jquery element exist example / jquery 요소 존재 여부 확인 방법 jquery 에서 특정 element 가 있는지 확인을 해야 하는 경우가 있습니다. 그럴때는 아래 내용처럼 length 를 사용하시면 됩니다. 아래는 기본사용법입니다. $("TARGET").length 예를들어, 아래와 같은 test 라는 아이디를 가지는 div 가 있다고 가정하고, 위 div 가 있는지 확인하고 싶으면 아래와 같이 length 를 사용하시면 됩니다. if( $("#test").length ) { // to do } 즉 length 값이 있으면 요소가 있다고 보고 로직을 작성하시면 됩니다! 참고들 하세요!

[javascript/jquery] jquery count up library / jquery 숫자 카운트 업 라이브러리 [링크] jquery 에서 숫자를 다루다 보면 특정 숫자를 카운트 업 효과를 주어서 숫자가 점점 증가되는 효과를 적용해야 되는 경우가 종종 있습니다. 그럴때는 countup 라이브러리를 사용하시면 됩니다. 아래 링크 들어가보시면 적용방법이 엄청 간단합니다! 참고들 하세요! jquery count up library site : https://github.com/bfintal/Counter-Up GitHub - bfintal/Counter-Up: Counter-Up is a lightweight jQuery plugin that counts up to a targeted number w..

[javascript/jquery] jquery number format library / jquery 숫자 포맷 라이브러리 [링크] jquery 를 사용하다보면 숫자형식을 사용하는 경우가 많이 있습니다. 소수점이라든가, 금액처럼 숫자 포맷을 변경해야하는경우 스크립트로 작성해도 되지만, 유용하고 편리한 라이브러리가 있어서 공유해보고자 합니다! 아래 사이트 들어가보시면 사용법도 간단하게 잘 설명되어 있으니 금방 적용하실껍니다! 참고들 하세요! jquery number library site : https://github.com/customd/jquery-number GitHub - customd/jquery-number: Easily format numbers for display use. Replace ..

[javascript/jquery] jquery swiper reach last slide example / jquery swiper 마지막 슬라이드 도달여부 확인하는 방법 jquery swiper 를 이용해서 slide를 구현하다 보면 마지막 슬라이드에 도달했는지를 확인해야 하는 경우가 있습니다. 내용을 다 확인했는지 혹은 다시 처음슬라이드로 돌아갈지 등 여러가지 상황을 체크해야하는 경우가 많은데요 그럴때는 아래 나와있는 내용처럼 reachEnd 이벤트를 사용하시면 됩니다. const swiper = new Swiper('.swiper', { // ... }); swiper.on('reachEnd', function () { // to do }); 위 내용 보시면 아시겠지만, reachEnd 이벤트를 ..

[javascript/jquery] jquery swiper slide change example / jquery swiper 슬라이드 변경 이벤트 감지 방법 jquery 에서 슬라이드를 표현하고 싶을때 swiper 를 많이 사용합니다! 그중에서 슬라이드가 변화되었을때를 체크해서 무언가를 띄운다거나 해야 하는 경우가 있습니다. 그럴때는 아래 나와있는 내용처럼 slideChange 이벤트를 사용하시면 됩니다! var mySwiper = new Swiper('.swiper-container', { }; mySwiper.on('slideChange', function () { // todo }); 참고들 하세요!