언어공부 (188) 썸네일형 리스트형 제이쿼리(jQuery) 기초 문법 - 배열 관련 메소드 제이쿼리(jQuery) 기초 문법 배열 관련 메소드 제이쿼리에는 배열 관련 메소드도 있다. 배열 관련 메소드의 종류 종류 사용법 설명 each() / $.each() $("요소 선택").each(function) $.each($("요소선택").function) 배열에 저장된 문서 객체만큼 메소드가 반복 실행된다. 배열에 저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구한다. $.map() $.map(Array.function) 배열에 저장된 데이터 수만큼 메소드가 반복 실행된다. 함수에서 반환된 데이터는 새 배열에 순서대로 저장된다. 새로 저장된 배열 객체를 반환한다. $.grep() $.grep(Array.function) 배열에 저장된 데이터 수만큼 메소드가 반복 실행된다. .. 제이쿼리(jQuery) 기초 문법 - 선택자 (5) 콘텐츠 탐색 선택자 제이쿼리(jQuery) 기초 문법 탐색 선택자 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 서택할 수 있다. 대표적인 탐색 선택자에는 배열의 인덱스(index)를 사용해 선택하는 '위치 탐색 선택자'와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 '속성 탐색 선택자'가 있다. 콘텐츠 탐색 선택자 콘텐츠 탐색 선택자 종류 종류 사용법 설명 $("요소 선택:contains(텍스트)") $("li:contains('내용')") 요소 중 '내용2'라는 텍스트를 포함하는 요소만 선택한다. $("요소 선택").contents() $("p").contents() 선택한 p 요소의 하위 요소 중 가장 가까운 하위 요소를 선택한다. $("요소 선택:ha.. 제이쿼리(jQuery) 기초 문법 - 선택자 (4) 위치 탐색 선택자, 속성 탐색 선택자 제이쿼리(jQuery) 기초 문법 탐색 선택자 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 서택할 수 있다. 대표적인 탐색 선택자에는 배열의 인덱스(index)를 사용해 선택하는 '위치 탐색 선택자'와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 '속성 탐색 선택자'가 있다. 위치 탐색 선택자 기본 선택자로 선택한 요소는 배열에 담긴다. 이 때 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있다. 위치 탐색 선택자 종류 종류 사용법 설명 $("요소 선택:first") $("요소 선택").first( ) $("li:first") $("li").first( ) 전체 요소 중 첫 번째 요소만 선택 $("요소 선택:last").. 제이쿼리(jQuery) 기초 문법 - 선택자 (3) 인접 관계 선택자 제이쿼리(jQuery) 기초 문법 선택자 선택자는 HTML요소를 선택하여 가져온다. 제이쿼리 선택자는 CSS선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다. 이때 HTML에 작성한 스타일을 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 스타일(CSS)는 정적이다라고 표현한다. 하지만 제이쿼리 선택자를 사용하면 동적으로 스타일을 적용할 수 있다. 기본 선택자 영역에 있는 문서 객체를 선택할 수 있는 선택자를 알아보자. 제이쿼리의 기본 선택자는 다음과 같이 직접 선택자와 인접 관계 선택자로 나눌 수 있다. 인접 관계 선택자 인접 관계 선택자는 직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이에 있는(이전과 다음 요소)요소를 선택할 때 사용.. 제이쿼리(jQuery) 기초 문법 - 선택자 (2) 직접 선택자, 메소드 체이닝 기법 제이쿼리(jQuery) 기초 문법 선택자 선택자는 HTML요소를 선택하여 가져온다. 제이쿼리 선택자는 CSS선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다. 이때 HTML에 작성한 스타일을 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 스타일(CSS)는 정적이다라고 표현한다. 하지만 제이쿼리 선택자를 사용하면 동적으로 스타일을 적용할 수 있다. 기본 선택자 영역에 있는 문서 객체를 선택할 수 있는 선택자를 알아보자. 제이쿼리의 기본 선택자는 다음과 같이 직접 선택자와 인접 관계 선택자로 나눌 수 있다. 직접 선택자 직접 선택자는 주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자이다. 직접 선택자의 종류로는 전체(*), 아이디(#), 클래스(.).. 제이쿼리(jQuery) 기초 문법 - 선택자 (1) 기본 선택자 종류 제이쿼리(jQuery) 기초 문법 선택자 선택자는 HTML요소를 선택하여 가져온다. 제이쿼리 선택자는 CSS선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다. 이때 HTML에 작성한 스타일을 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 스타일(CSS)는 정적이다라고 표현한다. 하지만 제이쿼리 선택자를 사용하면 동적으로 스타일을 적용할 수 있다. 문서 객체 모델 문서 객체 모델(DOM, Doucument Object Model)이란 HTML 문서 객체 구조를 말한다. 문서 객체 모델(DOM)은 HTML 문서구조를 말한다. HTML문서의 기본 구조는 최상위 객체로 이 있으며, 그 하위 객체로는 내용 제이쿼리가 먼저 실행되고 그 다음 영역에 문서 객체를 불.. 자바 스크립트(JavaScript) 라이브러리 언어 - 제이쿼리(jQuery) 제이쿼리(jQuery) 기초문법 제이쿼리(jQuery) 제이쿼리는 자바스크립트를 더 쉽게 사용하기 위해 만들어진 자바스크립트 라이브러리 언어다. 라이브러리 언어란 자바스크립트로 만들어진 다양한 함수들의 집합을 가리킨다. 제이쿼리는 이런 다양한 함수들을 사용자에게 제공함으로써 간편하게 사용할 수 있도록 개선했다. 개선된 사항은 아래와 같다. 1) 호환성 문제 해결 자바스크립트의 문서 객체 모델과 이벤트 객체는 호환성(크로스 브라우징)이 떨어진다는 단점이 있다. 문서 객체 선택자의 호환성 문제가 제이쿼리에서는 모두 해결이 되었다. 2) 쉽고 편리한 애니메이션 효과 기능 구현 애니메이션과 다양한 효과를 지원하는 메소드를 제공하는 제이쿼리는 자바스크립트보다 훨씬 개발시간을 많이 단축할 수 있다. 제이쿼리 라이브.. 자바 스크립트(JavaScript) 기초 문법 - 함수(3) 자바 스크립트(JavaScript) 기초 문법 함수 변수에는 데이터만 저장할 수 있고, 코드는 저장할 수 없다. 하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때 마다 호출하여 사용할 수 있다. 객체 생성자 함수 내장 객체를 생성할 때는 이미 자바스크립트 엔진에 내장되어 있는 객체 생성자 함수(Object Constructor Function)를 사용해 객체를 생성한다. 여기서 객체 생성자 함수를 선언하고 그 다음에 객체를 생성할 수 있다. new키워드를 사용해 객체를 생성하고 객체 생성자 함수에서 this 키워드를 사용해 생성한 객체에 속성과 함수를 등록한다. 메모리 절약을 위한 프로토타입 사용 객체를 생성하면 객체를 생성한 만큼 함수가 등록된다. 함수를 여러개 등록하면 메모리 공간을 많이 .. 이전 1 2 3 4 5 6 7 ··· 24 다음