Seungdols Company

jquery 적응기 jquery를 업무에서 많이 쓰다보니 알게 된 사실 몇가지를 적고자 합니다. 웹 개발을 하다보면 생기는 일 중에 하나가 html에 data 값을 저장 해둘 일이 필요로 합니다. 그러다보니 서버에서 프론트로 데이터를 내려주는데 이 데이터는 사용자에게는 필요한 정보는 아니니 숨겨서 보여주는 것이죠. data() 메소드 그래서 태그 안에 data를 숨겨두어야 합니다. 바로 아래처럼 말이죠. click jquery-data api를 보면 사용법이 주로 나와 있습니다. 그럼 이제 이 데이터를 쓰려면, HTML에 있는 값을 읽어 오거나, 다시 쓸 때 사용하는 게 data() 메소드 입니다. data api 이쪽에서도 확인을 할 수 있죠. 여기서 중요한 사실 하나가 있습니다. 위 코드에 ‘data..

jQuery Event 이벤트 메서드 on()메서드는 모든 이벤트를 처리 할 수 있다. 내부적으로 jQuery는 크로스 브라우저 이슈를 모두 고려 한다. .on() 메서드는 1.7 버전에서 처음 도입 되었고, 사용하는 방법은 jQuery가 제공하는 다른 메서드를 사용하는 방법과 크게 다르지 않다. 그 전에는 .click() 이나 .focus() 메서드를 제공 했으나 이제는 .on()메서드만 사용해야 한다. $('li').on('click', function() { $(this).addClass('complete'); }); .on()메서드를 이용하여 이벤트를 처리 한다. 이 메서드는 두 개의 매개변수를 필요로 한다. 첫 번째 매개변수로는 대응 할 이벤트를 지정한다. 여기서는 click이벤트를 처리한다. ..

웹 페이지 - DOM 트리 문서노드 트리의 최상위에는 문서노드가 존재하며, 이 노드는 전체 페이지를 표현한다. 요소노드 HTML 요소들은 HTML 페이지의 구조를 서술한다. 특성노드 HTML 요소의 여는 태그에는 특성을 지정할 수 있으며, 이런 특성들은 DOM 트리 내에서 특성 노드로 표현 된다. 텍스트노드 일단 요소 노드에 접근하면 해당 요소 내부의 텍스트에 접근할 수 있다. NODELIST : 하나 이상의 요소를 리턴하는 DOM Query참고로, NodeList 객체는 배열과 유사하게 보이며 동일한 방식으로 요소에 번호를 부여하지만 실제로 배열은 아니다. 이 객체는 컬렉션이라고 부르는 타입의 객체이다. Live NodeList 객체를 사용하면 스크립트를 이용하여 페이지를 수정할 때 NodeList 객..