Weitere ähnliche Inhalte
Ähnlich wie 웹동네 JSJQ 실무기초 스터디 1주차-제이쿼리기초1 (20)
웹동네 JSJQ 실무기초 스터디 1주차-제이쿼리기초1
- 4. 예
• 모든 <div>의 배경색깔을 #FF0000;으로 만들어라!
• $(“div”).css({‘background’: ‘#FF0000’});
- 10. 셀렉터란?
• HTML 문서안의 요소를 찾는 방법을 말합니다.
아래의 것들을 주로 찾게 되죠
• 태그(body,div,span,a,etc…)
• 아이디(id=‘footer’)
• 클래스(class=‘container’)
- 11. 태그
• $( “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>
- 12. 아이디
• $( “#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>
- 13. 클래스
• $( “.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>
- 15. 여러개 중 정확히 선택하려면…
자식 요소를 선택할 수 있어요
• $( “#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>
- 16. 이 밖에도
셀렉터의 종류는 매우 많습니다
• 우선 자식 요소 선택하는 방법을 많이 연습해두세요
• 나머지 방법은 나중에 배워도 괜찮습니다
- 19. addClass() / removeClass()
• (예) http://jsfiddle.net/hidepink/2tLy88ok/1/
• $( “.container” ).addClass(“iamRedBackground”);
• $( “.container” ).removeClass(“iamBlueBackground”);
- 20. html()
• 선택한 태그 안에 HTML 내용을 덮어씌운다
• 예) $(“#container”).html(“<h1>안녕하세요!</h1>”);
• http://jsfiddle.net/hidepink/2tLy88ok/1/