jQuery는 DOM 객체를 탐색, 접근하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 모든 메서드나 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. parent 선택자의 바로 상위 요소만을 탐색해서 일치하는 요소를 가져온다. 단일 레벨만 탐색하는 것을 제외하면 parents와 유사하다. // Html // jQuery $('#box').parent(); // #inner 반환 parents 선택자의 상위 요소들을 탐색해서 일치하는 요소를 가져온다. 가까운 요소부터 외부 요소 순서로 반환된다. // Html // jQuery $('#box').parents(); // #inner, #wrap, body, html 순서로 반환 $('#b..
Javascript VS jQuery Javscript API에 비해 jQuery는 선택자를 사용하여 DOM(Document Object Model) 요소에 쉽고 편리하게 접근할 수 있다. // Javascript document.getElementById('container'); document.querySelector('#container'); // jQuery $('#container') 아래는 기초적인 선택자만 작성하였으므로 모든 선택자를 확인하려면 jQuery 사이트 참조 직접 선택자 아이디 (#) id는 페이지내에서 유일해야한다. // Html // jQuery $('#container') 클래스 (.) 동일한 클래스를 가진 복수의 요소가 될 수 있다. // Html // jQuery $('...
[jQuery기초] 기본템플릿, load 이벤트 그리고 ready 이벤트
Load 이벤트 DOM(Document Object Model)의 Standard 이벤트 화면에 필요한 모든 요소화면에 필요한 모든 요소(*Html, Css, Js, Image, Iframe등)가 브라우저 메모리에 올라간 경우 실행된다. 요소에 문제가 생길 경우 딜레이가 발생할 수 있다. 중복 선언 시 하나만 실행되므로 주의해야한다. $(window).load(function(){ // 코드 작성 }); Ready 이벤트 리소스 상관없이 브라우저가 DOM Tree를 생성한 직후에 실행된다. load 이벤트보다 빨리 실행되며 중복 선언이 가능하며 선언 순서에 따라 실행된다. $(document).ready(function(){ // 코드 작성 }); Load VS Ready 두 이벤트의 차이를 이해하기 위..
참조링크 릴리즈 정보 업그레이드 가이드 jQuery 3.5 jQuery 3.0 jQuery 1.9 호환성 Browser jQuery IE 6~8 jQuery 1.x IE 9+ jQuery 2.x Android 4.x jQuery 3.x Android 4.5+ Safari on IOS 7+ jQuery 3.x 구버전과 최신버전 혼용 jQuery Migrate Plugin jQuery 하위 버전 호환성을 위해 제공하는 플러그인 v1.4.1 : jQuery 1.9 이하의 버전을 3.0 버전까지 지원 v3.3.0 : jQuery 1.x버전, 1.9 이상의 버전을 3.0 버전까지 지원