이번 시간은 jquery를 활용해서 프로젝트를 진행하려고 합니다.
jquery는 다운로드 받아도 되지만 그냥 script에 포함시켜서 사용할 수도 있습니다.
구글이 이미 다운로드 해서 배포해놨고, jquery사이트에서 이 스크립트를 사용하면 다운로드 없이 사용이 가능하다.
Download jQuery | jQuery
link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download
jquery.com
jquery에서 아래로 쭉 내리면 other CDNs항목을 찾을수 있는데요 여기서 googleCDN으로 들어갑니다.
그리고 나서 아래와 같은 script를 찾아줍니다.
이 script를 복사 한 후 아래와 같이 스크립트에다가 넣으면 jquery를 쓸 수 있게 됩니다.
그리고 만약에 jquery 의 api가 어떤게 있는지 확인하려면 아래와 같이 API Documentation을 보시면 됩니다.
jquery를 한번 써보도록 하겠습니다.
먼저 선택자!
바닐라자바스크립트에서는 queryselector 를 사용해서 선택을 했었죠?
jquery에서는 아래와 같이 선택자를 사용한답니다.
$('.sel') 을 통해서 클래스 sel을 선택함을 알수 있습니다.
만약 div class 내에 아래와 같이 p태그가 있을 경우에는 어떻게 해야될까?
바로 child를 선택하는 문법을 사용하면 됩니다.
사용하는 방법은
$(' class명 > child태그')입니다.
그리고 위의 예제에서 나는 2.선택자 태그만 선택하고 싶을 경우 어떻게 해야할까요?
바로 .eq(n)를 사용하시면 됩니다.
물론 css방식으로 nth-of-type(n)을 사용하셔도 됩니다.
다만 css방식과 jquery방식은 숫자 새는게 0부터냐, 1부터냐의 차이가 있어서 하나로 통일하시면 안해깔리시겠죠 ^^?
자 이렇게 순서로 찾는 방법도 있지만 프로젝트를 하다보면 수많은 태그들이 쓰여있을텐데 순서로만 찾기는 힘들수 있어요.
이럴때 사용하는게 class를 사용하고. class명으로 검색을 하는 방법이에요.
p태그가 'th' class를 부여받았고 이를 찾아내는 방법입니다.
오히려 하나만 찾는게 아니라 하나만 제외하고 전부 선택할 경우도 있겠죠?
그럴경우 not명령어를 사용합니다.
console.log( $('sel p').not('.th'))
이렇게 하면 p태그들 중에서 th클래스를 제외하고 선택되게 됩니다.
정리하자면
jquery 사용법: $('선택자').메소드 (); (메소드의 경우 계속 붙을수 있다. )
eq 는 형재요소들 중에서 n번째 선택자를 찾을때
find는 형재요소들 중에서 원하는 선택자를 찾을때 (class, id, tag)
not 은 형재요소들 중에서 제외하고 싶은 선택자를 찾을때
사용합니다.
메소드들만 잘 활용할줄알면 jquery는 쉬워질겁니다.
'컴퓨터 프로그래밍 > Javascripts' 카테고리의 다른 글
| 자바스크립트 9일차 - jquery burgermenu, header (0) | 2023.04.20 |
|---|---|
| 자바스크립트 8일차 - jquery css와 클릭이벤트 (1) | 2023.04.18 |
| 자바스크립트 6일차 - 함수의 매개변수 (0) | 2023.04.11 |
| 자바스크립트 4일차 - 배열 입력 > 응용한 출석부 만들기 (0) | 2023.04.06 |
| 자바스크립트 3일차 - 삼항연산자, input tag, form tag와 이벤트 (0) | 2023.04.04 |
