一直以來對JQuery很喜歡，它封裝了JavaScript，用起來更方便，不過無論什么方法，必須要理解這個方法本來的含義，此外就是要在自己的邏輯上整理清楚，這樣才能做到更多的效果。“遇到問題了，多看手冊”這句話是當初學腳本語言的時候老師經常說的一句話，當初很郁悶他這句話，不過現在發現，封住的方法的確多得很，只有不斷地學習，不斷地用到，才會發現這些方法的區別，也才能更加合理地利用這些前輩們為我們打造好的各種包。
先來說說今天認識到的filter()方法吧。
這個方法主要用來遍歷列表中的元素，或者有着並列關系的元素，filter()方法其實是個過濾選擇器，旨在從眾多的並列的“兄弟姐妹”中查找到符合匹配條件的那一來。
我們先來看看API中給我們提供的例子:
==============例1=============
（備注：這里就不寫那么多引入的js和css,大家可以自己隨意添加）
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
$(document).ready(function(){ ------>此處保持好習慣，最好等頁面加載完了再運行這段代碼
$(
"li" ).filter( ":even" ).css( "background-color", "red" ); -------->意思是找到元素li中的偶元素（：even）,並且設置這些偶元素的樣式為"background-color", "red"
});
結果展示應該是“list item 1” “list item 3” “list item 5” 為背景紅色
（備注，在這里元素的指數是從0開始的）
====================例2========================
<ul>
<li><strong>list</strong> item 1 - one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> -
two <span>strong tags</span></li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
$(document).ready(function(){
$( "li" )
.filter(function( index ) {
return $( "strong", this ).length === 1;
})
.css( "background-color", "red" );
});
這段代碼似乎變得有點復雜了，但是道理其實是一樣的，首先從$的地方開始找，先是找到li,在所有的li元素中找到含有strong元素，並且判斷這個li 中的strong的個數，找到含有一個strong的那個，並且更改它的背景顏色。結果是只有第一個<
li><strong>list</strong> item 1 - one strong tag</li> 變成了紅色。
$(document).ready(function(){
$( "li" )
.filter(function( index ) {
return index %
3 === 2;
})
.css( "background-color", "red" );
});
同樣是上邊的html,下面這段js的含義是說找到li,並且判斷它的指數，是否是除3余2的那個，找到后改變它的背景色。
結果為<
li>list item 3</li>和<
li>list item 6</li>都改變了背景顏色，因為它們的指數一個為2，另一個為5，取余后都是2
====================例3========================
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>filter demo</title>
<style>
div {
width: 60px;
height: 60px;
margin: 5px;
float: left;
border: 2px white solid;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div></div>
<script>
$(document).ready(function(){
$( "div" )
.css( "background", "#c8ebcc" )
.filter( ".middle" )
.css( "border-color", "red" );
});
</script>
</body>
</html>
結果為所有的div都添加了背景色#c8ebcc，而所有的.middle的那div都加了紅邊框
=====================結語=======================
學習JQuery的道路還很長遠，需要每天積累，希望正在學習這個語言的朋友們，相互交流，共同進步。