JavaScript Tutorial/jQuery/slice

Материал из Web эксперт
Версия от 11:25, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Slice li under a ul

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

var tmpExample = {

 ready : function() {
   $("ul#uiID li").slice(0, 4).addClass("justAdd");
 }

}; $(document).ready(tmpExample.ready);

   </script>
   <style type="text/css">

ul#uiID {

   list-style: none;
   margin: 0;
   padding: 0;

} ul#uiID li {

   margin: 1px;
   padding: 3px;

} li.justAdd {

   background: #fcc16e;

}

   </style>
 </head>
 <body id="tmpExample">
  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
 </body>

</html></source>


Slice paragraphs to include only the second and third element.

   <source lang="javascript">

$("p").slice(1).wrapInner("");</source>


Slices paragraphs to include only the first and second element.

   <source lang="javascript">

$("p").slice(0, 2).wrapInner("");</source>


Slices paragraphs to include only the second element.

   <source lang="javascript">

$("p").slice(1, 2).wrapInner("");</source>


Slice start and end

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
          function colorEm() {
             var $div = $("div");
             $div.css("background", "red");
             $div.slice(2, 4).css("background", "yellow");   
          }
          $("button").click(colorEm);
       });
   </script>
   <style>
     div { width:40px; height:40px; margin:10px; float:left;}
   </style>
 </head>
 <body>
   <body>
     <button>Click the button</button>
 </body>

</html></source>


Slice start till ends

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
          function colorEm() {
             var $div = $("div");
             $div.css("background", "red");
             $div.slice(2).css("background", "yellow");   
          }
          $("button").click(colorEm);
       });
   </script>
   <style>
     div { width:40px; height:40px; margin:10px; float:left;}
   </style>
 </head>
 <body>
   <body>
     <button>Click the button</button>
 </body>

</html></source>


slice to the end

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

var tmpExample = {

 ready : function() {
   $("ul#uiID li").slice(5).addClass("justAdd");
 }

}; $(document).ready(tmpExample.ready);

   </script>
   <style type="text/css">

ul#uiID {

   list-style: none;
   margin: 0;
   padding: 0;

} ul#uiID li {

   margin: 1px;
   padding: 3px;

} li.justAdd {

   background: #fcc16e;

}

   </style>
 </head>
 <body id="tmpExample">
  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
 </body>

</html></source>