[jQuery] 03. 추가적인 선택자

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

<h3>* 자손선택자(>)와 후손선택자( )</h3>

<div style="border: 1px solid black;">
  <ul>자손1
    <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>
  $(function(){
    $("div>h3").css("color", "darkblue");
    $("div h3").css("backgroundColor", "wheat");

    //$("li>h3")
    //$("ul h3")
    $("ul>li>h3").css("color", "white");

    $("ul>.ch").css("backgroundColor", "yellow");
    $("li.ch").css("color", "pink");
  })
</script>

결과물

 

---

속성선택자

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

<script>
  $(function(){

    $("input[class]").css("backgroundColor", "red");

    $("input[type=text]").val("change value");
    $("input[class~=test]").val("1234");
    // .val() : value 속성과 관련된 기능 수행

    $("input[type^=ra]").attr("checked", true);
    $("input[type$=box]").attr("checked", true);
    // .attr() : 그 외의 속성들과 관련된 기능 수행

    //$("input[class*=st2]").css("width", "100px");
    //$("input[class*=st2]").css("height", "100px");
    //$("input[class*=st2]").val("버튼");
    // => 한줄로 이어서 작성 가능
    $("input[class*=st2]").css("width", "100px").css("height", "100px").val("버튼");

  })
</script>

---

입력양식 선택자 (input태그의 type속성에 따라서도 요소선택)

• $(:선택하고자하는입력양식).변경속성("", "");
• $(:선택하고자하는입력양식).변경속성({"" : "", "" : ""});

<script>
  $(function(){
    $(":text").css("backgroundColor", "red");

    //$(":button").css("width", "100px").css("height", "100px").val("왕버튼");
    $(":button").css({width:"100px", height:"100px"}).val("왕버튼");

    $(":checkbox").attr("checked", true);

    // 첨부파일 : 배경색을 연두색으로
    $(":file").css("backgroundColor", "yellowgreen");

    // 비밀번호 : 배경색을 노란색으로
    $(":password").css("backgroundColor", "yellow");

    // 라디오버튼 : checked속성추가, 가로길이50px, 세로길이50px
    $(":radio").attr("checked", true).css({width:"30px", height:"30px"});

    // 초기화버튼 : 배경색을 파란색, 글자색을 흰색, 테두리 없애기
    $(":reset").css({
      backgroundColor:"blue",
      color:"white",
      border:"none"
    });

    // 제출버튼 : 클릭시 alert("ㅋㅋ") 실행되도록
    $(":submit").click(function(){
      //alert("ㅋㅋㅋㅋ");
      alert($(":password").val());
      //alert($(":text").eq(1).val());
    });

    // mouseenter : 선택된 요소의 경계 내부로 마우스가 들어가는 순간 발생하는 이벤트
    $(":submit").mouseenter(function(){
      $(this).css("backgroundColor", "purple");
    });

    // mouseout : 선택된 요소의 경계 외부로 마우스가 나갔을 때 발생하는 이벤트
    $(":submit").mouseout(function(){
      $(this).css("backgroundColor", "");
    });

  })
</script>