DEV/javascript
-
Javascript 자식의 element를 참조하는 방법 (가져오는 방법)DEV/javascript 2022. 10. 29. 14:58
작업을 하다보면 하위 자식 요소에 접근이 필요한 경우가 있다. ( 대표적으로 iframe을 사용하는 경우 ) 다음과 같이 접근이 가능하다. /** * [자식 요소에 접근하는 방법] * - 현재 document에서 하위 요소(id = "sampleEle")안에 있는 sampleEle2에 접근한다고 가정 */ const sampleEle = document.getElementById("sampleEle"); const sampleEle2 = sampleEle.contentWindow.document.getElementById("sampleEle2"); 반대로...? https://seokbong.tistory.com/93 jQuery 부모의 element를 참조하는 방법 (가져오는 방법) 작업을 하다 보면 ..
-
Javascript 커스텀 툴팁 (CSS, HTML)DEV/javascript 2022. 10. 29. 14:31
작업 중 급하게 툴팁 기능이 필요했는데 회사 동료분이 던져주셨다... 사실 jQuery, Bootstrap 등 다양한 라이브러리에서 툴팁을 제공한다. 아무튼... 다음과 같은 CSS를 적용시켜주자. tooltip.css [data-tooltip-text]:hover { position: relative; } [data-tooltip-text]:hover:after { background-color: #000000; background-color: rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4); -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4); box-shadow:..
-
jQuery 마우스 이벤트, 키보드 이벤트DEV/javascript 2022. 7. 30. 22:31
javascript는 마우스의 클릭을 감지하거나 키보드의 입력을 감지할 수 있다. 마우스 이벤트, 키보드 이벤트 예시를 알아보자. 마우스 클릭 이벤트 예시 // #id 또는 .class 등 jquery 선택자를 통해 클릭 이벤트 대상을 지정 $(document).on('click', "#id", function (e) { // 클릭 감지 후 진행할 코드 }); 키보드 이벤트 예시 (엔터키 이벤트 예시) // #id 선택자에서 keydown이 감지 됐을 때, $('#id').keydown(function (event) { // 해당 키가 13 이면 (엔터키 라면) if (event.keyCode == 13) { // 엔터키 입력 감지 후 실행할 코드 } } change 이벤트 예시 // 선택자로 변경 감지..
-
jQuery 부모의 function을 사용하는 방법DEV/javascript 2022. 7. 30. 21:59
이번 프로젝트에서 ifram 부모의 function을 참조할 일이 많았다. 자식의 js에서 부모 js의 function은 아주 쉽게 참조 가능하다. parent.functionName(); await parent.functionName();// async - await를 사용하는 경우 비슷한...? https://seokbong.tistory.com/93 jQuery 부모의 element를 참조하는 방법 (가져오는 방법) 작업을 하다 보면 iframe을 쓰거나 부모의 element 요소를 참조하는 경우가 있다. 자식 페이지에서 부모의 element를 참조할 때는 다음과 같이 사용하자. 부모의 element의 값을(value) 가져오는 경우 $('#id seokbong.tistory.com 반대의...? ..
-
jQuery 부모의 element를 참조하는 방법 (가져오는 방법)DEV/javascript 2022. 7. 30. 21:48
작업을 하다 보면 iframe을 쓰거나 부모의 element 요소를 참조하는 경우가 있다. 자식 페이지에서 부모의 element를 참조할 때는 다음과 같이 사용하자. 부모의 element의 값을(value) 가져오는 경우 $('#id', parent.document).val(); $('.class', parent.document).val(); $('button', parent.document).val(); ... 일반적으로 jQuery 선택자를 이용하는 법을 사용하고 parent.document 를 추가로 넣어주면 된다. .val(), .text(), .html() 등 일반적인 jquery 함수를 사용할 수 있다. https://seokbong.tistory.com/94 jQuery 부모의 functio..