jQuery 선택자

jQuery라이브러리에서 가장 중요한 부분이다. 
HTML문서에서 엘리먼트를 조작하기 위해서 반드시 선행되어야 하는 작업은 조작 대상이 되는 엘리먼트를 선택하는 작업이다. 
모든 jQuery 작업의 시작은 $(select)함수로부터 시작한다. 

기본선택자 

• *, #id, .class , tag 등이 있다. 
• 아이디 선택자 
  • $("#page-title").css("color", "red");
    
• 클래스 선택자
  • $(".col").css("border","1px solid black");
    
• 태그 선택자
  • $("h3").css("color",'green');

기본 필터 선택자 

• :first, :last, :even, :odd 등이 있다.
• 선택자가 2개 있는 것이다.  
  • :first는 선택된 엘리먼트 중에서 첫번째 엘리먼트를 선택한다.
    :last는 선택된 엘리먼트 중에서 마지막번째 엘리먼트를 선택한다.
    :even는 선택된 엘리먼트 중에서 짝수번째 엘리먼트를 선택한다.
    :add는 선택된 엘리먼트 중에서 홀수번째 엘리먼트를 선택한다.
• $(".col:first").css("background-color","yellow");
  • class가 이고 첫번째 선택자 
• $(".col:last").css("background-color","lightgray");
  • class가 col이고 마지막 선택자
• $("#box-filter p:even").css('color','red');
  • 0번째, 2번째, 4번째 p 엘리먼트가 선택된다. 

자식, 자손, 형제 선택자 선택자 

• 선택자 > 선택자, 선택자 선택자, 선택자 ~ 선택자
• 자식, 자손, 형제 엘리먼트
  자식 엘리먼트는 DOM tree에서 바로 아래에 위치하고 있는 엘리먼트를 말한다.
  자손 엘리먼트는 DOM tree에서 아래에 위치하고 있는 엘리먼트를 말한다. 
  형제 엘리먼트는 DOM tree에서 부모 엘리먼트가 서로 같은 엘리먼트를 말한다.
  • $("#box-child > p").css('color', 'red');
  • $("#box-child p").css("text-decoration",'underline');
  • $("#box-child h4 + p").css('background-color','yellow');
    • h4엘리먼트 바로 다음에 위치하고 있는 p엘리먼트
  • $("#box-child h4 ~ p").css('border','1px solid red')
    • h4엘리먼트 다음에 위치하고 있는 모든 p엘리먼트

자식 필터 선택자

• :first-child, :last-child, nth-child(no) 등이 있다
• $("li:first-child").css("background-color","yellow");
  //li중에서 첫째인 애를 찾음
• $("li:last-child").css("background-color","lightgray");
  //li중에서 막내인 애를 찾음
• $("li:nth-child(2)").css("background-color","lightgreen");
  //위의 엘리먼트는 0부터 시작이지만, 자식은 1번부터 시작함, 둘째인 애들부터 찾음

순서 필터 선택자

• :eq(n), :gt(n) :lt(n) 등이 있다.
• 해당엘리먼트의 숫자를 골라낼 수 있다.
  • $("#box-content p:eq(0)").css("color","red");
  • $("#box-content p:eq(1)").css("color","blue");
  • $("#box-content p:eq(2)").css("color","green");
  • $("#box-content p:gt(3)").css("border","1px solid red");
    //gt는 크다. 3번째 다음의 숫자들을 모두 선택한다.
  • $("#box-content p:lt(3)").css("border","1px solid blue");
    //lt는 작다. 3번째 아래의 숫자들을 모두 선택한다.

기타 필터 선택자

• :has(선택자), :contains(텍스트), :not(선택자) 등이 있다.
• :has 가지고 있는 선택자
• :contains 텍스트가 해당하는 부분
• :not    == !:has 
  • $("#box-filter-3 p:has('span.text-danger')").css("border","1px solid red")
    //선택자를 가지고 있어야한다. $("#box-filter-3 p:eq(2)")
    //$("#box-filter-3 div p:gt(1)").css("border","1px solid red");
  • $("#box-filter-3 div p:not(':has(span)')").css("color","green");
    //span을 갖고 있지 않은 것 
    
  • $("#box-filter-3 div p:contains('무료')").css("background-color",'yellow');
    //무료라는 글자가 들어간걸 찾고싶을 때 

속성 선택자 

• 브라켓으로 감싸서 사용한다. 
• src를 갖고 있는 경우 많이 사용한다.
• <input type="date" name="birth" /> 
  • $('[type="date"]')사용한다. 

폼 선택자 

• css 존재하지 않고, 편하게 사용하도록 제공하는 script의 select 함수이다. 
  • 입력필드 (텍스트 필드, 비밀번호필드, 날짜필드, 숫자필드, 첨부파일필드, 히든 필드)에 입력된 값 조회하기 
    • var 입력값 = $(선택자).val()
  • 값 입력하기 
    • $(선택자).val('값');
  • var username = $("input[name=username]").val();
    //<input type="text" name="username" id="user-name">
  • var email = $("input[name=email]").val();
    //<input type="email" name="email" id="user-email">
  • var password = $("input[name=password]").val();
    //<input type="password" name="password" id="user-password">
  • var password1 = $("#user-password").val();
    //name이나 id로 값을 가져오는건 가져올 수 있다면 어떤 방법이던지 상관없음
• textarea에 입력된 값 조회하기 
  • var 입력값 = $(선택자).val()
• 값 입력하기 
  • $(선택자).val('값')
  • var profile = $("#user-profile").val();
    //<textarea name="profile" id="user-prifile"></textarea>
• select박스에서 선택된 항목의 값 조회하기 
  • var 입력값 = $(선택자).val()
  • var career = $('[name=career]').val(); //<select name="career" id="user-career">
• 값 입력하기 
  • $(선택자).val('값')
• radio버튼의 값 조회하기 
  • var 입력값 = $(선택자:checked).val()
  • var jobType = $(":radio[name='jobType']:checked").val();
• checkbox, radio button체크하기 
  • $(선택자).prop('checked', true);
• checkbox, radio button해제하기
  • $(선택자).prop('checked', false);
• checked박스는 여러개가 선택되어있기 때문에 잘 선택해서 사용하면 된다. 
• checked박스는 배열로 정의되어 있어서 for문을 통해서 꺼내고 사용하면 된다
  • for(var b in x){console.log(x[b])};
•  체크박스와 셀렉트 박스외에는 값을 val로 선택할 수 있고, 라디오박스와 체크박스는 prop으로 checked를 true와 false로 선택할 수 있다. 
• 값을 읽어오기전에는 $(선택자:checked)선택한 부분을 확인하고 선택된 부분을 val()속성을 읽어오는 메소드로 확인할 수 있다.