7월 24일_JQuery(기본선택자, 효과, 애니메이션, 속성선택자 등)

# 기본 선택자

<script>
    $(document).ready(function() {
      $("p").css("border", "3px solid red");
      $("#gnb").css ("border", "3px solid orange");
      $(".logo").css ("background", "green");
      $(".logo").css ("color", "white");
      $("#gnb > ul > li > ul > li").css ("border", "3px solid blue"); //하위선택자
      $("#visual + #content").css ("border", "3px solid pink"); 
      $(".logo + .util").css ("border", "3px solid magenta"); //인접선택자
      $("#visual ~ #content").css ("background", "cyan"); //형제선택자
      $("div.util").css ("background", "violet"); //종속선택자
      $(".left, .right, #banner").css ("background", "gray"); //그룹선택자
      $("*").css ("font-size", "25px").css("font-weight", "bold"); //속성 여러개 지정
    });
  </script>

 

# click

      $("#click").click(function(){
        $(this).hide();
      });


      $("#dbclick").dblclick(function(){
        $(this).hide();
      });

 

# mouse

$("#p1").mouseenter(function(){
         alert("마우스 mouseenter 작동");
       });
       
 $("#p2").mouseleave(function(){
        alert("마우스 mouseleave 떠남");
       });
       
 $("#p3").mousedown(function(){
        alert("Mouse down over!!")
      });

 

# click - show & hide

$("#hide").click(function(){
        $("#p4").hide(1000);
      });

$("#show").click(function(){
        $("#p4").show(2000);
      });

 

# toggle

      $("#toggle").click(function(){
        $("#p5").toggle(1000);
      })

 

# fade in & fade out & fade Toggle

  <script>
    $(document).ready(function(){
      $("#b1").click(function(){
        $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeIn(3000);
      });

      $("#b2").click(function(){
        $("#div1").fadeOut();
        $("#div2").fadeOut("slow");
        $("#div3").fadeOut(1500);
      });

      $("#b3").click(function(){
        $("#div1").fadeToggle(1500);
        $("#div2").fadeToggle("fast");
        $("#div3").fadeToggle(1500);
      });
    });
  </script>

 

# slide down & up & slidetoggle

  <script>
    $(document).ready(function(){
      $("#id1").click(function(){
        $("#id2").slideDown("slow");
      });
      $("#id2").click(function(){
        $("#id2").slideUp("slow");
      });
      $("#id1").click(function(){
        $("#id2").slideToggle("slow");
      });
    });
  </script>

 

# 드롭다운

<script>
    //문서가 완전히 로드되었을 때 실행되는 함수
    $(document).ready(function(){
      //네비게이션 바의 메뉴항목을 클릭했을 때 실행되는 함수 정의
      $("nav > ul > li > a").click(function(){
        //클릭된 메뉴 항목에 active 클래스를 토글(추가,제거)
        $(this).toggleClass("active");
        //클릭된 메뉴 항목의 다음에 오는 드롭다운 메뉴를 슬라이드로 토글
        $(this).next(".dropdown-menu").slideToggle();
      });
    });
  </script>

 

# 애니메이션

<script>
    $(document).ready(function(){
      $("#b1").click(function(){
        $("#d1").animate({left:"500px"});
      });

      $("#b2").click(function(){
        $("#d1").animate({left:"0px"});
      });


      $("#b3").click(function(){
        $("#d1").animate({left:"500px"}, 1000, function(){
          $(this).animate({left: "0px"}, 1000)
        });
      });

      $("#b4").click(function(){
        $("#d1").animate({left:"500px"}, 1000).animate({left: "0px"},1000);
      });

      $("#b5").click(function(){
        $("#d2").animate({
          width: "200px",
          height: "200px",
          opacity: "0.8",
          left: "500px",
        });
        $("#d2").css("background", "red");
      });
    });
  </script>

 

<script>
    $(document).ready(function(){
      $("#b1").click(function(){
        $("#d1").animate({
          height: "show"
        });
      });

      $("#b2").click(function(){
        $("#d1").animate({
          height: "hide"
        });
      });

      $("#b3").click(function(){
        $("#d1").animate({
          height: "toggle"
        });
      });

      $("#b4").click(function(){
        let div = $("#d1");
        div.animate({left: "100px"}, "slow");
        div.animate({fontSize: "1.5em"},"slow");
      });
    });
  </script>

 

# 속성 선택자

<script>
    $(document).ready(function (){
      // list_1 똑같은 것
      $(".list1 > li[class = 'list_1']").css("border", "2px solid red");
      // list_1 아닌 것
      $(".list1 > li[class != 'list_1']").css("border", "2px solid green");
      // list2에서 list 단어가 포함된 모든 것
      $(".list2 > li[class *= 'list']").css("border", "2px solid blue");
      // bg로 끝나는 요소
      $(".list3 > li[class $= 'bg']").css("border", "2px solid magenta");
      // list로 시작하는 요소(띄어쓰기 포함)
      $(".list4 > li[class ^= 'list']").css("border", "2px solid orange");
      // list 로 시작하는 요소를 선택(띄어쓰기 포함안함,언더바도 안됨)
      $(".list3 > li[class |= 'list']").css("border", "2px solid yellow");
      
    });
  </script>

 

# text / html / value

  <script>
    $(document).ready(function (){

      $("#b1").click(function(){
        alert ("TEXT: " + $("#text1").text());
      });
      $("#b2").click(function(){
        alert ("HTML: " + $("#text1").html());
      });

      $("#b3").click(function(){
        alert ("VALUE: " + $("#text3").val());
      });

      $("#b4").click(function(){
        $("#text2").text("오늘은 피곤한 날 입니다.");
      });

      $("#b5").click(function(){
        $("#text2").html("오늘은 <b>폭염</b> 입니다.");
      });

      $("#b6").click(function(){
        $("#text3").val("Donald Duck");
      });
      
    });
  </script>