개발자의 끄적끄적

[javascript/jquery] jquery 자식 요소 갯수 구하는 방법 jquery 로 특정 element 의 하부 element 의 갯수를 조회하는 방법입니다. $(target).children().length 위 내용 보시면 아시겠지만, target element 의 자식 요소들의 갯수를 구하는 내용입니다. 참고들 하세요!

[javascript/jquery] 자바스크립트 가져온 element 의 태그 없애기 jquery 를 이용해서 특정 element 를 가져온 후 그 안에 있는 특정 태그를 없애고 싶을때 아래 방법으로 하시면 됩니다. $('.element').innerHTML.replace(/(|)/gi, ""); 위 내용 보시면 아시겠지만, element 라는 클래스의 element 를 가져온 후 그 안에 html 중 div 태그를 제거하는 내용입니다. 참고들 하세요!

[javascript/jquery] 문자열의 특정인덱스 문자 찾기 .charAt 함수 사용법 자바스크립트에서 문자열을 데이터를 가지고 여러가지 작업을 하는데 그중에서 특정 인덱스 번호에 위치만 문자를 찾아야 할때, 아래와 같은 방법으로 charAt 를 사용하시면 됩니다! var str = "abc"; console.log(str.charAt(0)); // result : a 위 내용 보시면 아시겠지만, abc 라는 문자열을 가지고 있는 str 변수에서 0번째 인덱스의 글자를 console.log 로 출력하는 내용입니다! 결과는 a 가 출력됩니다! 참고들 하세요!

[javascript/jquery] 자바스크립트로 현재 접속 브라우저 구분하기 자바스크립트로 현재 브라우저 종류를 구분하는 방법은 바로 아래 처럼 navigator.userAgent 을 이용해서 agent string 를 뽑아내는 방법입니다. var agent_string = navigator.userAgent; 위 내용처럼 agent 관련 내용을 변수에 담고나서 아래 처럼 indexOf 를 사용하여 해당 브라우저의 이름이 문자열에 포함이 되나 여부로 체크하시면 됩니다! agent_string.indexOf("chrome"); agent_string.indexOf("edge"); agent_string.indexOf("KAKAO"); 어려운 방법은 아니지만, 자주 사용하게 되는 부분이라 꼭 참고하세요!

[javascript/jquery] css display 여부로 show/hide 하는 방법 jquery 로 특정 타겟 클래스 혹은 아이디 등 요소들의 css display 상태를 체크하여 숨겨져 있으면 보이게 하고, 보이게 되어있으면 숨기는 방법입니다. if($("아이디").css("display") == "none"){ $("아이디").show(); } else { $("아이디").hide(); } 위 내용 보시면 아시겠지만, 특정 아이디의 css 요소중 display 가 none 이면 show() 를 호출해서 보이게하고, 반대의 경우는 hide() 를 호출해서 감추는 내용입니다! 참고들 하세요!

[javascript/jquery] swiper.js 현재 슬라이드 인덱스 확인하기 swiper.js 를 사용할때 슬라이드가 넘어간 이벤트를 체크하거나 슬라이드의 인덱스를 확인하고자 하는 경우가 있습니다! 그럴때 사용하는 방법입니다. 위 내용 보시면 아시겠지만, swiper.on('transitionEnd') 를 사용해서 swiper.realIndex 를 체크하면 변화된 인덱스를 확인할 수 있습니다! 참고들 하세요!

[javascript/jquery] 자바스크립트 document.querySelector 사용법 자바스크립트에서 document.querySelector 라는 명령어가 있습니다. 아래 예제처럼 document.querySelector("div") document.querySelector 안에 div 를 넣어주면 현재 페이지에 있는 얖 중 첫번째 내용을 반환합니다! 참고들하세요!

[javscript/jquery] 자바스크립트 sheet.js 로 엑셀 읽기 예제 자바스크립트로 엑셀을 업로드하여 읽는 방법을 공유합니다. 우선 페이지 상단에 아래와 같은 cdn 엑셀 js 를 로드합니다. 그리고 업로드 액션을 동작시킬 file input 을 선언한 후 onchange 액션을 걸어줍니다. 그리고 나서 onchange 액션시 동작할 스크립트를 아래와 같이 작성해줍니다! 위 스크립트에서 console.log 를 출력해놨으니 업로드 하신 내용을 크롬 개발자 모드에서 확인해보시면 됩니다!!! 엑셀버전은 아래 링크타고 들어가시면 잘 나와있으니 확인 후 사용하시면 됩니다! 참고들하세요! 문서와 소스 링크 : https://github.com/SheetJS/js-xlsx SheetJS/sheetjs ..