JavaScript DHTML/jQuery/filter

Материал из Web эксперт
Перейти к: навигация, поиск

Filter by function

   <source lang="html4strict">
    

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
         $("div").css("background", "blue")
           .filter(function (index) {
                 return index == 1 ;
           })
           .css("border", "1px solid red");
       });
   </script>
    <style>
    div { border:2px white solid;}
 </style>
 </head>
 <body>
   <body>
asdf
asdf
asdf
asdf
asdf
asdf
 </body>

</html>



 </source>
   
  


Filter by ID

   <source lang="html4strict">
    

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
         $("div").css("background", "blue")
           .filter(function (index) {
                 return  $(this).attr("id") == "fourth" ;
           })
           .css("border", "1px solid red");
       });
   </script>
    <style>
    div { border:2px white solid;}
 </style>
 </head>
 <body>
   <body>
asdf
asdf
asdf
asdf
asdf
asdf
 </body>

</html>



 </source>
   
  


Filter by index

   <source lang="html4strict">
    

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
         $("div").css("background", "blue")
           .filter(function (index) {
                 return index == 1 ;
           })
           .css("border", "1px solid red");
       });
   </script>
    <style>
    div { border:2px white solid;}
 </style>
 </head>
 <body>
   <body>
asdf
asdf
asdf
asdf
asdf
asdf
 </body>

</html>



 </source>
   
  


Filter class out

   <source lang="html4strict">
    

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
         $("div").css("background", "yellow").filter(".blue").css("border-color", "red");
       });
   </script>
    <style>
    div { border:2px white solid;}
 </style>
 </head>
 <body>
   <body>
asdf
asdf
asdf
asdf
asdf
asdf
 </body>

</html>



 </source>
   
  


Filter content

   <source lang="html4strict">
    

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
          $("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");
       });
   </script>
 </head>
 <body>
   <body>

Hello spandata

 </body>

</html>



 </source>
   
  


filter(expr): narrow down the results of a search.

   <source lang="html4strict">
 

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("div").css("background", "#c8ebcc")
           .filter(".middle")
           .css("color", "red");
       });
   </script>

 </head>
 <body>
   <body>
asdf
asdf
   </body>

</html>


 </source>
   
  


filter(fn) function is called with a context equal to the current element

   <source lang="html4strict">
 

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              $("div").css("background", "#b4b0da")
              .filter(function (index) {
                 return index == 1 || $(this).attr("id") == "fourth";
              })
              .css("border", "3px double red");
       });
   </script>

 </head>
 <body>
   <body>
asdf
asdf
   </body>

</html>


 </source>
   
  


Filter out element and add style

   <source lang="html4strict">

<html>

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

$(document).ready(

 function() {
   $("li")
     .filter(".my3")
     .addClass("tmpSelected");
 }

);

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

ul {

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

} li.tmpSelected {

   background: #a1e6b2;
   border: 4px solid #93daa4;

}

   </style>
 </head>
 <body>
  • A
  • B
  • C
  • D
  • E
 </body>

</html>

 </source>
   
  


Filters out all elements matching the given selector

   <source lang="html4strict">
    

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
 $(document).ready(function(){
     $("input:not(:checked) + span").css("background-color", "yellow");
     
 });
   </script>
 </head>
 <body>
  <form>
   <input type="checkbox" name="a" />
   A
   <input type="checkbox" name="b" />
   B
   <input type="checkbox" name="c" checked="checked" />
   C
 </form>
 </body>

</html>



 </source>
   
  


filter with customized function

   <source lang="html4strict">

<html>

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

$(document).ready(

 function() {
   $("li")
     .filter(
       function() {
         return $(this).hasClass("my2") || $(this).hasClass("my3");
       }
     )
     .addClass("mySelected");
 }

);

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

ul {

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

} li.mySelected {

   background: #a1e6b2;
   border: 4px solid #93daa4;

}

   </style>
 </head>
 <body>
  • A
  • B
  • C
  • D
  • E
 </body>

</html>

 </source>