[6월 21일]
1) 학습한 내용
1.기본 선택자
(1)전체 선택자, 태그 선택자
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function(){ $("*").css("background-color","yellow"); $("p").css("background-color","blue"); $("div").css("background-color","green") }) </script> </head> <body> <p>문자열1</p> <p>문자열2</p> <div>문자열3</div> <div>문자열4</div> </body> </html>
(2)id,class 선택자
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function(){ $("*").css("background-color","yellow"); $("p").css("background-color","blue"); $("div").css("background-color","green") $("#test1").css("color","red"); $("#test2").css("color","yellow"); $(".test3").css("color","orange"); }) </script> </head> <body> <p id="test1">문자열1</p> <p class="test3">문자열2</p> <div id="test2">문자열3</div> <div class="test3">문자열4</div> </body> </html>
(3)기본 선택자 조합
①선택자1, 선택자2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function(){ //$("div").css("background-color","yellow"); //$("p").css("background-color","yellow"); $("div,p").css("background-color","yellow"); //$("#a1").css("color","red"); //$("#a2").css("color","red"); $("#a1,#a2").css("color","red") }) </script> </head> <body> <div id="a1">div 2</div> <div>div2</div> <p id="a2">p 1</p> <p>p 2</p> </body> </html>
②선택자1 > 선택자2 / 선택자1 선택자2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function(){ $("#a1 > h1").css("background-color","yellow") //태그의 하위 태그 $("#a1 h1").css("background-color", "yellow"); //태그 내부의 모든태그 }) </script> </head> <body> <div id="a1"> <h1>자식 태그 h1</h1> <div> <h1>자손 태그 h1</h1> </div> </div> </body> </html>
③선택자1.선택자2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function(){ $("div.a1").css("background-color", "yellow"); $("div.a2").css("background-color", "red"); $("p.a1").css("background-color", "purple"); $("p.a2").css("background-color", "blue"); }); </script> </head> <body> <div class="a1">div a1</div> <div class="a2">div a2</div> <p class="a1">p a1</p> <p class="a2">p a2</p> </body> </html>
④선택자1 + 선택자2 / 선택자1 ~ 선택자2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function(){ $("#a1 + div").css("background-color","yellow") //$("#a1 ~ div").css("background-color","orange") }) </script> </head> <body> <p>p 태그</p> <p>p 태그</p> <p>p 태그</p> <p id="a1">p 태그</p> <div>div 태그1</div> <p>p 태그</p> <p>p 태그</p> <p>p 태그</p> <div>div 태그2</div> <p>p 태그</p> <div>div 태그3</div> <p>p 태그</p> <p>p 태그</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function(){ //$("#a1 + div").css("background-color","yellow") $("#a1 ~ div").css("background-color","orange") }) </script> </head> <body> <p>p 태그</p> <p>p 태그</p> <p>p 태그</p> <p id="a1">p 태그</p> <div>div 태그1</div> <p>p 태그</p> <p>p 태그</p> <p>p 태그</p> <div>div 태그2</div> <p>p 태그</p> <div>div 태그3</div> <p>p 태그</p> <p>p 태그</p> </body> </html>
2. 순서필터 선택자
①first
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function(){ $("p:first").css("background-color", "yellow"); $("p:first-child").css("color", "orange"); $("p:first-of-type").css("font-size", "30px"); }); </script> </head> <body> <p>태그</p> <hr/> <div> <p>div 안의 p태그</p> <p>div 안의 p태그</p> <p>div 안의 p태그</p> </div> <hr/> <div> <div>div 안의 div태그</div> <p>div 안의 p태그</p> <p>div 안의 p태그</p> </div> </body> </html>
②last
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function(){ $("p:last").css("background-color", "yellow"); $("p:last-child").css("color", "orange"); $("p:last-of-type").css("font-size", "30px"); }); </script> </head> <body> <p>태그</p> <hr/> <div> <p>div 안의 p태그</p> <p>div 안의 p태그</p> <p>div 안의 p태그</p> </div> <hr/> <div> <div>div 안의 div태그</div> <p>div 안의 p태그</p> <p>div 안의 p태그</p> </div> </body> </html>
③:odd / :even
0부터 index시작!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function(){ $("p:odd").css("background-color","yellow"); $("p:even").css("background-color","red"); }) </script> </head> <body> <p>p 태그</p> <p>p 태그</p> <p>p 태그</p> <p>p 태그</p> <p>p 태그</p> <p>p 태그</p> <p>p 태그</p> <p>p 태그</p> <p>p 태그</p> </body> </html>
④:only-child / :only-of-type
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function(){ $("p:only-child").css("background-color","yellow"); $("p:only-of-type").css("color","orange"); }) </script> </head> <body> <div> <p>p 태그</p> <p>p 태그</p> </div> <hr/> <div> <p>p 태그</p> </div> <hr/> <div> <p>p 태그</p> <div>div 태그</div> </div> <hr/> </body> </html>
3. 인덱스 선택자
①:eq / :nth-child / :nth-of-tyle
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function(){ $("p:eq(3)").css("background-color", "yellow"); $("p:nth-child(1)").css("color", "orange"); $("p:nth-of-type(1)").css("font-style", "italic"); }) </script> </head> <body> <div> <p>p 태그</p> <p>p 태그</p> <p>p 태그</p> </div> <hr/> <div> <p>p 태그</p> <p>p 태그</p> <p>p 태그</p> </div> <hr/> <div> <div>div 태그</div> <p>p 태그</p> <p>p 태그</p> </div> </body> </html>
②:not
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function(){ $("p:not(.a1)").css("background-color", "yellow"); }); </script> </head> <body> <p>p 태그</p> <p class="a1">p태그 a1 class</p> <p class="a2">p태그 a2 class</p> </body> </html>
4.속성 선택자
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function(){ $("p[title]").css("background-color", "yellow"); $("p[title = 'aaa1']").css("color", "orange"); $("p[title != 'aaa1']").css("color", "red"); }); </script> </head> <body> <p>속성이 없는 p태그</p> <p title="aaa1">title이 aaa1인 p태그</p> <p title="aaa2">title이 aaa2인 p태그</p> </body> </html>
5. 과제
2) 학습내용 중 어려웠던 점
-child 와 -of-type 의 차이를 이해하기 어려웠다
3) 해결방법
-child와 -of-type는 영역내에서 선택자에 해당하는 태그를 설정하는데 -child는 다른 태그가 있으면 선택되지 않는 차이가 있다는 것을 강의를 들으면서 알게되었다.
4) 학습소감
선택자 종류가 너무 많아서 각각 어떻게 다른지 이해하는데 시간이 좀 걸릴 것 같다.
