Where The Streets Have No Name

jQuery 기본 예제 모음(9) 본문

Developement/Web

jQuery 기본 예제 모음(9)

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

16. map( callback )  Returns: jQuery
map(콜백함수) 실행후 jQuery  객체 반환

Translate a set of elements in the jQuery object into another set of values in an array (which may, or may not, be 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(){

   $("p").append( $("input").map(function(){
     return $(this).val();
   }).get().join(", ") );

  });
  </script>
  <style>
  p { color:red; }
  </style>
</head>
<body>
  <p><b>Values: </b></p>
  <form>
   <input type="text" name="name" value="John"/>
   <input type="text" name="password" value="password"/>
   <input type="text" name="url" value="http://ejohn.org/"/>
  </form>
</body>
</html>



17. not( expr )  Returns: jQuery
실행후 jQuery 객체 반환

Removes elements matching the specified expression from the set of matched 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(){

   $("div").not(".green, #blueone")
           .css("border-color", "red");

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:10px; float:left;
       background:yellow; border:2px solid white; }
  .green { background:#8f8; }
  .gray { background:#ccc; }
  #blueone { background:#99f; }
  </style>
</head>
<body>
  <div></div>
  <div id="blueone"></div>
  <div></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="gray"></div>
  <div></div>
</body>
</html>



18. slice( start, end )  Returns: jQuery
Selects a subset of the matched 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(){
   
   function colorEm() {
     var $div = $("div");
     var start = Math.floor(Math.random() *
                            $div.length);
     var end = Math.floor(Math.random() *
                          ($div.length - start)) +
                          start + 1;
     if (end == $div.length) end = undefined;
     $div.css("background", "");
     if (end)
       $div.slice(start, end).css("background", "yellow");   
      else
       $div.slice(start).css("background", "yellow");
     
     $("span").text('$("div").slice(' + start +
                    (end ? ', ' + end : '') +
                    ').css("background", "yellow");');
   }

   $("button").click(colorEm);

  });
  </script>
  <style>
  div { width:40px; height:40px; margin:10px; float:left;
       border:2px solid blue; }
  span { color:red; font-weight:bold; }
  button { margin:5px; }
  </style>
</head>
<body>
  <button>Turn slice yellow</button>
  <span>Click the button!</span>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>



19. add( expr )  Returns: jQuery
add( expr ), 실행후 jQuery 객체 반환

Adds more elements, matched by the given expression, to the set of matched 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(){
   
   $("div").css("border", "2px solid red")
           .add("p")
           .css("background", "yellow");

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:10px; float:left; }
  p { clear:left; font-weight:bold; font-size:16px;
     color:blue; margin:0 10px; padding:2px; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <p>Added this... (notice no border)</p>
</body>
</html>



20. children( expr )  Returns: jQuery
children( expr ), 실행후 jQuery 객체 반환

Get a set of elements containing all of the unique children of each of the matched set of 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(){
   
   $("#container").click(function (e) {
     $("*").removeClass("hilite");
     var $kids = $(e.target).children();
     var len = $kids.addClass("hilite").length;

     $("#results span:first").text(len);
     $("#results span:last").text(e.target.tagName);

     e.preventDefault();
     return false;
   });

  });
  </script>
  <style>
  body { font-size:16px; font-weight:bolder; }
  div { width:130px; height:82px; margin:10px; float:left;
       border:1px solid blue; padding:4px; }
  #container { width:auto; height:105px; margin:0; float:none;
       border:none; }
  .hilite { border-color:red; }
  #results { display:block; color:red; }
  p { margin:10px; border:1px solid transparent; }
  span { color:blue; border:1px solid transparent; }
  input { width:100px; }
  em { border:1px solid transparent; }
  a { border:1px solid transparent; }
  b { border:1px solid transparent; }
  button { border:1px solid transparent; }
  </style>
</head>
<body>
  <div id="container">
   <div>
     <p>This <span>is the <em>way</em> we</span>
     write <em>the</em> demo,</p>
   </div>
   <div>
     <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write
     the</button> demo,
   </div>
   <div>
     This <span>the way we <em>write</em> the <em>demo</em> so</span>
     <input type="text" value="early" /> in
   </div>
   <p>
     <span>t</span>he <span>m</span>orning.
     <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
   </p>
  </div>
</body>
</html>



21. contents( )  Returns: jQuery
contents( ), 실행후 jQuery 객체 반환

Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.
매치된 원소들중에서 비어있지 않는 자식들을 모두 가져옴
이해가 잘 안됨

<!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(){
   $("p").contents().not("[@nodeType=1]").wrap("<b/>");
  });
  </script>
 
</head>
<body>
  <p>Hello <a href="Johnhttp://ejohn.org/">John</a>, how are you doing?</p>
</body>
</html>



22. find( expr )  Returns: jQuery
find( expr ), 실행후 jQuery 객체 반환

Searches for all elements that match the specified expression. This method is a good way to find additional descendant elements with which to process.
매치되어진 원소들 중에서 주어진 것에 매치되는 것을 찾아 그것들을 모두 배열로 반환한다.

<!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(){
   $("p").find("span").css('color','red');
  });
  </script>
 
</head>
<body>
  <p><span>Hello</span>, how are you?</p>
  <p>Me? I'm <span>good</span>.</p>
</body>
</html>



23. next( expr )  Returns: jQuery
next( expr ), 실행후 jQuery 객체 반환

Get a set of elements containing the unique next siblings of each of the matched set of 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(){
   
   $("button").click(function () {
     var txt = $(this).text();
     $(this).next().text(txt);
   });

  });
  </script>
  <style>
  span { color:blue; font-weight:bold; }
  button { width:100px; }
  </style>
</head>
<body>
  <div><button>First</button> - <span></span></div>
  <div><button>Second</button> - <span></span></div>
  <div><button>Third</button> - <span></span></div>
</body>
</html>



24. nextAll( expr )  Returns: jQuery
nextAll( expr ), 실행후 jQuery 객체 반환

Find all sibling elements after the current 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(){
   $("div:first").nextAll().addClass("after");
  });
  </script>
  <style>
  div { width: 80px; height: 80px; background: #abc;
       border: 2px solid black; margin: 10px; float: left; }
  div.after { border-color: red; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>



25. parent( expr )  Returns: jQuery
parent( expr ), 실행후 jQuery 객체 반환

Get a set of elements containing the unique parents of the matched set of 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(){
   
   $("*", document.body).each(function () {
     var parentTag = $(this).parent().get(0).tagName;
     $(this).prepend(document.createTextNode(parentTag + " > "));
   });

  });
  </script>
  <style>
  div,p { margin:10px; }
  </style>
</head>
<body>
  <div>div,
   <span>span, </span>
   <b>b </b>
  </div>
  <p>p,
   <span>span,
     <em>em </em>
   </span>
  </p>
  <div>div,
   <strong>strong,
     <span>span, </span>
     <em>em,
       <b>b, </b>
     </em>
   </strong>
   <b>b </b>
  </div>
</body>
</html>



26. parents( expr )  Returns: jQuery
parents( expr ), 실행후 jQuery 객체 반환

Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).
매치되어진 원소의 유일한 조상들을 찾아 객체로 반환한다.

The matched elements can be filtered with an optional expression.

<!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 parentEls = $("b").parents()
                         .map(function () {
                               return this.tagName;
                             })
                         .get().join(", ");
   $("b").append("<strong>" + parentEls + "</strong>");

  });
  </script>
  <style>
  b { color:blue; }
  strong { color:red; }
  </style>
</head>
<body>
  <div>
   <p>
     <span>
       <b>My parents are: </b>
     </span>
   </p>
  </div>
</body>
</html>




27. prev( expr )  Returns: jQuery
prev( expr ), 실행후 jQuery 객체 반환

Get a set of elements containing the unique previous siblings of each of the matched set of 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 $curr = $("#start");
   $curr.css("background", "#f99");
   $("button").click(function () {
     $curr = $curr.prev();
     $("div").css("background", "");
     $curr.css("background", "#f99");
   });

  });
  </script>
  <style>
  div { width:40px; height:40px; margin:10px;
       float:left; border:2px blue solid;
       padding:2px; }
  span { font-size:14px; }
  p { clear:left; margin:10px; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div><span>has child</span></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="start"></div>
  <div></div>
  <p><button>Go to Prev</button></p>
</body>
</html>



28. prevAll( expr )  Returns: jQuery
prevAll( expr ), 실행후 jQuery 객체 반환

Find all sibling elements before the current 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(){
   $("div:last").prevAll().addClass("before");
  });
  </script>
  <style>
  div { width:70px; height:70px; background:#abc;
       border:2px solid black; margin:10px; float:left; }
  div.before { border-color: red; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>



29. siblings( expr )  Returns: jQuery
siblings( expr ), 실행후 jQuery 객체 반환

Get a set of elements containing all of the unique siblings of each of the matched set of elements.
매치되어진 원소들의 모든 형제 원소들을 찾아 반환한다.

Can be filtered with an optional expressions.

<!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 len = $(".hilite").siblings()
                         .css("color", "red")
                         .length;
   $("b").text(len);

  });
  </script>
  <style>
  ul { float:left; margin:5px; font-size:16px; font-weight:bold; }
  p { color:blue; margin:10px 20px; font-size:16px; padding:5px;
     font-weight:bolder; }
  .hilite { background:yellow; }
</style>
</head>
<body>
  <ul>
   <li>One</li>
   <li>Two</li>
   <li class="hilite">Three</li>
   <li>Four</li>
  </ul>
  <ul>
   <li>Five</li>
   <li>Six</li>
   <li>Seven</li>
  </ul>
  <ul>
   <li>Eight</li>
   <li class="hilite">Nine</li>
   <li>Ten</li>
   <li class="hilite">Eleven</li>
  </ul>
  <p>Unique siblings: <b></b></p>
</body>
</html>



30. andSelf( )  Returns: jQuery
andSelf( ), 실행후 jQuery 객체 반환

Add the previous selection to the current selection.
매치되어진 원소들의 상위의 형제 원소들과 조상 원소 모두를 찾아 추가하여 객체로 반환한다.
이해가 잘 안됨

<!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").find("p").andSelf().addClass("border");
   $("div").find("p").addClass("background");

  });
  </script>
  <style>
  p, div { margin:5px; padding:5px; }
  .border { border: 2px solid red; }
  .background { background:yellow; }
  </style>
</head>
<body>
  <div>
   <p>First Paragraph</p>
   <p>Second Paragraph</p>
  </div>
</body>
</html>



31. end( )  Returns: jQuery
end( ), 실행후 jQuery 객체 반환

Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state (right before the destructive operation).
현재 보다 이전의 매치상태로 돌아가서 객체를 반환
잘 이해가 안됨

<!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(){
   
   jQuery.fn.showTags = function (n) {
     var tags = this.map(function () {
                             return this.tagName;
                           })
                       .get().join(", ");
     $("b:eq(" + n + ")").text(tags);
     return this;
   };

   $("p").showTags(0)
         .find("span")
         .showTags(1)
         .css("background", "yellow")
         .end()
         .showTags(2)
         .css("font-style", "italic");

  });
  </script>
  <style>
  p, div { margin:1px; padding:1px; font-weight:bold;
          font-size:16px; }
  div { color:blue; }
  b { color:red; }
  </style>
</head>
<body>
  <p>
   Hi there <span>how</span> are you <span>doing</span>?
  </p>
  <p>
   This <span>span</span> is one of
   several <span>spans</span> in this
   <span>sentence</span>.
  </p>
  <div>
   Tags in jQuery object initially: <b></b>
  </div>
  <div>
   Tags in jQuery object after find: <b></b>
  </div>
  <div>
   Tags in jQuery object after end: <b></b>
  </div>
</body>
</html>
'Developement/Web' Related Articles more