jQuery 선택자 총 집합 - 공부하면서 계속 업데이트 예정

아침햇살에 양갱이. 근데 햇살이 느껴지지 않음.

<script>
  $(function(){
  	
    //1. $("#ID명") : html 태그의 ID를 선택한다.
  	var item1 = $("#txt").val();
    
    //2. $(".클래스명")  : html 태그의 클래스를 선택한다.
  	var item2 = $(".hide").val();
  
  	//3. 태그의 속성값을 알고 싶다. (GET)
    var attr = $("#txt").attr("type");
    
    //4. 태그에 속성값을 입히고 싶다. (SET)
    $("#txt").attr("type", "값")
    
    //5. 특정 HTML 영역의 HTML 값을 알고 싶을 때.
    $("#div3").html();
    
    //6. 특정 HTML 영역의 HTML 값을 입히고 싶을 때.
    $("#div3").html("<h1> Hello </h1>");
    
    //7. HTML 코드 자체를 알고 싶을 때.
    $("#div4").text();
    
    //8. HTML 코드 자체를 화면 출력하고자 할 때.
    $("#div4").text("<h1> Hello </h1>");
  });
</script>

 

특정 위치에 태그를 삽입할 땐.

<script>
  $(function(){
  //특정 위치에 삽입 : before(), after(), perpend(), append()
  var elem = '<div><h1> 삽입된 레이아웃 </h1></div>';
  $("#layer1").after(elem);
  $("#layer3").before(elem);
  $("#layer2").prepend(elem);
  $("#layer2").append(elem);

  });
</script>

 

여러가지 종류의 Selector(선택자)

<script>
  $(function(){
    /*
    class : $(".xxx")
    ID : $("#.xxx");
    name : $("input[name=xxx]")
    class : $("input[class=xxx]") tag[속성키=속성값]
    $("div:eq(0)") = $("div").eq(0)
    */
    var txt1 = $(".text1").val();
    var txt2 = $("input[class=text2]").val();

    var txt3 = $("input[name=text1]").val();
    var txt4 = $("input[name=text2]").val();

    var checkedRadio = $("input[name=rdo]:checked").val();
    console.log(checkedRadio);

    //h2 클래스에서 첫번째 html 태그만 리턴됨.
    console.log($(".h2class").html());

    //eq(n) n번째 html 태그 값을 가져옴. 
    console.log($(".h2class:eq(1)").html());
  });
</script>
		

 

CSS 선택자

<style>
  .sample1{
    color:yellow;
    font-weight:bold;
  }

  .sample2{
    color:orange;
    font-weight:bold;
  }
</style>

<script>
  $(function(){
    //css()
    /*$("div:eq(0)").css("color", "red");
    $("div:eq(0)").css("font-weight", "bold");
    $("div:eq(1)").css("color", "blue");
    $("div:eq(1)").attr("style", "color:green; font-weight:bold;");*/

    //addClass() : 클래스명을 지정된 셀렉터에 추가한다. 
    //removeClass() : 클래스명을 지정된 셀렉터에 지운다. 
    //hasClass() : 클래스명이 지정된 셀렉터로부터 존재하는지 여부를 판단한다.(true/false)
    $("#divid1").addClass("sample1");
    $("#divid2").addClass("sample2");
    $("#divid2").removeClass("sample2");
    var isHas = $("#divid2").hasClass("sample2");
    console.log(isHas);

    if( $("#divid1").hasClass("sample1")) {
    console.log("divid has sample1 : ", isHas);
    $("#divid1").removeClass("sample1");
    }
  });
  </script>