Where The Streets Have No Name

jQuery 기본 예제 모음(2) : Selectors 본문

Developement/Web

jQuery 기본 예제 모음(2) : Selectors

highheat 2008. 4. 10. 18:59
출처 : http://apmusers.com/tt/dbckdghk/59

<Selectors>=>객체 선책

1. #id  Returns: Element
#아이디, 실행후 원소 반환

Matches a single element with the given id attribute.
주어진 아이디에 매치되는 원소하나를 찾아 반환

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("#myDiv").css("border","3px solid red");
  });
  </script>
  <style>
  div {
   width: 90px;
   height: 90px;
   float:left;
   padding: 5px;
   margin: 5px;
   background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <div id="notMe"><p>id="notMe"</p></div>
  <div id="myDiv">id="myDiv"</div>
</body>
</html>



2. element  Returns: Array<Element>
원소명, 실행후 원소 배열 반환

Matches all elements with the given name.
주어진 원소명에 매치되는 모든 원소를 배열로 반환

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("div").css("border","3px solid red");
  });
  </script>
  <style>
  div,span {
   width: 60px;
   height: 60px;
   float:left;
   padding: 10px;
   margin: 10px;
   background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <div>DIV1</div>
  <div>DIV2</div>
  <span>SPAN</span>
</body>
</html>



3. .class  Returns: Array<Element>
클래스명, 실행후 원소배열로 반환

Matches all elements with the given class.
주어진 클래스명에 매치되는 모든 원소를 배열로 반환

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $(".myClass").css("border","3px solid red");
  });
  </script>
  <style>
  div,span {
   width: 150px;
   height: 60px;
   float:left;
   padding: 10px;
   margin: 10px;
   background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <div class="notMe">div class="notMe"</div>
  <div class="myClass">div class="myClass"</div>
  <span class="myClass">span class="myClass"</span>
</body>
</html>



4. *  Returns: Array<Element>
모든것, 실행후 원소 배열로 반환

Matches all elements.
매치되는 모든 원소를 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("*").css("border","3px solid red");
  });
  </script>
  <style>
  div,span,p {
   width: 150px;
   height: 60px;
   float:left;
   padding: 10px;
   margin: 10px;
   background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <div>DIV</div>
  <span>SPAN</span>
  <p>P <button>Button</button></p>
</body>
</html>



5. selector1, selector2, selectorN  Returns: Array<Element>
selector1, selector2, selectorN, 실행후 원소배열로 반환

Matches the combined results of all the specified selectors.
주어진 것들에 대해 매치되는 모든 원소를 배열로 반환
구분자는 ,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("div,span,p.myClass").css("border","3px solid red");
  });
  </script>
  <style>
  div,span,p {
   width: 130px;
   height: 60px;
   float:left;
   padding: 3px;
   margin: 2px;
   background-color: #EEEEEE;
   font-size:14px;
  }
  </style>
</head>
<body>
  <div>div</div>
  <p class="myClass">p class="myClass"</p>
  <p class="notMyClass">p class="notMyClass"</p>
  <span>span</span>
</body>
</html>



6. ancestor descendant  Returns: Array<Element>
조상 자손, 실행후 원소 배열로 반환

Matches all descendant elements specified by "descendant" of elements specified by "ancestor".
주어진 조상에 주어진 자손을 가진 모든 자손을 배열로 반환

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("form input").css("border", "2px dotted blue");
  });
  </script>
  <style>
  body { font-size:14px; }
  form { border:2px green solid; padding:2px; margin:0;
        background:#efe; }
  div { color:red; }
  fieldset { margin:1px; padding:3px; }
  </style>
</head>
<body>
  <form>
   <div>Form is surrounded by the green outline</div>
   <label>Child:</label>
   <input name="name" />
   <fieldset>
     <label>Grandchild:</label>
     <input name="newsletter" />
   </fieldset>
  </form>
  Sibling to form: <input name="none" />
</body>
</html>



7. parent > child  Returns: Array<Element>
조상 > 자손, 실행후 원소 배열 반환

Matches all child elements specified by "child" of elements specified by "parent".
주어진 조상에 포함된 주어진 자손에 매치되는 일단계 자손들만 모두 배열로 반환

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("#main > *").css("border", "3px double red");
  });
  </script>
  <style>
  body { font-size:14px; }
  span#main { display:block; background:yellow; height:110px; }
  button { display:block; float:left; margin:2px;
          font-size:14px; }
  div { width:90px; height:90px; margin:5px; float:left;
       background:#bbf; font-weight:bold; }
  div.mini { width:30px; height:30px; background:green; }
  </style>
</head>
<body>
  <span id="main">
   <div></div>
   <button>Child</button>
   <div class="mini"></div>
   <div>
     <div class="mini"></div>
     <div class="mini"></div>
   </div>
   <div><button>Grand</button></div>
   <div><span>A Span <em>in</em> child</span></div>
   <span>A Span in main</span>
  </span>
</body>
</html>



8. prev + next  Returns: Array<Element>
앞 뒤, 실행후 원소배열 반환

Matches all next elements specified by "next" that are next to elements specified by "prev".
주어진 앞원소와 뒤원소에 순차적으로 매치 되는 뒤원소들을 모두 배열로 반환

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("label + input").css("color", "blue").val("Labeled!")
  });
  </script>

</head>
<body>
  <form>
   <label>Name:</label>
   <input name="name" />
   <fieldset>
     <label>Newsletter:</label>
     <input name="newsletter" />
   </fieldset>
  </form>
  <input name="none" />
</body>
</html>



9. prev ~ siblings  Returns: Array<Element>
앞원소~형제 원소, 실행후 원소배열 반환

Matches all sibling elements after the "prev" element that match the filtering "siblings" selector.
주어진 앞원소와 형제인 뒤원소를 찾아 모두 배열로 반환

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("#prev ~ div").css("border", "3px groove blue");
  });
  </script>
  <style>
  div,span {
   display:block;
   width:80px;
   height:80px;
   margin:5px;
   background:#bbffaa;
   float:left;
   font-size:14px;
  }
  div#small {
   width:60px;
   height:25px;
   font-size:12px;
   background:#fab;
  }
  </style>
</head>
<body>
  <div>div (doesn't match since before #prev)</div>
  <div id="prev">div#prev</div>
  <div>div sibling</div>
  <div>div sibling <div id="small">div neice</div></div>
  <span>span sibling (not div)</span>
  <div>div sibling</div>
</body>
</html>



10. :first  Returns: Element
첫번째, 실행후 원소 반환

Matches the first selected element.
매치되는 원소들중 첫번째 것만 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("tr:first").css("font-style", "italic");
  });
  </script>
  <style>
  td { color:blue; font-weight:bold; }
  </style>
</head>
<body>
  <table>
   <tr><td>Row 1</td></tr>
   <tr><td>Row 2</td></tr>
   <tr><td>Row 3</td></tr>
  </table>
</body>
</html>



11. :last  Returns: Element
마지막, 실행후 원소 반환

Matches the last selected element.
매치되는 원소들중 마지막 것만 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});
  });
  </script>

</head>
<body>
  <table>
   <tr><td>First Row</td></tr>
   <tr><td>Middle Row</td></tr>
   <tr><td>Last Row</td></tr>
  </table>
</body>
</html>



12. :not(selector)  Returns: Array<Element>
아니다, 실행후 원소 배열 반환

Filters out all elements matching the given selector.
주어진 것에 해당하지 않는 모든 것을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("input:not(:checked) + span").css("background-color", "yellow");
   $("input").attr("disabled", "disabled");

  });
  </script>

</head>
<body>
  <div>
   <input type="checkbox" name="a" />
   <span>Mary</span>
  </div>
  <div>
   <input type="checkbox" name="b" />
   <span>Paul</span>
  </div>
  <div>
   <input type="checkbox" name="c" checked="checked" />
   <span>Peter</span>
  </div>
</body>
</html>



13. :even  Returns: Array<Element>
짝수, 실행후 원소 배열 반환

Matches even elements, zero-indexed.
매치된 원소들 중에서 인덱스가 짝수인것 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("tr:even").css("background-color", "#bbbbff");
  });
  </script>
  <style>
  table {
   background:#eeeeee;
  }
  </style>
</head>
<body>
  <table border="1">
   <tr><td>Row with Index #0</td></tr>
   <tr><td>Row with Index #1</td></tr>
   <tr><td>Row with Index #2</td></tr>
   <tr><td>Row with Index #3</td></tr>
  </table>
</body>
</html>



14. :odd  Returns: Array<Element>
홀수, 실행후 원소 배열 반환

Matches odd elements, zero-indexed.
매치된 원소들 중에서 인덱스가 홀수인것 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("tr:odd").css("background-color", "#bbbbff");
  });
  </script>
  <style>
  table {
   background:#f3f7f5;
  }
  </style>
</head>
<body>
  <table border="1">
   <tr><td>Row with Index #0</td></tr>
   <tr><td>Row with Index #1</td></tr>
   <tr><td>Row with Index #2</td></tr>
   <tr><td>Row with Index #3</td></tr>
  </table>
</body>
</html>



15. :eq(index)  Returns: Element
eq(인덱스), 실행후 원소  반환

Matches a single element by its index.
매치된 원소들 중에서 주어진 인덱스에 매치되는 원소 한개를 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("td:eq(2)").css("text-decoration", "blink");
  });
  </script>

</head>
<body>
  <table border="1">
   <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
   <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
   <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
  </table>
</body>
</html>



16. :gt(index)  Returns: Array<Element>
초과, 실행후 원소 배열 반환

Matches all elements with an index above the given one.
매치된 원소들 중에서 인덱스로 주어진 것보다 큰 인덱스 들을 모두 배열로 반환

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("td:gt(4)").css("text-decoration", "line-through");
  });
  </script>

</head>
<body>
  <table border="1">
   <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
   <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
   <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
  </table>
</body>
</html>



17. :lt(index)  Returns: Array<Element>
미만, 실행후 원소 배열 반환

Matches all elements with an index below the given one.
매치된 원소들 중에서 인덱스로 주어진 것보다 작은 인덱스 들을 모두 배열로 반환

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("td:lt(4)").css("color", "red");
  });
  </script>

</head>
<body>
  <table border="1">
   <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
   <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
   <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
  </table>
</body>
</html>



18. :header  Returns: Array<Element>
헤더, 실행후 원소 배열 반환

Matches all elements that are headers, like h1, h2, h3 and so on.
매치되는 원소들 중에서 h1, h2 ... 와 같은 헤더 태그들을 모두 배열로 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $(":header").css({ background:'#CCC', color:'blue' });
  });
  </script>
  <style>
  body { font-size: 10px; font-family: Arial; }
  h1, h2 { margin: 3px 0; }
  </style>
</head>
<body>
  <h1>Header 1</h1>
  <p>Contents 1</p>
  <h2>Header 2</h2>
  <p>Contents 2</p>
</body>
</html>



19. :animated  Returns: Array<Element>
움직인다, 실행후 원소 배열 반환

Matches all elements that are currently being animated.
매치된 원소들 중에서 애니메이션이 동작하고 있는 것들을 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("#run").click(function(){
     $("div:animated").toggleClass("colored");
   });
   function animateIt() {
     $("#mover").slideToggle("slow", animateIt);
   }
   animateIt();

  });
  </script>
  <style>
  div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left; }
  div.colored { background:green; }
  </style>
</head>
<body>
  <button id="run">Run</button>
  <div></div>
  <div id="mover"></div>
  <div></div>
</body>
</html>



20. :contains(text)  Returns: Array<Element>
포함, 실행후 원소 배열 반환

Matches elements which contain the given text.
매치된 원소들 중에서 주어진 텍스트를 포함하는 것들을 모두 배열로 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("div:contains('John')").css("text-decoration", "underline");
  });
  </script>

</head>
<body>
  <div>John Resig</div>
  <div>George Martin</div>
  <div>Malcom John Sinclair</div>
  <div>J. Ohn
</body>
</html>



21. :empty  Returns: Array<Element>
비엇다. 실행후 원소 배열 반환

Matches all elements that are empty, be it elements or text.
매치된 원소들 중에서 텍스트가 비어있는 것들을 모두 배열로 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');
  });
  </script>
  <style>
  td { text-align:center; }
  </style>
</head>
<body>
  <table border="1">
   <tr><td>TD #0</td><td></td></tr>
   <tr><td>TD #2</td><td></td></tr>
   <tr><td></td><td>TD#5</td></tr>
  </table>
</body>
</html>



22. :has(selector)  Returns: Array<Element>
has(selector), 실행후 원소 배열 반환

Matches elements which contain at least one element that matches the specified selector.
매치된 원소들 중에서 주어진 것을 포함하는 것을 모두 배열로 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("div:has(p)").addClass("test");
  });
  </script>
  <style>
  .test{ border: 3px inset red; }
  </style>
</head>
<body>
  <div><p>Hello in a paragraph</p></div>
  <div>Hello again! (with no paragraph)</div>
</body>
</html>



23. :parent  Returns: Array<Element>
부모, 실행후 원소 배열 반환

Matches all elements that are parents - they have child elements, including text.
주어진 것이 부모인 것을 모두 받아온다, 비어있는 것은 포함 안함

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("td:parent").fadeTo(1500, 0.3);
  });
  </script>
  <style>
td { width:40px; background:green; }
  </style>
</head>
<body>
  <table border="1">
   <tr><td>Value 1</td><td></td></tr>
   <tr><td>Value 2</td><td></td></tr>
  </table>
</body>
</html>



24. :hidden  Returns: Array<Element>
안보임, 실행후 원소 배열 반환

Matches all elements that are hidden, or input elements of type "hidden".
보이지 않는 모든 것들을 반환한다. none hidden  등, 추가로 input을 지정하면 인풋타입이 히든인것만 받아온다

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   // in some browsers :hidden includes head, title, script, etc... so limit to body
   $("span:first").text("Found " + $(":hidden", document.body).length +
                        " hidden elements total.");
   $("div:hidden").show(3000);
   $("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");

  });
  </script>
  <style>
  div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
  span { display:block; clear:left; color:red; }
  .starthidden { display:none; }
  </style>
</head>
<body>
  <span></span>
  <div></div>
  <div style="display:none;">Hider!</div>
  <div></div>
  <div class="starthidden">Hider!</div>
  <div></div>
  <form>
   <input type="hidden" />
   <input type="hidden" />
   <input type="hidden" />
  </form>
  <span>
  </span>
</body>
</html>



25. :visible  Returns: Array<Element>
보임, 실행후 원소 배열 반환

Matches all elements that are visible.
보이는 것들을 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("div:visible").click(function () {
     $(this).css("background", "yellow");
   });
   $("button").click(function () {
     $("div:hidden").show("fast");
   });

  });
  </script>
  <style>
  div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }
  .starthidden { display:none; }
  </style>
</head>
<body>
  <button>Show hidden to see they don't change</button>
  <div></div>
  <div class="starthidden"></div>
  <div></div>
  <div></div>
  <div style="display:none;"></div>
</body>
</html>



26. [attribute]  Returns: Array<Element>
속성, 실행후 원소 배열 반환

Matches elements that have the specified attribute.
주어진 속성을 가진 것들을 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("div[id]").one("click", function(){
     var idString = $(this).text() + " = " + $(this).attr("id");
     $(this).text(idString);
   });

  });
  </script>

</head>
<body>
  <div>no id</div>
  <div id="hey">with id</div>
  <div id="there">has an id</div>
  <div>nope</div>
</body>
</html>



27. [attribute=value]  Returns: Array<Element>
속성=값, 실행후 원소 배열 반환

Matches elements that have the specified attribute with a certain value.
주어진 속성과 주어진 값이 일치 하는 모든것들을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("input[name='newsletter']").next().text(" is newsletter");
  });
  </script>

</head>
<body>
  <div>
   <input type="radio" name="newsletter" value="Hot Fuzz" />
   <span>name?</span>
  </div>
  <div>
   <input type="radio" name="newsletter" value="Cold Fusion" />
   <span>name?</span>
  </div>
  <div>
   <input type="radio" name="accept" value="Evil Plans" />
   <span>name?</span>
  </div>
</body>
</html>



28. [attribute!=value]  Returns: Array<Element>
속성!=값, 실행후 원소 배열 반환

Matches elements that don't have the specified attribute with a certain value.
주어진 속성과 주어진 값이 일치 하지 않는 모든것들을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("input[name!='newsletter']").next().text(" is not newsletter");
  });
  </script>

</head>
<body>
  <div>
   <input type="radio" name="newsletter" value="Hot Fuzz" />
   <span>name?</span>
  </div>
  <div>
   <input type="radio" name="newsletter" value="Cold Fusion" />
   <span>name?</span>
  </div>
  <div>
   <input type="radio" name="accept" value="Evil Plans" />
   <span>name?</span>
  </div>
</body>
</html>



29. [attribute^=value]  Returns: Array<Element>
속성^=값, 실행후 원소 배열 반환

Matches elements that have the specified attribute and it starts with a certain value.
주어진 속성을 가지며 값이 주어진 값으로 시작되는 모든 것을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("input[name^='news']").val("news here!");
  });
  </script>

</head>
<body>
  <input name="newsletter" />
  <input name="milkman" />
  <input name="newsboy" />
</body>
</html>



30. [attribute$=value]  Returns: Array<Element>
속성$=값, 실행후 원소 배열 반환

Matches elements that have the specified attribute and it ends with a certain value.
주어진 속성을 가지며 값이 주어진 값으로 끝나는 모든 것을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("input[name$='letter']").val("a letter");
  });
  </script>

</head>
<body>
  <input name="newsletter" />
  <input name="milkman" />
  <input name="jobletter" />
</body>
</html>



31. [attribute*=value]  Returns: Array<Element>
속성*=값, 실행후 원소 배열 반환

Matches elements that have the specified attribute and it contains a certain value.
주어진 속성을 가지며 값이 주어진 값을 포함하는 모든 것을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("input[name*='man']").val("has man in it!");
  });
  </script>

</head>
<body>
  <input name="man-news" />
  <input name="milkman" />
  <input name="letterman2" />
  <input name="newmilk" />
</body>
</html>



32. [selector1][selector2][selectorN]  Returns: Array<Element>
속성들, 실행후 원소 배열 반환

Matches elements that have the specified attribute and it contains a certain value.
속성을 여러개 지정할수도 있다. 매치되는 모든 것을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("input[id][name$='man']").val("only this one");
  });
  </script>

</head>
<body>
  <input id="man-news" name="man-news" />
  <input name="milkman" />
  <input id="letterman" name="new-letterman" />
  <input name="newmilk" />
</body>
</html>



33. :nth-child(index/even/odd/equation)  Returns: Array<Element>
몇번째 자식, 실행후 원소 배열 반환

Matches the nth-child of its parent or all its even or odd children.
인덱스나 키워드로 자식을 지정하여 매치되는 것은 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("ul li:nth-child(2)").append("<span> - 2nd!</span>");
  });
  </script>
  <style>
  div { float:left; }
  span { color:blue; }
  </style>
</head>
<body>
  <div><ul>
   <li>John</li>
   <li>Karl</li>
   <li>Brandon</li>
  </ul></div>
  <div><ul>
   <li>Sam</li>
  </ul></div>
  <div><ul>
   <li>Glen</li>
   <li>Tane</li>
   <li>Ralph</li>
   <li>David</li>
  </ul></div>
</body>
</html>



34. :first-child  Returns: Array<Element>
첫번째 자식, 실행후 원소 배열 반환

Matches the first child of its parent.
첫번째 자식에 매치되는 모든 것을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("div span:first-child")
       .css("text-decoration", "underline")
       .hover(function () {
             $(this).addClass("sogreen");
           }, function () {
             $(this).removeClass("sogreen");
           });

  });
  </script>
  <style>
  span { color:#008; }
  span.sogreen { color:green; font-weight: bolder; }
  </style>
</head>
<body>
  <div>
   <span>John,</span>
   <span>Karl,</span>
   <span>Brandon</span>
  </div>
  <div>
   <span>Glen,</span>
   <span>Tane,</span>
   <span>Ralph</span>
  </div>
</body>
</html>



35. :last-child  Returns: Array<Element>
마지막 자식, 실행후 원소 배열 반환

Matches the last child of its parent.
마지막 자식에 매치되는 모든 것을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("div span:last-child")
       .css({color:"red", fontSize:"80%"})
       .hover(function () {
             $(this).addClass("solast");
           }, function () {
             $(this).removeClass("solast");
           });

  });
  </script>
  <style>
  span.solast { text-decoration:line-through; }
  </style>
</head>
<body>
  <div>
   <span>John,</span>
   <span>Karl,</span>
   <span>Brandon,</span>
   <span>Sam</span>
  </div>
  <div>
   <span>Glen,</span>
   <span>Tane,</span>
   <span>Ralph,</span>
   <span>David</span>
  </div>
</body>
</html>



36. :only-child  Returns: Array<Element>
하나의 자식, 실행후 원소 배열 반환

Matches the only child of its parent.
하나의 자식으로만 이루어진 모든 것을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("div button:only-child").text("Alone").css("border", "2px blue solid");
  });
  </script>
  <style>
  div { width:100px; height:80px; margin:5px; float:left; background:#b9e }
  </style>
</head>
<body>
  <div>
   <button>Sibling!</button>
   <button>Sibling!</button>
  </div>
  <div>
   <button>Sibling!</button>
  </div>
  <div>
   None
  </div>
  <div>
   <button>Sibling!</button>
   <button>Sibling!</button>
   <button>Sibling!</button>
  </div>
  <div>
   <button>Sibling!</button>
  </div>
</body>
</html>


37. :input  Returns: Array<Element>
인풋, 실행후 원소 배열 반환

Matches all input, textarea, select and button elements.
인풋, 텍스트에리어, 셀렉트박스, 버튼들을 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   var allInputs = $(":input");
   var formChildren = $("form > *");
   $("div").text("Found " + allInputs.length + " inputs and the form has " +
                            formChildren.length + " children.")
           .css("color", "red");
   $("form").submit(function () { return false; }); // so it won't submit

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <form>
   <input type="button" value="Input Button"/>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option<option/></select>
   <textarea></textarea>
   <button>Button</button>
  </form>
  <div>
  </div>
</body>
</html>



38. :text  Returns: Array<Element>
텍스트, 실행후 원소 배열 반환

Matches all input elements of type text.
인풋타입이 텍스트인 것을 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   var input = $(":text").css({background:"yellow", border:"3px red solid"});
   $("div").text("For this type jQuery found " + input.length + ".")
           .css("color", "red");
   $("form").submit(function () { return false; }); // so it won't submit

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <form>
   <input type="button" value="Input Button"/>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option<option/></select>
   <textarea></textarea>
   <button>Button</button>
  </form>
  <div>
  </div>
</body>
</html>



39. :password  Returns: Array<Element>
패스워드, 실행후 원소 배열 반환

Matches all input elements of type password.
인풋타입이 패스워드인 것을 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   var input = $(":password").css({background:"yellow", border:"3px red solid"});
   $("div").text("For this type jQuery found " + input.length + ".")
           .css("color", "red");
   $("form").submit(function () { return false; }); // so it won't submit

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <form>
   <input type="button" value="Input Button"/>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option<option/></select>
   <textarea></textarea>
   <button>Button</button>
  </form>
  <div>
  </div>
</body>
</html>



40. :radio  Returns: Array<Element>
레디오, 실행후 원소 배열 반환

Matches all input elements of type radio.
인풋타입이 레디오인 것을 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   var input = $(":radio").css({background:"yellow", border:"3px red solid"});
   $("div").text("For this type jQuery found " + input.length + ".")
           .css("color", "red");
   $("form").submit(function () { return false; }); // so it won't submit

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <form>
   <input type="button" value="Input Button"/>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" name="asdf" />
   <input type="radio" name="asdf" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option<option/></select>
   <textarea></textarea>
   <button>Button</button>
  </form>
  <div>
  </div>
</body>



41. :checkbox  Returns: Array<Element>
체크박스, 실행후 원소 배열 반환

Matches all input elements of type checkbox.
인풋타입이 체크박스인 것을 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   var input = $(":checkbox").css({background:"yellow", border:"3px red solid"});
   $("div").text("For this type jQuery found " + input.length + ".")
           .css("color", "red");
   $("form").submit(function () { return false; }); // so it won't submit

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <form>
   <input type="button" value="Input Button"/>
   <input type="checkbox" />
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option<option/></select>
   <textarea></textarea>
   <button>Button</button>
  </form>
  <div>
  </div>
</body>
</html>



42. :submit  Returns: Array<Element>
서브밋, 실행후 원소 배열 반환

Matches all input elements of type submit.
인풋타입이 서브밋인 것을 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   var input = $(":submit").css({background:"yellow", border:"3px red solid"});
   $("div").text("For this type jQuery found " + input.length + ".")
           .css("color", "red");
   $("form").submit(function () { return false; }); // so it won't submit

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <form>
   <input type="button" value="Input Button"/>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option<option/></select>
   <textarea></textarea>
   <button>Button</button>
  </form>
  <div>
  </div>
</body>
</html>



43. :image  Returns: Array<Element>
이미지, 실행후 원소 배열 반환

Matches all input elements of type image.
인풋타입이 이미지인 것을 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   var input = $(":image").css({background:"yellow", border:"3px red solid"});
   $("div").text("For this type jQuery found " + input.length + ".")
           .css("color", "red");
   $("form").submit(function () { return false; }); // so it won't submit

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <form>
   <input type="button" value="Input Button"/>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option<option/></select>
   <textarea></textarea>
   <button>Button</button>
  </form>
  <div>
  </div>
</body>
</html>



44.  :reset  Returns: Array<Element>
리셋, 실행후 원소 배열 반환

Matches all input elements of type reset.
인풋타입이 리셋인 것을 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   var input = $(":reset").css({background:"yellow", border:"3px red solid"});
   $("div").text("For this type jQuery found " + input.length + ".")
           .css("color", "red");
   $("form").submit(function () { return false; }); // so it won't submit

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <form>
   <input type="button" value="Input Button"/>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option<option/></select>
   <textarea></textarea>
   <button>Button</button>
  </form>
  <div>
  </div>
</body>
</html>



45. :button  Returns: Array<Element>
버튼, 실행후 원소 배열 반환

Matches all input elements of type button.
인풋타입이 버튼인 것을 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   var input = $(":button").css({background:"yellow", border:"3px red solid"});
   $("div").text("For this type jQuery found " + input.length + ".")
           .css("color", "red");
   $("form").submit(function () { return false; }); // so it won't submit

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <form>
   <input type="button" value="Input Button"/>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option<option/></select>
   <textarea></textarea>
   <button>Button</button>
  </form>
  <div>
  </div>
</body>
</html>



46. :file  Returns: Array<Element>
파일, 실행후 원소 배열 반환

Matches all input elements of type file.
인풋타입이 파일인 것을 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   var input = $(":file").css({background:"yellow", border:"3px red solid"});
   $("div").text("For this type jQuery found " + input.length + ".")
           .css("color", "red");
   $("form").submit(function () { return false; }); // so it won't submit

  });
  </script>
  <style>
  textarea { height:45px; }
  </style>
</head>
<body>
  <form>
   <input type="button" value="Input Button"/>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option<option/></select>
   <textarea></textarea>
   <button>Button</button>
  </form>
  <div>
  </div>
</body>
</html>



47. :hidden  Returns: Array<Element>
히든, 실행후 원소 배열 반환

Matches all elements that are hidden, or input elements of type "hidden".
인풋타입이 히든인 것을 모두 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   // in some browsers :hidden includes head, title, script, etc... so limit to body
   $("span:first").text("Found " + $(":hidden", document.body).length +
                        " hidden elements total.");
   $("div:hidden").show(3000);
   $("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");

  });
  </script>
  <style>
  div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
  span { display:block; clear:left; color:red; }
  .starthidden { display:none; }
  </style>
</head>
<body>
  <span></span>
  <div></div>
  <div style="display:none;">Hider!</div>
  <div></div>
  <div class="starthidden">Hider!</div>
  <div></div>
  <form>
   <input type="hidden" />
   <input type="hidden" />
   <input type="hidden" />
  </form>
  <span>
  </span>
</body>
</html>



48. :enabled  Returns: Array<Element>
활성화? 사용가능?, 실행후 원소 배열 반환

Matches all elements that are enabled.
활성화된 모든 것들을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("input:enabled").val("this is it");
  });
  </script>

</head>
<body>
  <form>
   <input name="email" disabled="disabled" />
   <input name="id" />
  </form>
</body>
</html>



49. :disabled  Returns: Array<Element>
비활성화? 사용불가능?, 실행후 원소 배열 반환

Matches all elements that are disabled.
비활성화된 모든 것들을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("input:disabled").val("this is it");
  });
  </script>

</head>
<body>
  <form>
   <input name="email" disabled="disabled" />
   <input name="id" />
  </form>
</body>
</html>



50. :checked  Returns: Array<Element>
체크됏음, 실행후 원소 배열 반환

Matches all elements that are checked.
인풋이 체크된 모든 것들을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   function countChecked() {
     var n = $("input:checked").length;
     $("div").text(n + (n == 1 ? " is" : " are") + " checked!");
   }
   countChecked();
   $(":checkbox").click(countChecked);

  });
  </script>
  <style>
  div { color:red; }
  </style>
</head>
<body>
  <form>
   <input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
   <input type="checkbox" name="newsletter" value="Daily" />
   <input type="checkbox" name="newsletter" value="Weekly" />
   <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
   <input type="checkbox" name="newsletter" value="Yearly" />
  </form>
  <div></div>
</body>
</html>



51. :selected  Returns: Array<Element>
선택되어짐, 실행후 원소 배열 반환

Matches all elements that are selected.
선택된 모든 것을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("select").change(function () {
         var str = "";
         $("select option:selected").each(function () {
               str += $(this).text() + " ";
             });
         $("div").text(str);
       })
       .trigger('change');

  });
  </script>
  <style>
  div { color:red; }
  </style>
</head>
<body>
  <select name="garden" multiple="multiple">
   <option>Flowers</option>
   <option selected="selected">Shrubs</option>
   <option>Trees</option>
   <option selected="selected">Bushes</option>
   <option>Grass</option>
   <option>Dirt</option>
  </select>
  <div></div>
</body>
</html>
'Developement/Web' Related Articles more