ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 체인코드,jQuery: filter,addclass등 함수_210412(월)
      JAVASCRIPT 2021. 7. 22. 22:11

      체인코드

      1. ().().().(). 점으로 이어진 코드

      2. 메서드를 가진 객체가 반환값으로, 이어지는 코드이다.

      filter() 로 선택하기

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      js ver.
          //DOM의 선택과 탐색
          $(function() {
              // 1. filter():
              //$(selector).filter(selector) = 첫번째: 태그에서 두번째: 지정한 속성을 가진 요소 선택
              $('h3').filter(':even').css({
                  backgroundColor : 'black',
                  color : 'white'
              })
       
              $('h3:odd').css({
                  backgroundColor : 'blue',
                  color : 'white'
              })
       
              //$(selector).filter(function(){})
              $('h3').filter(function(index) {
                  return index % 3 == 0; //function으로 index를 가져와서 3개씩 건너 가져온다.
              }).css({
                  backgroundColor : 'orange',
                  color : 'red'
              })
          })
      HTML ver.
          <h3>header - 0</h3>
          <h3>header - 1</h3>
          <h3>header - 2</h3>
          <h3>header - 3</h3>
          <h3>header - 4</h3>
          <h3>header - 5</h3>
       
      		 cs
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      js ver.
          //DOM의 선택과 탐색
          $(function() {
              //h2선택 짝수 background = orange, color = red
              //h2선택 홀수 background = orange, color = white
              //end()
              $('h2').css('background', 'orange').filter(':even').css('color', 'red')
                      .end().filter(':odd').css('color', 'white')
          })
       
          //특정위치의 문서객체 선택
          //eq(), first() = eq(0), last() = eq(-1) 뒤쪽부터 선택
          $(function() {
              $('h3').eq(0).css('background', 'orange')
              $('h3').eq(2).css('background', 'red')
              $('h3').eq(-1).css('background', 'blue')
          })
       
          //is(): is()안의 노드(속성)를 가진 요소 선택
          $(function() {
              $('h1').each(function() {//h1을 뺑뺑이 돌림
                  if ($(this).is('.select')) {
                      $(this).css('background', 'green');
                  }
              });
       
          })
      HTML ver.
          <h2>header - 0</h2>
          <h2>header - 1</h2>
          <h2>header - 2</h2>
       
          <h3>header - 0</h3>
          <h3>header - 1</h3>
          <h3>header - 2</h3>
       
          <h1 class="select">header - 0</h1>
          <h1>header - 1</h1>
          <h1 class="select">header - 2</h1>
      		 cs

      addClass(), removeClass()

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
          //addClass() 원래 클래스가 있다면 그 옆에 추가된다.
          $(function() {
              $('h1').addClass(function(index) {
                  return 'class' + index;
              })
              //removeClass() 있던 클래스 값을 지운다.
              $('h1').removeClass(function(index) {
                  return 'class' + index;
              })
          })
       
      HTML ver.
          <h1 class="item">Header - 1</h1>
          <h1 class="item select">Header - 2</h1>
          <h1 class="item">Header - 3</h1>
      		 cs

      .keyup(), val(), html(), click(), toggle()

      keyup : 키가 눌렸다가 올라오는 순간 발생하는 키보드 이벤트

      val : 해당 태그의 value 값

      click : 클릭할 때 발생하는 마우스 이벤트

      toggle : 요소를 숨기거나 보여주거나를 번갈아 실행

      hide() 와 show() 사이를 전환한다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      <script>
          //addClass() 원래 클래스가 있다면 그 옆에 추가된다.
          $(function() {
              $('textarea').keyup(function() {
                  // 남은 글자수를 확인 
                  //keyup 눌린 키가 떨어질때 마다 this.val.length가 늘어난다.
                  var inputLength = $(this).val().length;
                  var remain = 150 - inputLength;
       
                  //.html() = innerHTML() 과 동일
                  $('h1').html(remain);
       
                  //문서객체의 색상변경 remain >= 0 글자색 검정색 아니면 빨간색.
                  if (remain >= 0) {
                      $('h1').css('color', 'black');
                  } else {
                      $('h1').css('color', 'red');
                      $('p').html('글자수를 넘겼습니다.').css('color', 'red')
                  }
              })
       
              $('button').click(function() {
                  $('.page').toggle('slow');
              })
          })
      </script>
      </head>
      <body>
          <div>
              <p>안녕하세요? 반갑습니다.</p>
              <h1>150</h1>
              <textarea name="" id="" cols="70" rows="5"></textarea>
          </div>
          <button>Toggle Show</button>
          <div class="page">
              <h1>Lorem ipsum</h1>
              <p>Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry. Lorem Ipsum has been the industry's standard
                  dummy text ever since the 1500s, when an unknown printer took a
                  galley of type and scrambled it to make a type specimen book</p>
          </div>
      </body>
      		 cs

      .hover() .animate() 

      hover : 마우스를 올렸을 때 발생하는 이벤트

      $(selector).animate({params},speed,callback);

      params : 매개변수는 애니메이션을 적용할 CSS 속성을 정의.

      speed : 지속 시간을 지정. "slow", "fast" 또는 밀리초 값을 사용할 수 있다.

      callback : 애니메이션이 완료된 후 실행할 함수이다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      <style>
      div {
          width: 50px;
          height: 50px;
          background: orange;
          position: relative;
      }
      </style>
       
      <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
      <script>
          $(function() {
              $('div').hover(
                      function(){$(this).animate({left : 500}, 'slow')},//mouseEnter
                      function(){$(this).animate({left : 0}, 'slow')}//mouseLeave
              )
          })
      </script>
      </head>
      <body>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
      </body>
      </html>
      		 cs

      .mousedown() .mouseup()

      mousedown : 마우스를 누를 때 발생

      mouseup : 마우스를 땔 때 발생

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Insert title here</title>
      <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
      <script>
          function mDown(obj) {
              obj.style.background = 'red';
              obj.innerHTML = "Release Me!!!"
          }
       
          function mUp(obj) {
              obj.style.background = 'blue';
              obj.innerHTML = "Good Bye!!!"
          }
      </script>
       
      </head>
      <body>
          <div onmousedown='mDown(this)' onmouseup="mUp(this)"
              style="background: orange; width: 90px; height: 90px"></div>
          <hr>
          <div onmousedown='mDown(this)' onmouseup="mUp(this)"
              style="background: orange; width: 90px; height: 90px"></div>
      </body>
      </html>
       
      		 cs

      w3school 의 Bootstrap 적용 실습

      참조사이트(w3s) : https://www.w3schools.com/bootstrap4/default.asp

      'JAVASCRIPT' 카테고리의 다른 글

      [javascript] location.href 와 location.replace 차이점  (0) 2021.08.22
      event.target,input.file,FileAPI_210603(목)  (0) 2021.07.25
      jQuery:선택자,ready(),val(),setTimeout(),each()_210409(금)  (0) 2021.07.22
      이벤트,예외처리_210409(금)  (0) 2021.07.22
      배열,객체,BOM,DOM_210408(목)  (0) 2021.07.22

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바