判斷過濾，指的是根據某些條件進行判斷來選取符合條件的元素。在jQuery中，我們使用is()方法來實現判斷過濾。
語法：
$().is(expression)
說明：
參數expression是一個jQuery選擇器表達式。所謂的jQuery選擇器表達式，說白了就是我們在前幾章所學到的選擇器。
is()方法用於判斷當前選擇的元素集合中，是否含有符合條件的元素。如果含有，則返回true；如果不含有，則返回false。
is()方法跟hasClass()方法類似，也是用來做判斷，並不能直接過濾元素。實際上，filter()方法內部也是在調用這個函數。所以，filter()方法原有的規則在這裡也適用。關於filter()方法，我們在後面會詳細講解。
is()方法非常好用，能不能用好直接決定你代碼是否高效，也算是高手跟入門的眾多區別之一。使用jQuery開發，沒有做不到，只要想不到。這裡列出is()方法的常用的做法，大家一定要認真學習一下：
//判斷元素是否隱藏
$().is(":visible")
//判斷元素是否處在動畫中（非常重要）
$().is(":animated")
//判斷復選框是否被選中
$("input[type=checkbox]").is(":checked")
//判斷是否第1個子元素
$(this).is(":first-child")
//判斷文本中是否包含helicopter這個詞
$().is(":contains('helicopter')")
//判斷是否包含某些類名
$().is(".red,.blue")
下面我們通過幾個實際的例子來讓大家深入感受一下。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#wrapper
{
position:relative; /*設置相對定位屬性，以便定位子元素*/
width:240px;
height:200px;
overflow:hidden;
}
img
{
width:240px;
height:200px;
}
#content
{
position:absolute;
left:0;
bottom:-28px;
width:100%;
height:28px;
line-height:28px;
font-family:微軟雅黑;
text-align:center;
background-color:rgba(0,0,0,0.7);
color:White;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#wrapper").hover(function () {
$(" #content",this).animate({ "bottom": "0px" }, 200);
}, function () {
$(" #content",this).animate({ "bottom": "-28px" }, 200);
})
})
</script>
</head>
<body>
<div id="wrapper">
<img src="../App_images/lesson/run_jq/nvdi.png" alt=""/>
<div id="content">海賊王女帝</div>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
我們都知道：當我們快速地重復移入移出時，會出現一個動畫累積的bug。為了避免這種情況的發生，我們只需要使用is(":animated")來對id為content的元素進行判斷即可。is(":animated")這是用來判斷當前所選元素是否處於動畫狀態，如果處於動畫狀態，則返回true；如果不處於動畫狀態，則返回false。
$("#wrapper").hover(function () {
$(" #content",this).animate({ "bottom": "0px" }, 200);
}, function () {
$(" #content",this).animate({ "bottom": "-28px" }, 200);
})
我們把上面jQuery代碼改進之後，最終代碼如下：
$(function () {
$("#wrapper").hover(function () {
if (!$(" #content", this).is(":animated")) {
$(" #content", this).animate({ "bottom": "0px" }, 200);
}
}, function () {
if (!$(" #content", this).is(":animated")) {
$(" #content", this).animate({ "bottom": "-28px" }, 200);
}
});
})
這樣我們就可以規避掉動畫效果出現的小bug了。這個例子是非常實用的例子，大家記得好好琢磨一下。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul li").click(function () {
if($(this).is(".red")){
$(this).css("color","red");
}
})
})
</script>
</head>
<body>
<ul>
<li class="red">紅色red</li>
<li>橙色orange</li>
<li>黃色yellow</li>
<li>綠色green</li>
<li>藍色blue</li>
<li>紫色purple</li>
</ul>
</body>
</html>
默認情況下，浏覽器預覽效果如下：
當我們點擊class為red的li元素時，在浏覽器預覽效果如下：
分析：
大家會發現，原來用is()方法也可以判斷所選元素是否存在某個類名，這一點跟hasClass()方法相同。對於判斷所選元素是否存在類名，我們可以使用2種方法：（1）hasClass()和（2）is()。那究竟用哪一個好呢？有個大牛做過實驗，從查找速度（性能）來看，hasClass()方法遠優於is()方法。畢竟hasClass()這個方法封裝的東西很少，而is()方法封裝的東西過多，運行速度肯定比較慢。