개발자 창고

//기타

  // body에 해당하는 html삽입.   
  $("<div><p>Hello</p></div>").appendTo("body")  
 

// 객체접근관련:

  // P태그
  $("p").css("border","9px solid red");
 
  // P태그 안에 들어있는 DIV태그
  $("p>div").css("color","#ff0000");
   
  // myDiv라는 ID를 가진 객체
  $("#myDiv").css("border","3px solid red");
 
  // 해당 클래스의 값을 바꿈
  $(".myClass").css("border","3px solid red");  

  // Class이름이 class="myClass myOtherClass" 인것..
  $(".myClass.myOtherClass").css("border","3px solid red");

  // myClass 안에 들어있는 myOtherClass 클래스
  $(".myClass > .myOtherClass").css("border","3px solid red");
 
  // 모든 객체
  $("*").css("border","3px solid blue");
 
  // div , span, P태그 안에있는 myClass 클래스
  $("div,span,p.myClass").css("border","3px solid red");

// Hierarchy :

  // label태그 뒤에 처음으로 나오는 태그가 input일경우 input의 속성
  $("label + input").css("color", "blue").val("Labeled!");
 
  // id값이 prev뒤에 있는 div태그에 모두 적용
  $("#prev ~ div").css("border", "3px groove blue");

// Basic Filters:

  // 처음으로 등장하는 tr태그
  $("tr:first").css("font-style", "italic");
 
  // 마지막으로 등장하는 tr태그
  $("tr:last").css("font-style", "italic");

  // input의 체크상태가 아니면 뒤에나오는 span의 배경색을 변경
  // example: :not(div a) and :not(div,a).
  $("input:not(:checked) + span").css("background-color", "yellow");  

  // input의 상태를 disabled로 변경
    $("input").attr("disabled", "disabled");

  //tr의 반복행의 색을 변경(even or odd)
    $("tr:even").css("background-color", "#bbbbff");
    $("tr:odd").css("background-color", "#bbbbff");
 
  // index 3에 해당하는 td
  $("td:eq(3)").css("color", "red");

  // 뒤에서 4개의 td  
  $("td:gt(4)").css("text-decoration", "line-through");
 
  // 앞에서 4개의 td
  $("td:lt(4)").css("color", "red");

  // header에 해당하는 태그 h?
  $(":header").css({ background:'#CCC', color:'blue' });
 
 
  // #rund에 클릭이벤트를 부여
  // toggleClass : 클래스를 토글형태로
  $("#run").click(function(){
      $("div:animated").toggleClass("colored");
    });   
    function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
    }
    animateIt();
   

//Content Filters:

  // div태그 안에 John라는 단어가 있으면 적용   
    $("div:contains('John')").css("text-decoration", "underline");
   
  // td안에 값이 없으면 Was empty! 라는 문장을 넣어주고 적용
    $("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');

  // td안에 값이 있으면 fadeTo라는 효과를좀... 색이 변함
  $("td:parent").fadeTo(1500, 0.3);
 
  // div안에있는 p태그에 test라는 클래스를 부여
  $("div:has(p)").addClass("test");    

//Visibility Filters:

  // hidden속성의 객체를 보여준다.
$("div:hidden").show(3000);

  // visible된 객체를 가져온다.
$("div:visible").click(function () {
      $(this).css("background", "yellow");
    });