[JavaScript] jQuery

# jQuery

• jQuery란 JavaScript의 생산성을 향상시켜주는 JavaScript 라이브러리이다.

라이브러리란?

자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들이다.

•  jQuery를 사용하면 아주 편하게 HTMl 요소를 선택하고, 쉽게 특정 동작들을 설정할 수 있다.

사용 예시 : 


	$(선택자).동작함수();


//달러($) 기호는 제이쿼리를 의미하면서 제이쿼리에 접근할 수 있는 식별자
//괄호안에 "선택자"를 이용하여 원하는 HTML 요소를 선택하고 동작 함수를 정의하여 
//선택된 요소에 원하는 동작을 설정

 

# jQuery의 특징

• Element를 선택하기 쉽게 할 수 있다.
• 선택된 Element들을 효율적으로 제어할 수 있다.

 

# javaScrtip vs jQuery 문법 비교

1. javascript 의 getElementsByTagName()를 jQuery로 표현

$( ' div ' )
$( ' em ' )

2. javascript 의 getElementsById()를 jQuery로 표현( css 의 ID )

$ (  ' #myid ' )
$ ( ' p#myid ' )


- 첫번째의 #myid 는 모든 엘리먼트의 id="myid" 인 값을 가져오는 것이고
- 두번째의 p#myid 는 p 태그의 id 를 가져오는 것 <p id ="myid" >

3. Class를 jQuery로 가져오기

$ ( ' .myclass ' )
$ ( ' p.myclass ' )
$ ( '.myclass.otherclass ')


- 첫번째는 myclass 를 가지고 있는 엘리먼트를 가져 오는 것
- 두번째는 p 태그의 myclass 를 쓰고 있는 것을 가지고 오는 것
- 세번째는 myclass 와 otherclass 둘 다 쓰고 있는것 두개를 함께 가져 오는 것

4. 특정 부모의 자식 요소를 jQuery로 가져오기

$ ( ' #container p ' )
$ ( ' a img ' )


- 첫번째는 #container 의 id 를 쓰고 있는 엘리먼트의 자식요소 중 p 엘리먼트를 구하는 것
- 두번째는 a 태그의 img 엘리먼트는 구하는 것

 

 

[출처 : https://choseongho93.tistory.com/213]

[출처 : https://velog.io/@surim014/jQuery-%EA%B8%B0%EB%B3%B8-%EC%A7%80%EC%8B%9D-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-v0k5wl6ck9]

[출처 : https://joke00.tistory.com/196]