jQuery

- 오픈소스 기반의 JavaScript의 라이브러리 중 하나

- 기존 JavaScript 코드를 짧고 단순한 코드로 웹 페이지에 다양한 효과나 연출(HTML의 DOM 조작, 이벤트 핸들링, 애니메이션, Ajax)을 적용할 수 있음

- Element(HTML 태그) 선택이 편리하고 효율적으로 제어할 수 있음

- $() = jQuery 객체를 의미 (=jQuery())

- $(HTML태그) 형식으로 지정한 HTML 태그 전체를 지정

- HTML 파일에서 <body> 마지막 부분에 jQuery CDN에 있는 버전별 script 코드를 복사+붙여넣기하여 세팅

- $(document).ready(function(){}) = $(function(){}) = DOM이 생성되면(위 -> 아래 순으로 모든 코드를 읽은 후 실행) 지정한 함수 실행

- html(요소) = 지정한 요소 내부에 지정한 HTML 코드 모두에 반영되도록 설정 (=innerHTML)

- text() = 지정한 HTML 태그에 텍스트 데이터 반환 (=textContent)

- attr(속성) = 지정한 HTML 태그의 지정한 속성값을 읽어옴 (getter)

- attr(속성, 데이터) = 지정한 HTML 태그의 지정한 속성에 지정한 데이터로 설정 (setter)

- val() = 지정한 input, form 태그의 value 값 반환

- width() = 너비 지정

- height() = 높이 지정

- find() = 지정한 HTML 태그의 자손 요소 중에서 지정한 선택자에 해당하는 모든 요소 선택 (find()한 후에는 end()로 마무리해줘야 함)

- hide() = 지정한 HTML 태그를 숨김 (css("display", "none")과 동일)

- keyup() = input 태그와 함께 쓰이며 키보드의 키가 눌러졌다 뗄 때 이벤트를 발생시킴

- css("CSS 속성명", "속성") = 지정한 HTML 태그에 지정한 CSS 속성 설정 (속성이 하나일 경우)

- css({"CSS 속성명1":"속성1", "CSS 속성명2":"속성2", ...}) = 지정한 HTML 태그에 지정한 CSS 속성 설정 (속성이 여러 개일 경우)

- $(this) = 콜백 함수 내부에서 $(태그) 객체를 불러올 때 사용

※ JavaScript 콜백 함수에서 this를 활용할 때는 화살표 함수가 아닌 선언식을 사용할 것!

- toggleClass() = 지정한 HTML 태그가 class의 값을 가지고 있으면 삭제 그렇지 않으면 추가

- first() = 선택한 요소의 첫번째 요소 반환

- last() = 선택한 요소의 마지막 요소 반환

- filter() = 선택한 요소 중에서 전달받은 선택자에 해당하거나 함수 호출의 결과가 true인 요소 반환

- not() = 선택한 요소 중에서 전달받은 선택자에 해당하거나 함수 호출의 결과가 false인 요소 반환

- has() = 선택한 요소 중에서 전달받은 선택자에 해당하는 요소를 자손 요소로 가지고 있는 요소를 모두 선택

- is() = 선택한 요소 중에서 전달받은 선택자에 해당하는 요소가 하나라도 존재하면 true 반환

- eq() = 선택한 요소 중에서 전달받은 인덱스에 해당하는 요소 선택

- slice() = 선택한 요소 중에서 전달받은 인덱스 범위에 해당하는 요소만을 선택

ex) slice(3) = 3 이상, slice(2,4) = 2 이상 4 미만

To the big data of media