ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [jQuery] 3. 선택자(selector) - jQuery 강좌
      Web/jQuery 2015. 6. 13. 11:13

      jQuery Selectors


       jQuery 선택자(selector)는 jQuery 라이브러리의 가장 중요한 부분 중 하나입니다.





      1. jQuery Selectors
       jQuery 선택자는 HTML 요소를 선택하고 조작할 수 있게 허용합니다.

       jQuery 선택자는 요소들의 id, classes, types, attributes, attribute의 값 등을 기반으로 HTML 요소를 찾습니다.

       이것은 CSS 선택자를 기반으로 하였습니다.

       jQuery의 모든 선택자는 달러 마크와 괄호로 시작됩니다:   $()









      2. The element Selector
       jQuery 요소 선택자는 요소 이름(element name)을 기반으로 요소를 선택합니다.

       페이지 내의 모든 <p> 요소를 선택하기 위해 아래와 같이 할 수 있습니다:


      1
      $("p")
      		cs



       사용자가 버튼을 클릭할 시에, 모든 <p> 요소는 숨겨지는 예제입니다:


      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
      <!DOCTYPE html>
      <html>
          <head>
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
              <script>
              $(document).ready(function(){
                  $("button").click(function(){
                      $("p").hide();
                      $("button").text('hide!');
                  });
              });
             </script>
          </head>
          <body>
       
              <h2>This is a heading</h2>
       
              <p>This is a paragraph.</p>
              <p>This is another paragraph.</p>
       
              <button>Click me</button>
       
          </body>
      </html>
       
      		cs



       









       3. The #id Selector
        jQuery #id 선택자는 HTML 태그의 특정 요소를 찾기 위해 id 속성을 사용합니다.

        id는 페이지 내부에서 유일(unique)해야 합니다.

        특정 아이디의 요소를 찾으려면, 해시 문자(#)를 쓴 뒤, HTML 요소의 id를 따라 쓰시면 됩니다:


      1
      2
       
      $("#test")
      		cs



        사용자가 버튼을 클릭 했을 때, id가 "test"인 요소를 숨기는 예제입니다:



      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
      <!DOCTYPE html>
      <html>
          <head>
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
              <script>
              $(document).ready(function(){
                  $("button").click(function(){
                      $("#test").hide();
                      $("button").text('#test hide!');
                  });
              });
             </script>
          </head>
          <body>
       
              <h2>This is a heading</h2>
       
              <p>This is a paragraph.</p>
              <p id="test">This is another paragraph.</p>
       
              <button>Click me</button>
       
          </body>
      </html>
       
      		cs




       










       4. The .class Selector
        jQuery class 선택자는 특정 클래스의 요소를 찾습니다.

        특정 클래스의 요소를 찾기 위해서, 마침표 문자를 쓴 뒤, 클래스 명을 따라써주시면 됩니다:



      1
      2
       
      $(".test")
      		cs




        사용자가 버튼을 클릭 했을 때, 클래스가 "test" 인 요소는 숨겨지는 예제입니다:




      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      <!DOCTYPE html>
      <html>
          <head>
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
              <script>
              $(document).ready(function(){
                  $("button").click(function(){
                      $(".test").hide();
                  });
              });
             </script>
          </head>
          <body>
       
              <h2 class="test">This is a heading</h2>
       
              <p class="test">This is a paragraph.</p>
              <p>This is another paragraph.</p>
       
              <button>Click me</button>
       
          </body>
      </html>
       
      		cs













      5. More Examples of jQuery Selectors



      SyntaxDescriptionExample
      $("*")Selects all elementsTry it
      $(this)Selects the current HTML elementTry it
      $("p.intro")Selects all <p> elements with class="intro"Try it
      $("p:first")Selects the first <p> elementTry it
      $("ul li:first")Selects the first <li> element of the first <ul>Try it
      $("ul li:first-child")Selects the first <li> element of every <ul>Try it
      $("[href]")Selects all elements with an href attributeTry it
      $("a[target='_blank']")Selects all <a> elements with a target attribute value equal to "_blank"Try it
      $("a[target!='_blank']")Selects all <a> elements with a target attribute value NOT equal to "_blank"Try it
      $(":button")Selects all <button> elements and <input> elements of type="button"Try it
      $("tr:even")Selects all even <tr> elementsTry it
      $("tr:odd")Selects all odd <tr> elementsTry it






















      [출처: w3schools]


      저작자표시

      'Web > jQuery' 카테고리의 다른 글

      [jQuery] 6. Fading - jQuery 강좌 jQuery / CSE  (0) 2015.06.13
      [jQuery] 5. 보이기 / 숨기기(Hide / Show) - jQuery 강좌 jQuery / CSE  (0) 2015.06.13
      [jQuery] 4. 이벤트 메소드(Event method) - jQuery 강좌  (0) 2015.06.13
      [jQuery] 2. 문법(Syntax) - jQuery 강좌  (0) 2015.06.13
      [jQuery] 1. 시작 - jQuery 강좌  (0) 2015.06.13
      [jQuery] jQuery & Ajax  (0) 2015.06.13

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바