제이쿼리

제이쿼리는 자바스크립트 라이브러리 이다.

 

$("h1") = document.querySelector 와 동일하다.

 

 

두 코드는 동일하다.

 

 

그러나 웹페이지에서는 아무 반응이 없다.

그 이유는 제이쿼리 cdn 또는 파일을 포함하지 않아서 이다.

 

 

 

jQuery CDN을 추가한다.

이때 위치가 중요하다.

index.js 위에 위치해야한다.

 

그 이유는 

 

 

jQuery 라이브러리가 없는 상태에서 index.js를 실행하게 되므로 $가 뭔지 알 수 없어 오류가 난다.

 

그래도 나는 index.js 아래에 꼭 두어야 겠어! 하시는 분들을 위한

방법이 있다.

 

 

바로 위 코드를 통해 제이쿼리 라이브러리가 준비되면

제이쿼리문을 실행하도록 하는 것이다.

하지만 이방법보다는 그냥 index.js 위에 쓰자.

 

Hosted Libraries  |  Google Developers

 

jQuery CDN은 위 사이트에서 얻었다.

 

 

 

그렇다면 querySelectorAll()은 어떻게 대체 할까?

제이쿼리문 에서는 $("button") 이 하나의 개념도, All 개념도 가지고 있다.

너무 사기아닌가?

근데 요즘에는 제이쿼리말고 

다른 것을 선호한다던데 딴것은 얼마나 좋은걸까?

 

 

 

 

위와 같은식으로 .css(단일) 하나의 파라미터만 있으면 

해당 css의 값을 얻을 수 있다.

 

 

이와 같은 식으로 클래스를 추가할 수 있다.

 

 

removeClass를 사용할 수도 있다.

 

 

 

 

두개이상의 클래스는 위와 같이 추가한다.

 

 

또한 해당 태그가 클래스를 포함하는지 여부를

확인할 수도 있다.

 

 

위 코드를 사용하면 h1 태그안의 텍스트도 변경가능하다.

 

 

 

위 코드는 바닐라 자바스크립트에서는

innerHTML에 해당하는 코드이다.

태그를 추가할 수 있다.

 

 

 

 

 

 

어떤 attribute(속성)에 대한 값을 얻기 위함이다.

 

그럼 이제 속성값을 설정하는 방법이다.

 

 

기존에 네이버로 링크가 걸려있던 것을

 

 

속성값을 변경하였다.

 

 

 

위 코드로 h1에 적용된 모든 클래스를 알 수 있다.