7월 26일_JQuery(요소, 필터, 탐색 선택자, 배열 메서드 등등)

# 부모요소 & 자식요소

    $(document).ready(function(){
      // 첫번째 & 마지막 span 요소
      $("#m1 > span:first-child").css("border", "2px solid red");
      $("#m1 > span:last-child").css("border", "2px solid green");
      // span 요소 중에서 첫번째 & 마지막
      $("#m2 > span:first-of-type").css("border", "2px solid blue");
      $("#m2 > span:last-of-type").css("border", "2px solid magenta");
      // 요소를 index로 찾기
      $("#m3 > span:nth-child(2)").css("border", "2px solid cyan");

    });

 

# form 필터 선택자

    $(document).ready(function(){
      $("input:text").css("background","red");
      $("input:password").css("background","green");
      $("button").css("background", "blue").css("color", "white");
      $("option:selected").css("background", "cyan");
      $("input:checked + label").css("background","magenta");
      //$("#css").prop("checked", false); //체크 박스의 선택표시 해제
      $("#css").prop("checked", true);  // 체크박스의 선택표시 유지
      $("textarea:disabled").css("background","yellow");
      $("input").focus(function() {
        $(this).css("background","blue");
      }).blur(function(){
        $(this).css("background", "black");
      });
    });

 

# 탐색 선택자

    $(document).ready(function () {
      // 자녀 요소
      $("#m1").children().css("border", "2px solid red");
      // 부모 요소
      $("#m1").parent().css("border", "2px solid green");
      // 자녀의 자녀 요소
      $("#m2").children().children("span").css("border", "2px solid blue");
      // 형제 요소
      $("#m1").siblings().css("border", "2px solid magenta");
      $("#m2").next().css("background", "cyan");
      $("#m5 > span").filter(".m").css("background", "yellow");
    });

 

# 배열 매서드 each

    let city = ["Seoul", "DaeGu", "GwangJu", "DaeJeon"];
    
    $.each(city, function(index, value){
      console.log(index + "; " + value);
    });

    // 위의 each 문을 for 문으로 썼을 때
    for (let i = 0; i < city.length; i++) {
      console.log(i + "; " + city[i]);
    };

    // key, key값으로 배열 선언 -  출력
    let subjectInfo = {
      subject: "html",
      grad: 1,
      days: 20
    };

    $.each(subjectInfo, function(key,value){
      console.log(key + " : " + value);
    });