제이쿼리 검색 결과
5 개의 검색 결과가 있습니다.
JavaScript

jQuery 제이쿼리 .eq() 메서드 => 순수 JavaScript (바닐라JS) 방식으로 대체

jQuery(제이쿼리)를 이용하여 요소들을 선택($(''))하고 해당 요소들을 반복하여 접근(.eq(i))하는 방법을 jQuery(제이쿼리) 없이 순수 자바스크립트 (바닐라JS)로 구현 해보도록 하자. 버튼

2023. 8. 12. 07:29
JavaScript

JavaScript select 자바스크립트 셀렉트박스 제어 (옵션 값 변경 감지, 선택된 옵션 value & text 값 얻기, change 이벤트 강제 발생)

클라이언트 단에서 셀렉트 박스의 옵션 값이 변경될 때 마다 특정 작업을 수행하도록 만들려는 경우가 있다. 셀렉트박스 옵션 변경 감지 ('change') 이벤트 핸들러 (정적 & 동적 셀렉트박스 모두 적용) /* jQuery 제이쿼리 */ $(document).on('change', '션택자', function(e) { $(this).val(); // 변경된 옵션의 value 값 $(this).text(); // 변경된 옵션의 text 값 // 이벤트 발생 시 수행할 코드... }); /* 바닐라 JS (순수 자바스크립트) */ document.addEventListener('change', function(e) { var target = e.target; if (target.matches('선택자')) ..

2023. 6. 10. 15:32
JavaScript

JS 자바스크립트 이벤트 핸들러 중첩 제어 / .off() / 이벤트 핸들러 중복 제어

$(document).on("click", "#examTag1",function(e) { .... 와 같은 클릭 이벤트 핸들러 등록 코드를 사용할 경우가 있다. 위 코드를 A라고 부르겠다. A 내부에 또 다른 요소의 클릭 이벤트 핸들러 등록 코드 $(document).on("click", "#examTag2",function(e) { .... 를 추가하고 B라고 하고 B 내부에 innerFunc 이라는 함수를 추가하고 id 값이 "examTag1" 인 요소를 여러번, 예를 들어 3번 클릭한 뒤 "examTag2" 를 클릭하면 앞서 "examTag1" 클릭한 횟수 만큼 B 내부의 innerFunc 함수가 위 예시에 따라 3번 실행된다 $(document).on("click", "#examTag1",func..

2023. 5. 14. 23:04
JavaScript

JavaScript 자바스크립트 동적으로 생성된 태그에 클릭 이벤트 동작하지 않을 때 (jQuery 제이쿼리)

예를 들어 어떤 서비스 화면단에서 동적으로 생성되는 태그가 있다고 가정하고 이 태그를 클릭했을 때 어떤 이벤트를 발생시키기 원해서 다음과 같은 코드를 작성했다고 한다면. // 동적으로 생성할 태그 html = ` ${title} ${author} ${content} ${createDate}/span> `; /* 위 동적으로 생성한 태그를 'append()' 자바스크립트 함수를 이용해서 원하는 위치('schedule' 라는 클래스명을 가진 태그) 안에 추가 */ $(".schedule").append(html); /* 제이쿼리를 이용하여 'schedule' 라는 클래스명을 가진 태그의 자식요소 중 li 태그가 클릭되면 실행하려는 코드를 아래와 같이 작성 */ $('.schedule li').on('clic..

2023. 2. 26. 16:18
JavaScript

JS / 제이쿼리 여러 체크박스(input 태그) 중 현재 체크된 체크박스 (input 태그) 값 가져오기

쇼핑몰또는 기타 서비스에서 클라이언트(사용자)로 부터 특정 값을 입력 받는 화면은 대부분 사용되고 있다. 그중 여러 선택지를 주고 하나를 고르게 하는 형태로 input 태그의 체크박스 형식을 자주 사용하게 되는데 클라이언트(사용자)에 의해 체크된 값을 저장하기 위해 우선 값을 가져와야 하는 경우가 있는데 아래와 같이 구현 가능하다. $("input[name=sauce]:checked").val() input 태그의 'name' 속성을 이용한 것인데, 보통 여러 체크박스 선택지는 하나의 주제로 묶인다. 그래서 각 input 태그의 name을 동일하게 설정한 후 위 처럼 제이쿼리를 사용해서 input 태그의 (name이 sauce 라고 가정) name이 sauce인 태그들 중 체크된(:checked) 값을 ..

2022. 8. 15. 09:53