3/22(월)FrontEnd/jQuery(2)

2. 기본 선택자

2) 태그 선택자

표현법 : $("태그").css("color","blue);

    <script>
        $(document).ready(function(){
            // 순수 자바스크립트 방식 --> document.getElementsByTagName("태그명") => 배열
            var p = document.getElementsByTagName("p"); // [p, p, ...] 배열
            
            // p.style.color = "red"; 안 먹힘, 배열에 style 요소 없음 
            for(var i=0; i<p.length; i++){
                p[i].style.color = "red";
            }

            // jQuery 방식 --> $("태그명")
            $("h5").css("color", "blue");

            // 여러 종류의 태그들을 동시에 선택하는 것도 가능
            $("p, h5, #id1").css("backgroundColor", "yellow");

        })
    </script>

3) 클래스 선택자

: 특정한 클래스 속성을 가진 요소들 선택하고자 할 때 사용
표현법 : $("클래스").css("color","blue);

    <h1 class="item">Class1</h1>
   <h1 class="item select">Class2</h1>
   <h1 class="item select">Class3</h1>

   <script>
       $(document).ready(function(){
           // 순수 자바스크립트 방식 --> document.getElementsByClassName("클래스명")
           var items = document.getElementsByClassName("item"); // [h1, h1, h1 ...]
           for(var i=0; i<items.length; i++){
               items[i].style.color = "orange"; // 스타일 바꾸기

               items[i].onclick = function(){ // 클릭 이벤트 만들기
                   console.log("클릭됨");
               }
           }

           $(".select").css("backgroundColor", "pink");
           $(".select").click(function(){
               alert("클릭됨!");
           })
           // .click() 메소드 : 클릭이벤트와 관련된 기능 수행

           // 자바스크립트방식의 이벤트연결 
           // 선택된요소.onclick(on이벤트) = funciton(){ }; 함수대입해야함

           // jQuery 방식의 이벤트연결
           // 선택된요소.이벤트명(function(){ });
       })
   </script>

3. 기타 선택자

1) 자손 선택자(>)와 후손선택자( )

    <div style = "border : 1px solid lightgray"> 조상
        <ul>
            <li>div의 후손이면서 ul의 자손1</li>
            <li>div의 후손이면서 ul의 자손2</li>
            <li class="ch">div의 후손이면서 ul의 자손3</li>
            <li class="ch">div의 후손이면서 ul의 자손4</li>
            <li>
                <h3>div/ul의 후손이면서 li의 자손</h3>
            </li>
        </ul>
        <h3>자손2</h3>
        <h3 class="ch">자손3</h3>
    </div>

    <script>
        $(document).ready(function(){
            $("div>h3").css("color","violet");

            $("div h3").css("backgroundColor","lightblue");

            //$("ul h3")
            //$("li>h3")
            $("div>ul h3").css("color","red"); // div의 ul의 후손이면서 h3요소 선택

            $("ul>.ch").css("backgroundColor", "yellow"); // ul의 자손인 클래스가 ch인 요소 선택
            // 또는
            $("li.ch").css("color","pink"); // li요소 중 클래스가 ch인 요소선택
        })
    </script>

2) 속성 선택자

• 선택자[속성] : 특정 속성을 가지고 있는 모든 요소 선택
  
• 선택자[속성=속성값] : 속성 안의 값이 특정값과 "일치"하는 모든 요소 선택
  
• 선택자[속성~=속성값] : 속성안의 값에 특정값을 "단어로써 포함"하는 모든 요소 선택
  
• 선택자[속성*=속성값] : 속성안의 값에 특정값을 "포함"하는 모든 요소 선택
  
• 선택자[속성^=속성값] : 속성안의 값이 특정값으로 "시작"하는 모든 요소 선택
  
• 선택자[속성$=속성값] : 속성안의 값이 특정값으로 "끝"나는 모든 요소 선택