[jQuery] 라이브러리 파일 연동 및 복습

 

jQuery

 

jQuery는 JavaScript의 라이브러리 중 하나입니다. 쉽고 단순하다는 장점이 있고, 솔직히 JavaScript 훨씬 편하게 하려고 만들었다 생각해도 무방합니다.

 

더해 장점으로는 여러가지를 더 언급할 수 있습니다.

 

1. HTML DOM을 쉽게 다룰 수 있습니다.

2. CSS를 쉽게 다룰 수 있습니다.

 

선택자를 잡을 때 CSS 선택자를 그대로 사용하기 때문에, 보편적인 교육 과정에서 HTML과 CSS를 배우고 JavsCript와 jQuery로 넘어온 저를 포함한 대부분의 학생 분들께선 이 점에서 더 쉽고 재밌게 접근할 수 있겠다 생각이 들었습니다.

 

jQuery 라이브러리 파일 연동

 

라이브러리 파일 연동

 

마지막 줄을 보시면

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 

이것이 입력된 것을 보실 수 있습니다. jQuery로 코딩을 하실 때엔, head에 저 jQuery 라이브러리 파일 URL을 입력해주셔야 동작합니다.

 

jQuery의 기본 구문

 

 

$는 jQuery에 접근하기 위한 함수이며, () 안에, CSS 선택자와 같이 id 값이나 class 값, 타입들을 불러올 수 있습니다.

 

선택자

 

 

아까 말씀드렸다시피, CSS와 똑같이 전체를 잡을 땐 "*", id를 잡을 땐 $("#id"), class를 잡을 땐 $(".class")로 잡아주며, 태그명을 잡을 땐 $("p")로 매우 닮은 것을 보실 수 있습니다.

 

탐색 선택자

 

 

탐색 선택자는, 본인을 기준으로 parent(부모 요소), child(자식 요소), sibling(형제 요소) 등을 잡는 선택자를 의미합니다. 본인을 기준으로 하기 때문에, 본인은 포함되지 않습니다.

 

CSS

 

 

.CSS("", "");으로 CSS 속성을 변경할 수 있습니다. 위에 이미지는 제가 오늘 공부한 내용인데요. 보시면 변경하고자 하는 입력값들이 한 가지인데, 만약 두 개 이상을 입력하고 싶으시다면 어떻게 해야 할까요?

 

 

이처럼 CSS() 괄호 안에, 중괄호를 넣어 그 안에다가 입력을 해 주는 것입니다. 그리고 값들 사이사이에 쉼표(,)를 입력해줘야 제대로 된 값이 출력됩니다.

 

.click(function(){});

 

 

클래스명 join을 클릭하면, 함수를 실행시켜 주는 것을 jQuery로 작성한 것입니다.

 

 

제가 기존에 <style>에 .on과 .test 클래스를 css로 꾸며줬습니다. 그래서 .join을 클릭하면 본인에게($(this)) .on이 추가(add)되고, .join은 제거(remove)됩니다. .test는 click을 하면 왔다갔다 할 수 있게끔 .toggleclass로 붙여줬고, HTML은 "텍스트 변경"이란 문자열로 변경이 됩니다.

 

click 전

 

click 후 함수 실행

 

toggleclass로 .test가 입력된 모습

 

eq, lt, gt

 

HTML

 

제가 작성한 HTML입니다. 출력 화면은 밑에와 같습니다.

 

출력 화면

 

저는 중간에는 노란색 배경을, 1번과 2번엔 빨간색, 4번과 5번엔 파란색 배경을 주고 싶습니다. 이럴 때는 eq와 lt, gt로 인덱스 번호를 잡아서 CSS 속성을 입력해주시면 되는데요?

 

eq, lt, gt

 

이처럼, eq(숫자)는 인덱스 번호를 잡아주는 기능이 있고, lt는 선택한 인덱스 번호보다 작은 것, gt는 선택한 인덱스 번호보다 큰 것을 잡아줍니다. 이렇게 되면, 5개를 기준으로, 중간과, 중간보다 작은 것 2개, 중간보다 큰 것 2개를 잡았으니, 제가 원하는 값이 나왔는지 한 번 봐 보도록 하겠습니다.

 

출력 화면

 

잘 나온 것 같습니다. 하지만 여기서 눈치가 빠르신 분들이라면, 분명 eq(2)에다 줬는데, 왜 3. sub3이 노란색인지 궁금해하실 텐데요?

저희가 3번에 CSS 속성을 넣고 싶다고 해서 eq() 안에 3을 넣어버리시면 안 됩니다. eq()는 배열의 인덱스를 0부터 가지고 오기 때문에, eq(2)는 저희가 원하는 3번을 제대로 선택한 것이 맞습니다. 나머지도 lt(2)이면, 2보다 작은, 0과 1이 올 것이고, gt(2)이면, 2보다 큰 3과 4가 잡힌 것을 확인하실 수 있습니다.

 

속성 조작 메서드 attr

 

클릭으로 이미지를 변경하거나, 링크를 변경할 수도 있습니다. 바로 속성 조작 메서드 attr를 이용해, src이나 href를 변경해주면 되는데요.

 

HTML

 

img로 가위 이미지를 하나 가지고 왔습니다. 그리고 주석에 작성해놓은 것처럼, 저는 이미지를 누르면 바위로 바뀌면서, 네이버로 이동을 하게 할 거고, 테두리도 1px solid red로 주도록 하겠습니다.

 

jQuery

 

이건 제가 작성한 script입니다.

 

 

첫줄부터 리뷰를 해 드리자면, 제가 이미지를 a 태그로 묶었기 때문에, $("a")로 불러와도 되고 속성값인 $("[href]")로도 잡아줘도 됩니다. 이미지를 클릭하면(.on("click", function(e){});), a 태그 안에 자식인 img의$("a>img") 속성을(.attr) "src"를 "math_ing_2.jpg"(바위 이미지)로, "alt"를 "바위"로 변경해 주도록 했습니다.

 

 

이어서 두 번째는 자기 자신의($(this)) CSS 속성을 제가 의도한 대로, 테두리는 "2px solid red"로 주고, 부피가 없어서 display 속성을 block 값으로 지정해줬습니다.(주석과는 테두리 두께를 다르게 설정했네요.) 그리고 이어서 클릭하면 네이버로 넘어가게끔 해줘야겠죠? .attr을 이용해 "href"를 네이버로 지정해줬고, 새 창이 열릴지 현재 창에서 이동할지 설정해줘야 합니다.

 

저는 현재 창에서 이동하는 것보다 새 창이 열리는 게 좋아, target을 _blank 줬습니다. 이러면 새 창이 열립니다. 아시겠지만, 현재 창에서 이동하려면 _self를 입력해주시면 현재 창에서 이동됩니다.