jQuery中filter()方法用法實(shí)例

更新時(shí)間：2015年01月06日 10:15:56 投稿：shichen2014

這篇文章主要介紹了jQuery中filter()方法用法,實(shí)例分析了filter()方法的功能、定義及篩選的幾種使用技巧,需要的朋友可以參考下

此方法能夠篩選出與指定表達(dá)式或者方法返回值相匹配的元素或者元素集合。

語(yǔ)法結(jié)構(gòu)一:
篩選出與指定表達(dá)式匹配的元素集合。

復(fù)制代碼代碼如下:

$(selector).filter(expr)

參數(shù)列表:

參數(shù)	描述
expr	字符串值，用于篩選當(dāng)前元素集合的選擇器表達(dá)式。

實(shí)例代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<title>filter()函數(shù)-腳本之家</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("li").filter(".js").css("color","blue")

})

</script>

</head>

<body>

<div>

  <ul>

    <li>HTML專區(qū)</li>

    <li class="js">Javascript專區(qū)</li>

    <li>Div+Css專區(qū)</li>

    <li>Jquery專區(qū)</li>

  </ul>

</div>

</body>

</html>

這段代碼能夠?qū)㈩惷麨閖s的li中的字體顏色設(shè)置為藍(lán)色。

語(yǔ)法結(jié)構(gòu)二:

從元素集合中篩選出指定的jquery對(duì)象。

復(fù)制代碼代碼如下:

$(selector).filter(element)

參數(shù)列表:

參數(shù)	描述
element	用于匹配當(dāng)前元素集合中元素的jQuery對(duì)象或者DOM對(duì)象。

實(shí)例代碼:

實(shí)例一:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<title>filter()函數(shù)-腳本之家</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("li").filter(document.getElementById("js")).css("color","blue")

})

</script>

</head>

<body>

<div>

  <ul>

    <li>HTML專區(qū)</li>

    <li id="js">Javascript專區(qū)</li>

    <li>Div+Css專區(qū)</li>

    <li>Jquery專區(qū)</li>

  </ul>

</div>

</body>

</html>

實(shí)例二:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<title>filter()函數(shù)-腳本之家</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("li").filter($($("li")[0])).css("color","blue")

})

</script>

</head>

<body>

<div>

  <ul>

    <li>HTML專區(qū)</li>

    <li id="js">Javascript專區(qū)</li>

    <li>Div+Css專區(qū)</li>

    <li>Jquery專區(qū)</li>

  </ul>

</div>

</body>

</html>

語(yǔ)法結(jié)構(gòu)三:

篩選出與指定函數(shù)返回值匹配的元素集合。
filter()方法內(nèi)部將對(duì)每個(gè)對(duì)象計(jì)算一次 (如$.each).。如果調(diào)用的function返回false則這個(gè)元素被刪除，否則就會(huì)保留。

復(fù)制代碼代碼如下:

$(selector).filter(function())

參數(shù)列表:

參數(shù)	描述
function(index)	定義返回filter()匹配值的函數(shù)。 index為當(dāng)前元素在匹配元素集合中的索引值。

實(shí)例代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<title>filter()函數(shù)-腳本之家</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("ul").filter(function(index){

    return $(".js",this).length==0;

  }).css("color","blue")

})

</script>

</head>

<body>

<div>

  <ul>

    <li>HTML專區(qū)</li>

    <li class="js">Javascript專區(qū)</li>

    <li>Div+Css專區(qū)</li>

    <li>Jquery專區(qū)</li>

  </ul>

  <ul>

    <li>字體要變藍(lán)色了</li>

  </ul>

</div>

</body>

</html>