* jQuery
- 라이브러리란(library)
: 자주 사용하는 코드들을 재사용 할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들
- jQuery란?
1. Element를 선택하는 강력한 방법과
2. 선택된 Element들을 효율적으로 제어할 수 있는 다양한 수달을 제공하는
3. JavaScript library
- 사용방법
: jQuery 홈페이지에서 로직을 다운받아 html에 src를 삽입한다
- jQuery의 문법
1. $('.제어대상').method1().method2();
--------- ---------------
주어 서술어
- JS vs jQuery
: jQuery를 사용하면 js보다 짧게 코딩을 할 수 있다
- 레퍼(warpper)란?
: jQuery(element object | 'CSS스타일')
-> jQuery() 부분이 레퍼이다 => 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환
- 선택자(Selector)란? -> CSS스타일 선택자
1. 기본 - #jQuery -> jQuery라는 이름을 가진 id 선택 => id선택자
- .tutorial -> tutorial이라는 이름을 가진 class 선택 => class선택자
- li -> li Element를 선택 => Element 선택자
- #jQuery,#MYSQL -> jQuery,MYSQL 이름을 가진 id 선택 => 다중선택자
2. 필터(filter) : 기본 선택자 보다 디테일하게 원하는 것을 찾을 수 있다
- #list li:eq(2) -> id가 list의 자식 element 중에 li라는 element 의 index 2자리에 있는 element 찾아내는 선택자
- #list li:gt(1) -> index 값이 1보다 큰(뒤에있는2,3,4 ...) element를 가져온다는 뜻
- #list li:lt(2) -> index 값이 1보다 작은(앞에있는 0,1) element를 가져온다는 뜻
- #list li:even -> 홀수 index값 선택
- #list li:odd -> 짝수 idnex값 선택
- #list li:first -> 첫번째 index값 선택
- #list li::last -> 마지막 index값 선택
3. 속성 : 속성 이름 OR 값을 통해 필요로 하는 Element를 찾아내는것
=> [속성이름 기호= "속성값"] -> 대괄호안에 속성이름과 속성값이 들어있다, 속성값은 ""OR''으로 묶여있어야한다,속성이름과 속성값 사이에는 =이 들어가고 = 앞에는 기호가 들어간다
- *(기호) : *= => 속성의 값에 주어진 문자열이 포함되는 Element를 찾아내는 선택자
- = : = => 아무런 기호가 없이 = 만 주어지면 속성의값에 주어진 문자열이 일치하는 Element를 찾아내는 선택자
- ! : != => 속성의값에 주어진 문자열이 일지하지 않는 Element를 찾아내는 선택자
- ^ : ^= => 속성의값으로 주어진 문자열이 처음 등장하는 Element를 찾아내는 선택자
- $ : $= => 속성의값으로 주어진 문자열이 마지막으로 등장하는 Element를 찾아내는 선택자
- [속성이름] : 속성이 존재하는 Element를 찾아내는 선택자
- [속성이름] [속성이름] : 멀티속성 선택자 => 속성들이 존재하는 Element를 찾아내는 선택자
- 체인(Chain)이란?
: jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다
-> 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다 => 코드가 간결해진다
- 탐색(traversing) : 체인(Chain)의 대상을 바꿔서 체인을 계속 연장시킬수 있는 방법
-> 너무 복접한 Chain은 코드의 가독성을 떨어 뜨릴 수 있다
- 이벤트(Event) : 시스템에서 일어나는 사건 (클릭,마우스이동,타이핑,페이지로딩 등)
- jQuery의 이벤트
1. 크로스브라우징 문제를 해결해줌
2. bind로 이벤트 핸들러 설치후 unbind로 제거
3. trigger로 이벤트 핸들러로 강제실행
4. click,ready와 같이 다양한 이벤트 헬퍼를 제어
5. live를 이용하면 현재 존재하지 않는 Element에 이벤트 핸들러를 설치할 수 있다
- 애니메이션 : js와 CSS를 이용해 HTML Element에 동적인 효과를 줄 수 잇다