Where The Streets Have No Name

jQuery 기본 예제 모음(4) : Traversing 본문

Developement/Web

jQuery 기본 예제 모음(4) : Traversing

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

<Traversing>

1. eq( index )  Returns: jQuery
eq(인덱스) 실행후 jQuery 객체 반환

Reduce the set of matched elements to a single 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").eq(2).addClass("red");

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:10px; float:left;
       border:2px solid blue; }
  .red { background:red; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>



2. hasClass( class )  Returns: Boolean
클래스가 있나 없나 실행후 참거짓 리턴

Checks the current selection against a class and returns true, if at least one element of the selection has 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(){

   $("div").click(function(){
     if ( $(this).hasClass("protected") )
       $(this).animate({ left: -10 }, 75)
              .animate({ left: 10 }, 75)
              .animate({ left: -10 }, 75)
              .animate({ left: 10 }, 75)
              .animate({ left: 0 }, 75);
   });

  });
  </script>
  <style>
  div { width: 80px; height: 80px; background: #abc;
       position: relative; border: 2px solid black;
       margin: 20px 0px; float: left; left:0 }
  div.protected { border-color: red; }
  span { display:block; float:left; width:20px;
        height:20px; }
  </style>
</head>
<body>
  <span></span><div class="protected"></div>
  <span></span><div></div>
  <span></span><div></div>
  <span></span><div class="protected"></div>
</body>
</html>



3. filter( expr )  Returns: jQuery
실행후 jQuery 객체를 반환

Removes all elements from the set of matched elements that do not match the specified expression(s).
매치되는 원소들중 해당 필터 표현에 맞지 않는 것들은 제거하고 반환

<!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("background", "#c8ebcc")
           .filter(".middle")
           .css("border-color", "red");

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:5px; float:left;
       border:2px white solid;}
  </style>
</head>
<body>
  <div></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div></div>
</body>
</html>



4. filter( fn )  Returns: jQuery
filter(함수) 실행후 jQuery 객체를 반환

Removes all elements from the set of matched elements that does not match the specified function.
매치되는 원소들중 해당 필터 함수에 맞지 않는 것들은 제거하고 반환

<!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("background", "#b4b0da")
           .filter(function (index) {
                 return index == 1 || $(this).attr("id") == "fourth";
               })
           .css("border", "3px double red");

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:5px; float:left;
       border:3px white solid; }
  </style>
</head>
<body>
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
  <div id="fourth"></div>
  <div id="fifth"></div>
  <div id="sixth"></div>
</body>
</html>



5. is( expr )  Returns: Boolean
존재 여부 실행후 참거짓 반환

Checks the current selection against an expression and returns true, if at least one element of the selection fits the given 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(){

   $("div").one('click', function () {
     if ($(this).is(":first-child")) {
       $("p").text("It's the first div.");
     } else if ($(this).is(".blue,.red")) {
       $("p").text("It's a blue or red div.");
     } else if ($(this).is(":contains('Peter')")) {
       $("p").text("It's Peter!");
     } else {
       $("p").html("It's nothing <em>special</em>.");
     }
     $("p").hide().slideDown("slow");
     $(this).css({"border-style": "inset", cursor:"default"});
   });

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:5px; float:left;
       border:4px outset; background:green; text-align:center;
       font-weight:bolder; cursor:pointer; }
  .blue { background:blue; }
  .red { background:red; }
  span { color:white; font-size:16px; }
  p { color:red; font-weight:bolder; background:yellow;
     margin:3px; clear:left; display:none; }
  </style>
</head>
<body>
  <div></div>
  <div class="blue"></div>
  <div></div>
  <div class="red"></div>
  <div><br/><span>Peter</span></div>
  <div class="blue"></div>
  <p> </p>
</body>
</html>
'Developement/Web' Related Articles more