JavaScript/jQuery(18)
-
[jQuery] 인덱스 필터 선택자
1. 인덱스 번째 태그 선택하기 :eq(인덱스) : 인덱스(0부터 시작)번째 해당하는 태그를 서택 :nth-child(인덱스) : 각 영역의 인덱스(1부터 시작)번째 해당하는 태그를 선택함. 인덱스번째 태그가 선택자에 해당하지 않으면 선택되지 않음 :nth-of-type(인덱스) : 각 영역의 인덱스(1부터 시작)번째 해당하는 태그를 선택함, nth-child와 차이점은 인덱스번째 태그가 선택자가 아니라면 해당 영역에서 태그에 맞는 다음 태그를 탐색합니다. :gt(인덱스) : 선택자에 해당하는 태그 중 인덱스(0부터 시작)번째 태그 이후(인덱스번째 미포함)의 태그들이 선택됨 :lt(인덱스) : 선택자에 해당하는 태그 중 인덱스(0부터 시작)번째 태그 이전(인덱스 번째 미포함)의 태그들이 선택됨 :nth-..
2022.06.09 -
[jQuery] 순서 필터 선택자
1. 필터 선택자 선택자를 통해 선택된 태그 중에 태그의 상태에 따라 선택할 수 있는 선택자 순서, 태그의 현재 상태 등이 있습니다. 2. 첫번째 태그 선택하기 :first : 선택자에 해당하는 태그 중 가장 처음 태그가 선택됩니다. :first-child : 선택자에 해당하는 태그 중 각 영역별 첫번째 태그가 선택됩니다. 처음 태그가 선택자에 해당하지 않으면 선택되지 않습니다. :first-of-type : 선택자에 해당하는 태그 중 각 영역별 처음 태그가 선택됩니다. p 태그 div 안의 p태그 div 안의 p태그 div 안의 p태그 div 안의 div태그 div 안의 p태그 div 안의 p태그 3. 마지막 태그 선택하기 :last : 선택자에 해당하는 태그 중 가장 마지막 태그가 선택됩니다. :la..
2022.06.09 -
[jQuery] 기본 선택자(basic selector) 조합
1. 기본 선택자 조합 경우에 따라서는 기본 선택자를 조합해야 하는 경우가 있습니다. 에를 들어 div 태그들 중에 class가 a인 태그를 선택하겠다면 태그 이름과 클래스 속성을 조합하여 선택해야 합니다. div class a1 div class a2 p class a3 p class a1 2. 기본 선택자 조합 종류 선택자1, 선택자2 : 동시에 여러 태그를 선택할 때 사용합니다. 선택자 1 > 선택자2 : 태그의 바로 하위의 태그들을 선택할때 사용합니다. 선택자1 선택자2 : 태그 내부의 모든 태그들을 선택할 때 사용합니다 선택자1선택자2 : 모든 선택자를 만족하는 태그를 선택합니다. 선택자1 + 선택자2 : 선택자1 태그 바로 다음에 있는 선택자2 태그를 선택합니다. 선택자1 ~ 선택자2 : 선택..
2022.06.08 -
[jQuery] 기본 선택자(basic selector)
1. 선택자 HTML 문서에 있는 태그 객체 중 필요한 태그 객체를 가져오기 위한 방법 jQuery 함수에 문자열을 넣어주면 작성된 문자열의 양식에 따라 해당하는 태그 객체를 가져 올 수 있습니다. 태그 객체를 가져오기 위해 작성하는 문자열 선택자(selector)라고 부른다. jQuery에서는 선택자를 CSS의 선택자와 동일한 문법을 사용합니다. 2. 기본 선택자 jQuery 선택자중 가장 기본이 되는 선택자이며 다른 선택자는 기본 선택자를 조합하여 만들게 됩니다. 전체 선택자(*) : HTML 문서 내의 모든 태그를 선택합니다. 태그이름 선택자(태그이름) : 지정한 태그 이름에 해당하는 태그 객체를 가져옵니다. 아이디 선택자(#아이디) : id 속성을 통해 태그 객체를 가져옵니다. 클래스 선택자(.클..
2022.06.08 -
[jQuery] jQuery 함수와 Ready
1. jQuery 함수 jQuery 함수는 jQuery에서 가장 중요한 함수 JavaScript는 생성된 객체 멤버를 추가하는 것이 자유롭습니다. 이러한 점을 이용해서 만들어진 라이브러리가 jQuery 라이브러리이다. JavaScript에서의 객체를 jQuery 함수에 매개변수로 넣어주면 객체에 jQuery에서 만든 여러 함수를 객체를 추가하여 반환합니다. 이를 통해 객체에 대한 jQuery 함수를 이용해 다양한 작업을 수행합니다. jQuery 함수는 jQuery(객체) 형태로 작성하지만 jQuery 6글자 대신에 $(객체)로 작성할수도 있습니다. 2. ready 함수 ready 함수는 JavaScript의 window.onload와 흡사합니다. Window.onload는 태그 객체가 모두 생성되면 발생..
2022.06.08 -
[jQuery] jQuery 개발환경 준비
1. jQuery 소개 jQuery는 모든 브라우저에서 실행되는 클라이언트 프로그래밍 언어 jQuery는 JavaScript를 보다 간략하고 보다 강력하게 사용할 수 있도록 설계되었으며 오늘날 가장 인기 있는 JavaScript 라이브러리입니다. 2. jQuery의 주요 기능 CSS 셀렉터를 활용한 태그 접근 이벤트 처리 특수 효과 및 애니메이션 Ajax JSON 파싱 플러그인을 통한 확장성 멀티 브라우저 지원 3. jQuery 종류 jQuery : jQuery 그룹에서 만든 JavaScript 라이브러리 jQuery UI : jQuery 기반으로 만들어진 데스크탑 용 웹 애플리케이션 UI 라이브러리 jQuery Mobile : jQuery 기반으로 만들어진 모바일용 웹 애플리케이션 UI 라이브러리 4...
2022.06.08