Javascript & jQuery 실무제작 기초 스터디

1주차 - 제이쿼리 기초 1 김세환(hidepink@naver.com) / 2014.11.23 (sun)

제이쿼리가 할 수 있는 일은?

jQuery가 하는일

• HTML 문서안의 요소를 찾는다

• 찾은 요소를 조작한다

예

• 모든 <div>의 배경색깔을 #FF0000;으로 만들어라!

• $(“div”).css({‘background’: ‘#FF0000’});

제이쿼리는 이게 다예요… 더 있을지도 모르지만 우선…

아무튼 제이쿼리는 뭔가를 찾아서

일을 시킵니다

바꿔말하면 뭔가를 못 찾으면

아무일도 못하는 바보입니다

찾는법,일시키는법 두 가지만 배우면 되므로 찾는법이 되게 중요해요

찾는법 기초 (Selector)

셀렉터란?• HTML 문서안의 요소를 찾는 방법을 말합니다.

아래의 것들을 주로 찾게 되죠

• 태그(body,div,span,a,etc…)

• 아이디(id=‘footer’)

• 클래스(class=‘container’)

태그

• $( “a” )

<div id=“container”> <a class=“btn” href=“”> 클릭 </a> <div class=“playerName”> 강백호 </div> </div> <div id=“footer”> <a class=“btn” href=“”> <span class=“name”>저도 클릭</span> </a> </div>

아이디

• $( “#container” )

<div id=“container”> <a class=“btn” href=“”> 클릭 </a> <div class=“playerName”> 강백호 </div> </div> <div id=“footer”> <a class=“btn” href=“”> <span class=“name”>저도 클릭</span> </a> </div>

클래스

• $( “.btn” )

<div id=“container”> <a class=“btn” href=“”> 클릭 </a> <div class=“playerName”> 강백호 </div> </div> <div id=“footer”> <a class=“btn” href=“”> <span class=“name”>저도 클릭</span> </a> </div>

클래스의 경우처럼 여러개가 존재할 경우 제이쿼리는

여러개 전부를 선택합니다.

여러개 중 정확히 선택하려면… 자식 요소를 선택할 수 있어요

• $( “#container .btn” )

• $( “.btn .name” )

<div id=“container”> <a class=“btn” href=“”> 클릭 </a> <div class=“playerName”> 강백호 </div> </div> <div id=“footer”> <a class=“btn” href=“”> <span class=“name”>저도 클릭</span> </a> </div>

이 밖에도 셀렉터의 종류는 매우 많습니다

• 우선 자식 요소 선택하는 방법을 많이 연습해두세요

• 나머지 방법은 나중에 배워도 괜찮습니다

이제 일을 시켜봅시다addClass / removeClass / html

addClass() / removeClass()

• 선택한 요소에 클래스이름을 추가 / 삭제 합니다

• 그래서 css 파일에 미리 정의해놓은 클래스들을 켜고 끄는 것 처럼 썼다가 안썼다가 할 수 있습니다.

addClass() / removeClass()

• (예) http://jsfiddle.net/hidepink/2tLy88ok/1/

• $( “.container” ).addClass(“iamRedBackground”);

• $( “.container” ).removeClass(“iamBlueBackground”);

html()

• 선택한 태그 안에 HTML 내용을 덮어씌운다

• 예) $(“#container”).html(“<h1>안녕하세요!</h1>”);

• http://jsfiddle.net/hidepink/2tLy88ok/1/

테스트소셜스터디 제이쿼리 노드찾기 1부 소셜스터디 제이쿼리 노드찾기 2부

아…아직 이러고 계신거 아니죠?

오늘의 제이쿼리 기초가 끝났습니다.