jQuery中filter()方法用法實例

2024-05-06 16:13:48

字體：大中小

來源：轉載

供稿：網友

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

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

語法結構一:
篩選出與指定表達式匹配的元素集合。

復制代碼代碼如下:

$(selector).filter(expr)

參數列表:

參數	描述
expr	字符串值，用于篩選當前元素集合的選擇器表達式。

實例代碼:

復制代碼代碼如下:

		
		<!DOCTYPE html>
		<html>
		<head>
		<meta charset=" utf-8">
		<meta name="author" content="http://www.survivalescaperooms.com/" />
		<title>filter()函數-武林網</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專區</li>
		    <li class="js">Javascript專區</li>
		    <li>Div+Css專區</li>
		    <li>Jquery專區</li>
		  </ul>
		</div>
		</body>
		</html>

這段代碼能夠將類名為js的li中的字體顏色設置為藍色。

語法結構二:

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

復制代碼代碼如下:

$(selector).filter(element)

參數列表:

參數	描述
element	用于匹配當前元素集合中元素的jQuery對象或者DOM對象。

實例代碼:

實例一:

復制代碼代碼如下:

		
		<!DOCTYPE html>
		<html>
		<head>
		<meta charset=" utf-8">
		<meta name="author" content="http://www.survivalescaperooms.com/" />
		<title>filter()函數-武林網</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專區</li>
		    <li id="js">Javascript專區</li>
		    <li>Div+Css專區</li>
		    <li>Jquery專區</li>
		  </ul>
		</div>
		</body>
		</html>

實例二:

復制代碼代碼如下:

		
		<!DOCTYPE html>
		<html>
		<head>
		<meta charset=" utf-8">
		<meta name="author" content="http://www.survivalescaperooms.com/" />
		<title>filter()函數-武林網</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專區</li>
		    <li id="js">Javascript專區</li>
		    <li>Div+Css專區</li>
		    <li>Jquery專區</li>
		  </ul>
		</div>
		</body>
		</html> 

語法結構三:

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

復制代碼代碼如下:

$(selector).filter(function())

參數列表:

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

實例代碼:

復制代碼代碼如下:

		
		<!DOCTYPE html>
		<html>
		<head>
		<meta charset=" utf-8">
		<meta name="author" content="http://www.survivalescaperooms.com/" />
		<title>filter()函數-武林網</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專區</li>
		    <li class="js">Javascript專區</li>
		    <li>Div+Css專區</li>
		    <li>Jquery專區</li>
		  </ul>
		  <ul>
		    <li>字體要變藍色了</li>
		  </ul>
		</div>
		</body>
		</html>