주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. mouseenter & mouseover 마우스가 이벤트로 on 메서드를 통해 사용할 수도 있다. 요소에 내부로 들어왔을 때 실행된다. 차이점 mouseenter 자식영역으로 이동했다고 재 감지되지 않는다. mouseover 자식영역으로 이동했을때 재 감지된다. // HTML // jQuery // 마우스를 #box에서 #child로 이동해도 코드는 다시 실행되지 않음 $('#box').mouseenter(function(){ // 코드 작성 }); // 마우스를 #box에서 #child로 이..

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. on 이벤트를 제어할 수 있는 메서드이며 과거에 사용하던 bind, delegate, live 메서드들의 모든 기능을 제공한다. 이벤트를 중첩해서 적용하고 싶은 경우 공백을 통해 입력한다. $('button').on('click mouseenter', function(){ // 코드 작성 }); $('button').on('click', onClickFunction); function onClickFunction(){ // 코드 작성 }; one 이벤트를 제어할 수 있는 메서드이며 on과 동일..

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. addClass 선택자에 입력한 클래스를 추가한다. 공백으로 구분하여 입력 값을 추가하면 여러개의 클래스를 추가할 수 있다. 함수 형식으로도 사용할 수 있으며 인자 값으로 해당 선택자의 index값을 사용할 수 있다. // HTML // jQuery // #firstBox 클래스가 추가 $('#firstBox').addClass('color_box red_box'); // .box 클래스 추가된다 $('.box').addClass(function(index){ return 'box_index'..

jQuery는 DOM 객체를 탐색, 접근하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 모든 메서드나 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. parent 선택자의 바로 상위 요소만을 탐색해서 일치하는 요소를 가져온다. 단일 레벨만 탐색하는 것을 제외하면 parents와 유사하다. // Html // jQuery $('#box').parent(); // #inner 반환 parents 선택자의 상위 요소들을 탐색해서 일치하는 요소를 가져온다. 가까운 요소부터 외부 요소 순서로 반환된다. // Html // jQuery $('#box').parents(); // #inner, #wrap, body, html 순서로 반환 $('#b..