웹동네 JSJQ 실무기초 스터디 1주차-제이쿼리기초1
-
Upload
kim-sehwan -
Category
Education
-
view
125 -
download
0
Transcript of 웹동네 JSJQ 실무기초 스터디 1주차-제이쿼리기초1
Javascript & jQuery 실무제작 기초 스터디
1주차 - 제이쿼리 기초 1 김세환([email protected]) / 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부
아…아직 이러고 계신거 아니죠?
오늘의 제이쿼리 기초가 끝났습니다.