ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • jQuery:선택자,ready(),val(),setTimeout(),each()_210409(금)
      JAVASCRIPT 2021. 7. 22. 00:58

      jQuery 선택자

      1
      2
      3
      4
      5
      $('h1').css('color','red');//태그선택자
      $('#ss').css('color','red');//아이디선택자
      $('.cc').css('color','red');//클래스선택자
       
      *//전체선택자
      		 cs

       window.onload = function(){}

          $(document).ready(function(){})//window.onload와 동일한 역할

          $(function(){})//window.onload와 동일한 역할

      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='external.js'></script> -->
      <script src=" https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script>
         
       
          $(document).ready(function() {
              document.write('<h1>1st Ready</h1>')
          })
          $(document).ready(function() {
              document.write('<h1>2nd Ready</h1>')
          })
          $(document).ready(function() {
              document.write('<h1>3rd Ready</h1>')
          })
      </script>
       
      </head>
      <body>
       
      </body>
      </html>
      		 cs

      val = value, []: 속성선택

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Insert title here</title>
      <script src=" https://code.jquery.com/jquery-3.2.1.min.js"></script>
       
      <script>
          $(function() {
              $('input[type = "text"]').val("Hello jQuery...")
              
          })
      </script>
      </head>
      <body>
          <input type="text" />
          <input type="password" />
          <input type="radio" />
          <input type="checkbox" />
          <input type="file" />
      </body>
      </html>
      		 cs

      setTimeout() : 지정된 시간마다 해당 함수 반복 실행

      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
      <!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() {
            
              setTimeout(function() {
                  var value = $('select > option:selected').val();
                  document.write('<h3>' + value + '</h3>')
              }, 3000);
          })
      </script>
      </head>
      <body>
          <select name="" id="">
              <option value="Apple">Apple</option>
              <option value="Bag">Bag</option>
              <option value="Cat" selected>Cat</option>
              <option value="Dog">Dog</option>
              <option value="Elephant">Elephant</option>
          </select>
      </body>
      </html>
      		 cs

      even짝수(첫번째 열이 0번이라 홀수처럼 보임), :odd홀수

      nth-child(3n+1) : 자식요소의 1번째 부터 3개씩 건너서 선택

       

      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
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Insert title here</title>
      <script src=" https://code.jquery.com/jquery-3.2.1.min.js"></script>
       
      <script>
          $(function() {
              //$('tr:even').css('background', 'orange');
              //$('tr:odd').css('background', 'green');
              //$('tr:first').css('background', 'grey').css('color', 'blue');
              $('tr:eq(0)').css('background', 'grey').css('color', 'blue');//first와 동일
              $('tr:nth-child(3n+1)').css('background', 'orange');
              $('tr:nth-child(3n+2)').css('background', 'red');//2번째 부터 3개씩 건너서 선택)
              $('tr:nth-child(3n)').css('background', 'grey');//3개씩 건너서 선택)
          })
      </script>
      </head>
      <body>
          <table border=1>
              <tr>
                  <td>이름</td>
                  <td>혈액형</td>
                  <td>지역</td>
              </tr>
              <tr>
                  <td>홍길동</td>
                  <td>A</td>
                  <td>인천광역시 송도</td>
              </tr>
              <tr>
                  <td>홍길자</td>
                  <td>AB</td>
                  <td>서울 구로구</td>
              </tr>
              <tr>
                  <td>홍길순</td>
                  <td>O</td>
                  <td>강남</td>
              </tr>
              <tr>
                  <td>소향</td>
                  <td>B</td>
                  <td>마포</td>
              </tr>
              <tr>
                  <td>홍자</td>
                  <td>A</td>
                  <td>영등포</td>
              </tr>
          </table>
      </body>
      </html>
      		 cs

      each() : 배열을 받아 for 문 실행

      index = []배열의 인덱스

      item = 배열을 each 문으로 꺼낼 때 하나의 객체

      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
      <!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() {
              var array = [ {
                  name : 'google',
                  link : 'http://www.google.co.kr'
              }, {
                  name : 'daum',
                  link : 'http://www.daum.net'
              }, {
                  name : 'Amazon',
                  link : 'http://www.amazon.com'
              }, {
                  name : 'Naver',
                  link : 'http://www.naver.com'
              },
       
              ];
       
              $.each(array, function(index, item) {
                  var output = '';
       
                  output += '<a href="' + item.link + '">';//<a href ="http://www~"
                  output += '<h3>' + item.name + '</h3>';//<h3>google</h3>
       
                  document.body.innerHTML += output;
              }); 
          })
      </script>
      </head>
      <body>
       
      </body>
      </html>
      		 cs

       

      'JAVASCRIPT' 카테고리의 다른 글

      event.target,input.file,FileAPI_210603(목)  (0) 2021.07.25
      체인코드,jQuery: filter,addclass등 함수_210412(월)  (0) 2021.07.22
      이벤트,예외처리_210409(금)  (0) 2021.07.22
      배열,객체,BOM,DOM_210408(목)  (0) 2021.07.22
      해지구달&랜덤영어날라다니기 실습_210409(금)  (0) 2021.07.22

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바