[JavaScript] jQuery

1. jQuery

- 요소들을 선택하는 강력한 방법을 제공하고, 선택된 요소들을 효율적으로 제어할 수 있게 해주는 자바 스크립트 라이브러리
- 자바에서 JVM 느낌

 

- 예전에는 스크립트가 자바스크립트 외에도 다양하게 많았기 때문에 브라우저마다 코드가 달랐다.

- 그때 나온 게 jQuery인데 여기에 코드를 쓰면 jQuery가 각 브라우저에 맞게 알아서 변환시켜준다.

- 지금은 자바스크립트가 표준이 되었기 때문에 안 쓰는 추세이지만 여러 개의 태그 객체를 가져와서 for문을 돌려 하나하나 스타일을 줄 때와 같은 불편함을 해결해 주는 데는 jQuery만큼 좋은 게 없다.

 

- jQuery를 사용하면 순수 JavaScript에 비해 속도가 느려진다.

- 하지만 간결한 문법으로 인해 개발 속도 증가와 처리비용 감소에 대한 장점이 있다.

- 따라서 까다로운 UI 작업의 경우 가벼운 DOM 스크립트를 이용하고, 적절한 상황에 맞춰서 둘 다 사용할 줄 알아야 한다.

2. 라이브러리 추가해서 사용법

https://jquery.com/

jQuery

첫 번째 방법

- 다른 이름으로 링크 저장을 한 뒤

- <title>밑에 <script>로 해주면 된다. 

 

두 번째 방법

- 2번째 방법은 링크 주소 복사를 한 뒤

- 그 링크를 <script> 경로에 붙여 넣기 하면 된다.

3. jQuery의 문법

• 기본 문법
  $("선택자")
  - DOM을 이용해서 가져오는 태그 객체는 실제 태그 객체이지만 jQuery, $를 이용해서 가져오는 객체는 실제 태그 객체가 아니라 jQuery 객체이다. 그러기 때문에 안에 있는 프로퍼티나 메소드가 다르다.
  
  아이디 선택자 : $("#아이디명")
  태그 선택자 : $("태그명")
  클래스 선택자 : $(".클래스명")
  속성 선택자 : $("[속성명=속성값]")
       ex) $("[type=radio]") :  type 속성값이 radio인 것들을 선택
• 태그의 값 - JS에서 .value
  $("선택자").val : value 속성의 값을 가져오기
  $("선택자").val("바꿀값") : value 속성의 값을 바꾸기
• 태그의 내부 문자열 - JS에서 .innerHTML
  $("선택자").text() : 태그 내부의 텍스트 내용
  $("선택자").text("바꿀값") : 태그 내부의 텍스트 내용을 변경
• 태그의 스타일
  $("선택자").css("속성명","속성값") : 태그의 스타일 변경
  - DOM을 이용해서 하는 거와 달리 for문 필요 없이 한 번에 다 변경 가능
• 태그의 속성값
  $("선택자").attr("속성명") : 해당 속성의 값
• 반복문
  - each 앞에 여러 개의 선택된 요소가 있을 때
  $("선택자").each(
         function() {
                선택된 요소의 수만큼 함수 실행
                선택자로 선택된 요소를 하나씩 꺼내오며 익명 함수 호출
                $("this") 선택된 요소 중 한 개(jQuery객체)
         }
  )
  - index, item 매개변수를 넘겨서 사용할 때
  $("선택자").each(
         (index, item) => {
                index : 몇 번째 반복인지(0 ~ )
                item : 앞에서 꺼내오는 태그 객체(특이하게 item은 jQuery객체가 아닌 JS 객체)
         }
  )
  - each 앞에 선택자 없이 사용할 때
  $.each(
         반복자,
         function(index, item) {
                each 앞에 선택자가 없으면 반복자를 같이 넘겨주어
                반복자 안에서 하나씩 요소를 꺼내오며 함수를 호출 시킴
         }
  )

4. 예시

 

5. 그 외 문법

• $(" ").on("cliclk", function(e) {})
  - " "를 클릭 했을 때 함수 실행
  - function(e)에서 e는 클릭했을 때 원래 실행되는 함수를 의미
  - e.preventDefault()를 하게 되면 원래 실행되는 함수를 막고, 클릭할 때 정의해 놓은 함수가 실행된다.

• $(" ").find()
  - " " 안에 있는 것들 중 태그를 하나 찾음

• $(" ").show() / $(" ").hide()
  - show() : $(" ") 태그를 보여주는 명령어(display를 none이 아닌 것으로 변환)
  - hide() : $(" ") 태그를 숨기는 명령어(display를 none으로 변환한 거와 같음)

• $(" ").remove() / $(this).
  - $(" ").remove() : " " 태그를 삭제
  - $(this) : 선택되어 있는 태그 자신

• $(" ").next() / $(" ").prev()
  - $(" ").next() : " " 태그 다음 요소
  - $(" ").prev() : " " 태그 이전 요소