7월 25일_JQuery(css 속성 적용하기, 필터 선택자 등등)

# 마우스 hover

    // 마우스 호버 기능
    $(document).ready(function(){
      $("#p1").hover(function(){
        alert("hover START");},
        function(){
          alert("hover END");
        });
    });

 

# 포커스 & 블러

// input박스 포커스 & 블러 기능
    $(document).ready(function(){
      $("input").focus(function(){
        $(this).css("background", "yellow");
      });
      $("input").blur(function(){
        $(this).css("background", "cyan");
      });
    });

 

# 값 - 결과 보여주기 (포커스 기능사용)

    // 값을 가져와 결과로 보여주기
    $(document).ready(function(){
      $("#result").focus(function(){
        let v1 = parseInt($("#v1").val());
        let v2 = parseInt($("#v2").val());
        let sum = v1 + v2;
        $("#result").val(sum);
      });
    });

 

# on 기능

    $(document).ready(function () {
      $("p").on({
        mouseenter: function () {
          $(this).css("background", "green");
        },
        mouseleave: function () {
          $(this).css("background", "blue");
        },
        click: function () {
          $(this).css("background", "red");
        }
      });
    });

 

** 같은 기능 마우스 hover로 사용할 경우

$(document).ready(function () {
      $("p").hover(
        function () {
          $(this).css("background", "green");
        },
        function () {
          $(this).css("background", "blue");
        }
      ).click(function () {
        $(this).css("background", "red");
      });
    });

 

# attr 속성 값 가져오기

  // attr = 속성 값 가져오는 기능
      $("button").click(function(){
        alert($("#daum").attr("href"));
      });

 

# append & prepend 

    $(document).ready(function(){
      // append 선택된 요소의 끝에 콘텐즈 삽입
      $("#b2").click(function(){
        $("p").append("<b>이동합니다.</b>");
      });
      
      // prepend 선택된 요소의 시작부분에 콘텐츠 삽입
      $("#b3").click(function(){
        $("p").prepend("<b>다음으로 이동합니다.</b>");
      });

 

# 여러 요소 추가하기

    function appendText() {
      let txt1 = "<p>Text.</p>";
      let txt2 = $("<p></p>").text("Text.");
      let txt3 = document.createElement("p");
      txt3.innerHTML = "Text.";
      $("body").append(txt1, txt2, txt3);
    }

 

# 리스트에 요소 추가 append & prepend

    $(document).ready(function(){
      // list 앞에 추가 prepend
      $("#b6").click(function(){
        $('ol').prepend("<li>Prepend item</li>");
      });
      // list 뒤에 추가 append
      $("#b5").click(function(){
        $('ol').append("<li>Append item</li>");
      });
    });

 

# before & after

    $(document).ready(function(){
      // 이미지 앞에 내용 삽입
      $("#b1").click(function(){
        $("img").before("<b>Before</b>");
      });

      // 이미지 뒤에 내용 삽입
      $("#b2").click(function(){
        $("img").after("<b>After</b>");
      });

    });

 

    $(document).ready(function(){
      $('li:first-child').after("<li>after : first-child</li>");
      $('li:last-child').before("<li>before : last-child</li>");
      $('li:nth-child(3)').after("<li>after : nth-child(3)</li>");
    });

 

# remove & empty

    $(document).ready(function () {
      // div 요소 전제 삭제 
      $("#b1").click(function(){
        $("#div1").remove();
      });
      // div 안에 포함된 자식 요소만 삭제
      $("#b2").click(function(){
        $("#div1").empty();
      });
    });

 

# css 클래스 적용

$(document).ready(function () {

      $("#b1").click(function(){
        $("h1, h2, p").addClass("blue");
        $("div").addClass("important");
      });

      $("#b2").click(function(){
        $("div").removeClass("important");
      });

      $("#b3").click(function(){
        $("h1, h2, p").toggleClass("blue");
        $("div").toggleClass("important");
      });

    });

 

# css 클래스 속성 가져오기

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

      $("#b1").click(function(){
        // alert("background color = " + $("p").css("background-color"));
        // alert("background color = " + $("p").eq(1).css("background-color"));
        alert("background color = " + $("p:first").css("background-color"));
      });
    });

  </script>
</body>

 

** 동일한 태그가 있을 때 태그를 배열로 만들어서 값을 가져올 수 있음  >  배열로 만들기 : $("p").eq(1)

      $("#b2").click(function(){
        $("li").eq(1).css("background-color", "yellow").css("font-weight", "bold");
        $("ul > li:eq(-2)").css("background-color", "yellow").css("font-weight", "bold");
        $("ul > li:nth-child(3)").css("background-color", "green").css("font-weight", "bold");
        $("li:eq(-2)").addClass("foo");
      });

 

** 리스트를 배열로 만들어서 css 속성 지정하기

 

# 필터 선택자

    $(document).ready(function () {
      // 짝수 행 (배열 0부터 시작)
      $("tr:even").css("background", "red");
      // 홀수 행 (배열 0부터 시작)
      $("tr:odd").css("background", "blue");
      $("tr:first").css("background", "green");
      $("tr:last").css("background", "magenta");

      $("li:eq(0)").css("background", "gold");
      // 지정한 배열 넘버보다 큰 요소에 적용
      $("li:gt(2)").css("background", "rgb(200,150,50)");
      // 지정한 배열 넘버보다 작은 요소에 적용
      $("li:lt(1)").css("background", "rgb(50,150,200)");
      // 헤더에 해당하는 태그에만 속성 지정
      $(":header").css("color", "rgb(225,30,0)");
      // li만 찾아서 .bg라는 css 클래스 속성 지정
      $("li").filter(".bg").css("background", "rgb(50,225,100)");
      // li만 찾아서 .bg가 아닌 요소에 css 클래스 속성 지정
      $("li").not(".bg").css("background", "rgb(0,100,150)");
    });