본문 바로가기

HTML, CSS, JavaScript/jQuery

(6)
jQuery 메소드와 이벤트 1 ( html(), text(), val(), append(), prepend(), before(), after(), empty(), remove(), detach() ) html( ), text( ), val( )- html( ) : 요소에 작성된 내용을 얻어옴(태그 포함) == innerHTML- text( ) : 요소에 작성된 내용을 얻어옴(태그 포함 X) == innerText- val( ) : value 속성값을 얻어옴- html("내용") : 요소에 내용 출력 (태그 인식 O)- text("내용") : 요소에 내용 출력 (태그 인식 X)- val("내용") : value 속성값을 지정.cls1{ color: blue;}.sky{ background-color: skyblue;} 기존에 작성되어 있는 요소html() 메소드text() 메소드val() 메소드// html() 버튼$("#btn1").on("click", function(){ // ..
순회(탐색) 메소드 3 ( sideways 메소드, is("css선택자") ) sideways(옆으로, 옆에서) 메소드- 같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드- $("요소명").siblings( [ 매개변수 ] )   - 선택된 요소와 같은 레벨(형제)에 있는 모든 요소 리턴   - 매개변수가 있으면 같은 레벨에 있는 요소 중 매개변수와 일치하는 모든 요소 리턴- $("요소명").next( )   - 선택된 요소의 같은 레벨 중 선택된 요소 다음 한 개 요소 리턴- $("요소명").nextAll( )   - 선택된 요소의 같은 레벨 중 선택된 요소 다음의 모든 요소 리턴- $("요소명").nextUntil(매개변수)   - 선택된 요소의 같은 레벨 중 매개변수 이전까지의 모든 요소 리턴- $("요소명").prev( )   - 선택된 요소의 같은 레벨 중 선택된 요..
순회(탐색) 메소드 2 (descendants 메소드) descendants(자손, 후손) 메소드- 선택된 요소의 하위 요소들을 선택할 수 있는 메소드- $("요소명").children( [ 매개변수 ] )  - 선택된 요소의 모든 자식 객체 리턴  - 매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴- $("요소명").find(매개변수)  - 선택된 요소의 인자와 일치하는 모든 후손 객체 리턴 div (great-grand parent) ul (grand parent) li (direct parent) span div (grand parent) p (direct parent) span 테스트$(document).ready(func..
순회(탐색) 메소드 - 1 (Ancestors 메소드) Ancestors(조상) 메소드- 선택된 요소의 상위 요소들을 선택할 수 있는 메소드- $("요소명").parent( ): 선택된 요소의 바로 위 상위 요소- $("요소명").parents( [ 매개변수 ] ): 선택된 요소의 모든 상위 요소 리턴: 매개변수가 있으면 매개변수와 일치하는 부모만 리턴- $("요소명").parentsUntil(매개변수): 선택된 요소부터 매개변수 요소 전까지 범위의 요소 리턴 div (great-grand parent) ul (grand parent) li (direct parent) span div (grand parent) p (direct parent) span ..
jQuery 선택자 (태그, 클래스, 아이디, 자식/후손, 속성, prop()메소드) jQuery 선택자- jQuery는 요소를 선택할 때  $("CSS 선택자") 또는 $(요소가 저장된 변수)의 형식으로 작성- ★ CSS 선택자로 요소를 선택한 경우   - id로 선택 시 단일 요소를 반환   - class, name, 자식/후손 등으로 선택 시 배열로 반환태그 선택자태그 선택자테스트1테스트2테스트3테스트4테스트5테스트6// 태그 선택자// ready() 함수 : 문서가 로딩된 후 마지막에 수행하는 함수$(document).ready(function(){ $("h5").css("color", "green"); // 자바스크립트로 했을 경우 // document.getElementsByTagName('p').style.color = 'yellow'; // -> 배열에 ..
jQuery 개요 (기본 개념 / 라이브러리 연결방법 / ready( ) 함수) jQuery란?- 기존에 복잡했던 클라이언트측 HTML 스크립팅(JS)을  간소화 하기위해 고안된 JavaScript Library.  ※ 라이브러리(library) : 프로그램, 프로그래밍 언어에 없는 추가적인 기능- 단점 : jQuery 라이브러리를 다운로드 받아서 사용 → 로딩 속도 느림            순수 JS보다 속도가 조금 느림jQuery 라이브러리 연결 방법- jQuery 라이브러리는 .js 확장자로 작성되어 있어  script 태그를 이용하여 연결할 수 있음1) jQuery 라이브러리를 다운로드 받아서 직접 연결- 장점 : 서버 컴퓨터에 라이브러리가 존재하기 때문에 연결 속도가 빠름- 단점 : 폴더 구조 변경 시 경로가 꼬이게 되는 문제가 발생할 수 있음- jQuery 공식 홈페이지 ..