[개발] Programming/JQuery18 JQuery 함수 trigger(), 강제로 click 이벤트 발생시키기 강제로 이벤트를 실행시키기 위해서는 JQuery .trigger() 라는 함수를 사용한다. .trigger( eventType [, extraParameters ] ) 아래 예시에서 btn 이라는 id를 갖는 요소에 강제로 클릭 이벤트를 발생시킨다. $(document).ready(function(){ // trigger로 인해 실행되는 부분 $("#btn").bind("click", function(){ alert("클릭!"); }); // 강제로 클릭 이벤트 발생시키는 부분! $("#btn").trigger("click"); }); 클릭 안 해도 됨. 로딩이 완료되는 데로 div를 클릭하지 않아도 trigger로 이벤트를 발생시키기 때문에 "클릭!" 이라는 alert가 뜬다. 클릭 외에도 원하는 이벤.. 2018. 10. 29. JQuery, 부모 태그 찾는 함수 Closest(), Parent(), Parents() JQuery Closest(), Parent(), Parents() 마우스 클릭 이벤트와 같은 이벤트를 발생시킬 때 상위 태그나 요소를 찾을 일이 종종 발생한다. 이때 사용할 수 있는 jquery 함수는 3가지가 있다. 이 세가지는 아주 흔히 사용되는 함수로 반드시 기억해 둔다. .closest() // .closest("div") 와 같이 사용하여 원하는 특정 요소만 찾을 수 있음. .parent() // 바로 상위 요소 하나를 찾아줌. .parents() // 상위 모든 요소를 반환함. 예제로 살펴보면 아래와 같다. Find parent element 페이지에 clickButton 이라는 id를 가진 a태그를 클릭 했다고 가정했을 때, 아래 주석처럼 각각의 결과물을 확인할 수 있다. .closest(.. 2018. 10. 29. JQuery, 체크박스 체크 여부 검사하는 방법 정리 이번 포스트에서는 JQuery 명령어를 통해 체크박스의 상태를 가져오거나 객체 전체를 호출하는 방법, 체크된 박스의 개수를 구하는 방법을 소개하겠습니다. 참고로 라디오 버튼도 거의 유사한 원리로 동작합니다. 체크된 객체 가져오기 체크 박스가 있는 예시 소스 체크된 태그의 객체를 가져오는 JQuery 소스 // 결과: 체크된 input의 object를 가져온다. $("input[name='getByName']:checked"); 예) 체크된 input 객체가 있는지 없는지 검사하는 방법. // 결과: 0보다 크면 체크 된 상태다. $("input[name='getByName']:checked").length; 체크 여부 확인하기 예시 소스 체크 여부를 검사하는 JQuery 소스 // 결과: 체크되어 있으면.. 2018. 10. 29. JQuery, 동적으로 추가된 dom element(태그)에 onclick이 인식 안되는 경우 해결 방법 onclick이 인식 안되는 경우 .on() 메소드는 DOM element에 이벤트를 바인딩 하는데 쓰인다. 하지만, 동적으로 추가된 요소에 대해서는 이벤트가 바인딩 되지 않는다. 아래 소스를 예로 들면 $(document).ready(function () { $('#btnAdd').on('click', function(){ $('Dynamic Div ').appendTo('body'); }); $('div').on('click', function() { console.log("Clicked."); }); }); btnAdd 라는 태그를 클릭했을 때 div가 추가되는데, 새로 추가된 div 태그를 클릭하면 바로 아래 onclick 이벤트가 실행되지 않는다. 최초에 페이지를 로딩할 때 해당 태그가 없어서 .. 2018. 10. 29. 자바스크립트, JQuery 특정 좌표나 엘리먼트, 태그로 스크롤 이동 자바스크립트 소스 특정 좌표(x, y)로 스크롤 이동 시키기 function scrollToDown(){ window.scrollTo(X, Y); } JQuery 소스 특정 요소(element)나 tag 위치로 스크롤 이동시키기 div1로 이동 div2로 이동 div1 div2 2018. 10. 26. JQuery 마우스 이벤트 정리 JQuery 마우스 이벤트 JQuery에는 수많은 마우스 이벤트가 존재합니다. 그러다 보니 가끔 헷갈려 정리해봤습니다. .click() 마우스를 클릭하면 실행 .contextmenu() 마우스 오른쪽 버튼을 누르면 실행 .dblclick() 마우스를 더블 클릭하면 실행 .hover() 마우스 포인터가 해당 영역 안으로 이동하면 실행 .mousedown() 마우스 버튼을 누를 때 실행 .mouseenter() 마우스 포인터가 해당 영역 안으로 이동하면 실행 .mouseleave() 마우스 포인터가 해당 영역 밖으로 떠나면 실행 .mousemove() 마우스를 움직이면 실행 .mouseout() 마우스 포인터가 해당 영역 밖으로 떠나면 실행 .mouseover() 마우스 포인터가 해당 영역 안으로 이동하면 .. 2018. 10. 23. 이전 1 2 3 다음
