오봉이와 함께하는 개발 블로그

jQuery DOM 요소 조작 동적으로 쉽고 간단하게 DOM 요소 조작 가능 DOM 요소 삽입 / 삭제 / 속성 추가 및 삭제 / 클래스 속성 DOM 요소 조작 관련 메소드 text() : 글자와 관련된 내용을 반환하거나 설정 html() : HTML과 관련된 내용을 반환하거나 설정 $(선택자).append(A) : 선택자의 내부 요소들 맨 뒤에 A를 삽입 $(선택자).prepend(A) : 선택자의 내부 요소들 맨 앞에 A를 삽입 $(A).apeentTo(선택자) : A를 선택자의 내부 요소들 맨 뒤에 삽입 $(A).prependTo(선택자) : A를 선택자의 내부 요소들 맨 앞에 삽입 $(선택자).after(A) : 선택자 뒤에 A 삽입 $(선택자).before(A) : 선택자 앞에 A 삽입 $(A)..

each() 메소드 $(선택자).each(콜백함수function(){}); $.each(배열, 콜백함수); $.each(객체, 콜백함수); each() 메소드 예제 - eachFunction.html a b c

jQuery 이벤트 기존 자바스크립트에서 사용했던 이벤트 대부분 사용 자바스크립트 보다 간단하고 쉽게 이벤트 처리 가능 이벤트 유형 윈도우 이벤트 ready(document) : 문서 객체 요소(DOM 요소)가 로드 되었을 때 발생 문서 객체 요소가 자바스크립트에서 사용 가능한 상태인지 확인하고 작동이 가능한 안전 상태일 때 발생 $(document).ready() document의 DOM 객체가 로드 되고, 브라우저가 DOM 트리를 생성한 직후 외부 리소스, 이미지 등의 로드 여부 상관 없이 실행 resize : 윈도우 창 크기 변경 시 발생 scroll : 윈도우 창 스크롤 이동 시 발생 load : 문서 객체 요소가 모두 로드 되었을 때 발생. ready와 차이점은 리소드, 이미지 또는 음악 등 로..

선택한 요소를 변수에 저장 형식 var $변수명 = $('선택자'); var 변수명 = document.getElementById('#id'); 여러 개 찾은 경우 배열로 저장 var tds = document.getElementByTagName(‘td’); 주의 jQuery 선택자를 찾아서 자바스크립트 변수에 저장한 경우는 jQuery 메소드 사용 가능 DOM 선택 방식으로 선택해서 자바스크립트 변수에 저장한 경우 jQuery 메소드 사용 불가능 변수 저장 예제 - select-Variable.html jQuery 변수 변수명 앞에 $ 붙임 object로 jQuery 메소드 사용 가능 일반적으로 태그를 선택한 경우에는 객체로 $를 붙여서 사용 값을 가져온 경우 $를 붙이지 ..

jQuery 선택자 jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음 중간에 자바스크립트 코드 같이 작성 HTML 태그를 쉽게 선택하기 위해 선택자 사용 선택자 구조 $(‘선택자’).메소드(매개변수, 함수 등) $(‘span’).hide(); 큰 따옴표 / 작은 따옴표 다 사용 가능 선택자 종류 직접 선택자 전체 : $("*") 태그 : $("태그명") 아이디 : $("#id 명") 클래스 : $(".class 명") 그룹 선택자 인접 관계 선택자 상위 요소(조상/부모) 선택자 하위 요소 (자식/자손) 선택자 형제 선택자 필터 선택자 속성 선택자 컨텐츠 탐색 선택자 속성 선택자 HTML 태그(요소)의 지정된 속성 값에 따라 선택자로 정의 문법 태그명[속성] : []안의 속성을 포함하는 ..