JavaScript Tutorial/jQuery/filter — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Текущая версия на 11:25, 26 мая 2010
Содержание
- 1 Filter by function
- 2 Filter by ID
- 3 Filter by index
- 4 Filter class out
- 5 Filter content
- 6 filter(expr): narrow down the results of a search.
- 7 filter(fn) function is called with a context equal to the current element
- 8 Filter out element and add style
- 9 Filters out all elements matching the given selector
- 10 filter with customized function
Filter by function
<source lang="javascript">
<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="javascript">
<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="javascript">
<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="javascript">
<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="javascript">
<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="javascript">
<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="javascript">
<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="javascript">
<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="javascript">
<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="javascript">
<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>