석봉노트 석봉노트

분류 전체보기

• jQuery 특정 선택자 찾기 (find)

  DEV/javascript 2022. 10. 29. 15:30

  작업을 하다 보면 특정 선택자 내부에 있는 특정 요소를 가져와 사용하게 된다. 특정 범위 내 선택자를 찾아 사용하려면 다음과 같이 사용 가능하다. ...(생략) ...(생략) 위 샘플 HTMl 에서 innerDiv 안에 있는 모든 select를 가져오려고 하는 경우 다음과 같이 사용하자. (배열로 긁어온다.) $("#innerDiv").find('select');

  Read More
• Javascript 클래스 리스트 조회 및 클래스 포함 여부 판단

  DEV/javascript 2022. 10. 29. 15:24

  특정 Element의 클래스 리스트를 파악하거나 특정 클래스를 포함하는지 확인이 필요한 경우가 있다. 다음과 같이 클래스 리스트 조회 및 클래스 포함 여부를 판단할 수 있다. test.js /** * [가지고 있는 클레스리스트(class list) 조회 방법과 포함하는 클래스를 찾기] * - classList : 클레스 리스트 조회 * - contains : ('d-none' class를)포합하고 있는가? (true or false return) */ const sampleEle = document.getElementById("sampleEle"); const isDnone = sampleEle.classList.contains('d-none');

  Read More
• Javascript 자식의 Function를 참조하는 방법

  DEV/javascript 2022. 10. 29. 15:00

  작업을 하다보면 하위 자식 함수에 접근이 필요한 경우가 있다. ( 대표적으로 iframe을 사용하는 경우 ) 다음과 같이 접근이 가능하다. /** * [자식 함수에 접근하는 방법] * - 현재 document 하위(자식) sampleEle 내부에 있는 functionName이라는 함수에 접근한다고 가정하자. */ document.getElementById("sampleEle").contentWindow.functionName(parameter); jQuery 방식은 다음과 같이 사용 $('#sampleEle').get(0).contentWindow.functionName(); 비슷한...? https://seokbong.tistory.com/98 Javascript 자식의 element를 참조하는 방법 ..

  Read More
• 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를 참조하는 방법 (가져오는 방법) 작업을 하다 보면 ..

  Read More
• 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:..

  Read More