본문 바로가기

전체 글

 (157)
JQuery (on 이벤트) ▷ DOM 객체 탐색 및 접근을 통해 조작하는 방법(이벤트) → on('이벤트명', 함수) 형식을 사용 ▷ on('click', 함수) - 특정 대상을 '클릭' 시 동작하는 이벤트 - 클릭 대상에 제한은 없음(버튼 외에 다른 요소도 가능) - $('선택자').click(함수) 와 동일함 jQuery - test8.jsp 아이디 : 패스워드 : 선택하세요 자바 JSP 스프링 ==== ====
JQuery (sumit() 함수) ▷ submit() 함수 - submit 동작에 대한 이벤트 처리 가능 - 자바스크립트에서 submit 이벤트 처리 방법과 동일함 - form 태그를 대상으로 지정하여 submit() 함수를 호출하고 함수 내에서 submit 버튼 클릭 시 수행할 동작을 지정 jQuery - test7.jsp 아이디 : 패스워드 : 선택하세요 자바 JSP 스프링
JQuery (이벤트3) ▷ 1. eq(인덱스) - 선택자를 포함하여 형제자매 요소 탐색 - 인덱스는 0부터 시작하며, 인덱스에 해당하는 순서에 위치한 요소를 가져옴 - 음수는 뒤에서부터 탐색 2. attr('HTML속성명') - 선택자에서 해당 속성의 값을 가져오거나 추가 - HTML 태그 속성값 자체를 가져오며 상태에 따라 변하지 않음 ex) 체크박스 checked="checked" 속성값을 가져올 때 체크상태가 변해도 checked 임 3. prop('Javascript속성명') - 선택자에서 해당 속성의 값에 대한 상태를 가져오거나 추가 - 값 자체를 다루지 않고 해당 속성의 값에 대한 true/false 리턴 - attr() 함수와 유사하나 HTML 태그의 상태에 따라 결과값이 변함 ex) 체크박스 checked="ch..
JQuery (이벤트2) ▷ 특정 요소에 대한 조작 이벤트 - 2 1. append() - 지정한 내용을 선택자 내부의 '마지막'에 추가 - appendTo() 함수와 문장 구조의 차이를 제외하면 기능은 동일함 - $('선택자').append('추가할내용'); $('추가할내용').appendTo('선택자'); 2. prepend() - 지정한 내용을 선택자 내부의 '처음'에 추가 - prependTo() 함수와 문장 구조의 차이를 제외하면 기능은 동일함 - $('선택자').prepend('추가할내용'); $('추가할내용').prependTo('선택자'); 3. after() - 지정한 내용을 선택자 요소 '뒤'에 삽입 - insertAfter() 함수와 문장 구조의 차이를 제외하면 기능은 동일함 - $('선택자').after('..
JQuery (이벤트) ▷ 버튼 등의 특정 대상에 대한 클릭 이벤트(기본) → $('선택자').click(함수(){}); ▷ 특정 요소에 대한 조작 이벤트 1. html() - HTML 문서에서 지정된 범위(선택자)안의 모든 요소를 가져오거나 추가하는 함수 - 요소를 가져올 때 주석까지 포함해서 가져옴 - 단, XML 문서를 대상으로 사용 불가 2. text() - html() 함수와 달리 HTML 문서 및 XML 문서에서도 적용 가능 - 모든 문자열을 가져오거나 추가 가능 - 브라우저마다 줄바꿈이나 공백 등이 달라질 수 있음 3. empty() - 지정된 선택자 내의 하위 요소 제거(비움) 4. remove() - 지정된 선택자 및 선택자 내의 하위 요소 모두 제거 jQuery/test4.jsp 제목1 제목2 제목2-1 제목..
Jquery (css()함수) ▷ css() 함수 → css('속성명', '값') 형식으로 호출 시 해당 CSS속성값을 변경할 수 있는 함수 → 속성명만 지정 시 해당 CSS 속성값을 리턴받을 수 있음 JQuery - test3.jsp 제목1 제목2 제목3
JQuery (선택자) ▷ 선택자(Selector) → 문서 객체 내의 요소를 선택하기 위한 용도로 사용하는 구성요소 → 자바스크립트(document.getElementByXXX() 메서드 사용)와 달리 $('선택자명') 형태로 지정하므로 간편하게 접근 가능 ▷ 선택자 사용 기본 문법 → $('선택자명 또는 *').함수('속성명','속성값'); ▷ 요소에 대한 CSS 속성 변경 기본 문법 - css() 함수 사용 → $('선택자').css('속성명','속성값')); → 특정 선택자에 대한 css 속성을 지정된 값으로 변경 → $('선택자').css('속성명'); → 특정 선택자에 대한 css 속성값 리턴 ▷ 직접 선택자 - 특정 대상(요소)를 직접 지정하기 위한 선택자 1) 아이디(#) - 페이지 내에서 유일한 요소 → $('..
JQuery (사용방법) ▷ JQuery → 자바스크립트의 라이브러리 중 하나 → 자바스크립트의 이벤트 등의 조작을 쉽게 할 수 있도록 여러 메서드 등을 제공 → AJAX 기술에 많이 활용됨 → JQuery 사용을 위해 현재 문서 내에 JQuery 라이브러리 등록 필요(= 외부 자바스크립트 파일 등록과 동일) ▷ JQuery 사용 방법 - 시작 1. Load 이벤트(잘 사용하지 않음) → 화면에 필요한 모든 요소(HTML, CSS, JS, Image 등)가 메모리에 로딩 완료되면 실행 JQuery - test1.jsp 2. Ready 이벤트 → Load 이벤트와 달리 DOM TREE 생성 직후 실행되는 이벤트(리소스와 무관함) => 이미지 등의 요소는 로딩되기 전! → Load 이벤트보다 빠르며, 중복 선언이 가능하고, 선언된 ..

티스토리툴바