바바

Ajax (Asynchronous JavaScript and XML) 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해준다. 백그라운드 영역에서 서버와 데이터를 교환하여 웹페이지에 표시해 준다. jQuery와 Ajax - 제이쿼리에서는 Ajax 기능을 손쉽게 사용할 수 있도록 여러 메소드를 제공하고 있다. - 이러한 메소드를 사용하면 HTTP 요청(request)을 손쉽게 보낼 수 있고, 데이터의 종류에 따라 그에 알맞는 메소드를 사용하여 서버에 데이터를 요청할 수도 있다. $.ajax()메소드 - 모든 제이쿼리 Ajax 메소드의 핵심 - HTTP 요청을 직관적으로 구성 ▷ 기본 문법 $.ajax(URL주소[,옵션]) => URL : 클라이언트가 HTTP 요청을 보낼 서..

기존 요소를 포함하는 새로운 요소를 추가해주는 메소드 메소드 설명 .wrap() 선택한 요소를 포함하는 새로운 요소를 추가함. .wrapAll() 선택한 모든 요소를 포함하는 새로운 요소를 추가함. .wrapInner() 선택한 요소에 포함되는 새로운 요소를 추가함. 1. .wrap() 메소드 '선택한 요소'를 포함하는 새로운 요소를 추가 .wrap() 메소드 첫 번째 컨텐츠에요! 두 번째 컨텐츠에요! div 요소 추가 ▼result 2. .wrapAll() 메소드 '선택한 모든 요소' 를 포함하는 새로운 요소를 추가 .wrapAll() 메소드 첫 번째 컨텐츠에요! 두 번째 컨텐츠에요! div 요소 추가 ▼result 3. .wraplnner() 메소드 '선택한 요소에 포함되는' 새로운 요소를 추가 .w..

기존 요소의 외부에 새로운 요소나 콘텐츠를 추가해주는 메소드 메소드 설명 .before() 선택한 요소의 바로 앞에 새로운 요소나 콘텐츠를 추가함. .after() 선택한 요소의 바로 뒤에 새로운 요소나 콘텐츠를 추가함. .insertBefore() 선택한 요소를 해당 요소의 앞에 삽입함. .insertAfter() 선택한 요소를 해당 요소의 뒤에 삽입함. 1. .before() 메소드 선택한 요소의 '바로 앞에' 새로운 요소나 콘텐츠를 추가 .before() 메소드 햄버거 피자 김치찌개 아이템 추가 ▼ result 2. after() 메소드 선택한 요소의 '바로 뒤에' 새로운 요소나 콘텐츠를 추가 .after() 메소드 햄버거 피자 김치찌개 아이템 추가 ▼ result 3. insertAfuer() 메..

기존 요소의 내부에 새로운 요소나 콘텐츠를 추가해주는 메소드 메소드 설명 .append() 선택한 요소의 마지막에 새로운 요소나 콘텐츠를 추가함. .prepend() 선택한 요소의 처음에 새로운 요소나 콘텐츠를 추가함. .appendTo() 선택한 요소를 해당 요소의 마지막에 삽입함. .prependTo() 선택한 요소를 해당 요소의 처음에 삽입함. .html() 해당 요소의 HTML 콘텐츠를 반환하거나 설정함. .text() 해당 요소의 텍스트 콘텐츠를 반환하거나 설정함. 1. .append() 메소드 선택한 요소의 '마지막'에 새로운 요소나 콘텐츠를 추가 .append() 메소드 햄버거 피자 김치찌개 아이템 추가 ▼result 2. .prepend() 메소드 선택한 요소의 '처음'에 새로운 요소나 콘..

getter 메소드 와 setter 메소드 메소드 설명 .html() 해당 요소의 HTML 콘텐츠를 반환하거나 설정함. .text() 해당 요소의 텍스트 콘텐츠를 반환하거나 설정함. .width() 선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정함. .height() 선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정함. .attr() 해당 요소의 명시된 속성의 속성값을 반환하거나 설정함. .position() 선택한 요소 중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환함. (getter 메소드) .val() 요소의 값을 반환하거나 설정함. 1 . getter 메소드 & setter 메소드 - getter : 선택된 요소에 접근하여 ..

제이쿼리 선택자 - css 선택자뿐만 아니라 몇몇 비표준 선택자도 사용할 수 있다. - 이러한 비표준 선택자를 사용하면 선택한 요소를 저장하거나, 그 결과에 대해 필터링까지 할 수 있다. 1. 선택한 요소 저장 선택한 요소들을 변수에 저장하여 사용할 수 있다. 변수에 요소 저장하기 아이템 1 아이템 2 아이템 3 아이템 4 아이템 5 ▼ 2 - 1 . 선택한 요소의 필터링 필터링을 사용하면 선택한 요소의 더 세분화된 선택이 가능하다. 선택한 요소의 필터링 첫 번째 아이템이에요! 두 번째 아이템이에요! 세 번째 아이템이에요! 필터링 ▼ 2 - 2 .필터링에서 사용할 수 있는 선택자 선택자 설명 :eq(n) 선택한 요소 중에서 인덱스가 n인 요소를 선택함. :gt(n) 선택한 요소 중에서 인덱스가 n보다 큰..

CSS 선택자를 이용한 HTML 요소 선택 적용 방법 - 선택한 요소에 지정한 스타일을 적용 $("CSS선택자").css("스타일 속성명", "값"); - 선택한 요소에 지정한 속성을 적용 $("CSS선택자").attr("속성명", "값"); 선택자 종류 종류 사용법 설명 전체선택자 $(" * ") 모든 요소를 선택 아이디 선택자 $("#아이디명") id 속성에 지정한 값을 가진 요소를 선택 클래스 선택자 $(".클래스명") class 속성에 지정한 값을 가진 요소를 선택 요소 선택자 $("요소명") 지정한 요소명과 일치하는 요소들만 선택 그룹 선택자 $("선택1, 선택2, 선택3...") 지정된 요소들을 한번에 선택 종속 선택자 $("요소.클래스명") $("요소#아이디명") 요소들중 클래스 or 아이디..

제이쿼리 적용 - 제이쿼리는 자바스크립트 라이브러리 - 제이쿼리 파일은. js 파일 형태로 존재해야한다. - 따라서 웹 페이지에서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹 페이지에 로드해야 한다. 1. 제이쿼리 적용 방법 1) 제이쿼리 파일을 받아 로드하는 방법 - 공식 사이트에서 다운로드 후 제이쿼리 파일을 서버에 저장 후, 2. 구글 CDN : 3. MS CDN : 4. CDNJS CDN : 5. jsDelivr CDN : 제이쿼리 기본 문법 $(선택자).동작함수(); => HTML요소 선택하고 동작 함수 정의하여 선택된 요소에 원하는 동작을 설정할 수 있다. 달러($) 기호 : 제이쿼리를 의미하며, 제이쿼리에 접근할 수 있는 식별자이다. $() 함수 : 함수는 선택된 HTML 요소를 제..